Funkcje w tablicy i dodatkowo, używając interwałów czasowych, jeśli to możliwe

Question 1

Podsumowując, próbuję zbudować grę, która uruchamia pytania z zegarem, ale nie przez jeden zegar, każde pytanie trwa 10 sekund, a następnie resetuje się, gdy minie 10 sekund. Jestem bardzo nowy w JavaScript, więc jestem całkowicie otwarty na wszelkie porady. Ale próbuję ustawić te funkcje w tablicy i ciągle otrzymuję błąd mówiący, że funkcja w tablicy nie istnieje, ale działa i widziałem, jak działa. Czy niewłaściwie zastosowałem tę metodę? i czy nadużywam funkcji timera?

$ (document) .ready (function () {

var arrayOfQuestions = [
    intro(),
    question1()
]

var time = 100;

function intro(){
    $("#questions").html('<h6>Welcome, In this game, You will be presented with a small portion of a song and your goal is to guess the next couple of lyrics. Good Luck</h6>'); 
}

function question1(){
    console.log("Question 1");
    $("#questions").html('<h2>"Do You Remeber? The..."</h2>');
    var ans1 = $("#pot-ans-1").html("<p>21st Night of September...</p>");
    var ans2 = $("#pot-ans-2").html("<p>The Way...</p>");
    var ans3 = $("#pot-ans-3").html("<p>How the stars stole the night away...</p>");
    var ans4 = $("#pot-ans-4").html("<p>My thoughts are with you...</p>");
};

function timer() {
     
        setTimeout(function() {

            time--; //its a countdown so we are looking for decerements specifically
            
            var secs = Math.floor(time/10);

            var tenths = time % 10;

            document.getElementById("timer").innerHTML = secs + ":" + tenths;
            
            timer();

            if(secs === -1) {
                
                time = 100;
                $("#timer").html("");
                alert("Next Question"); 

            };

      },100);
}


$(document).ready(function(){ 
    timer();
    for (i = 0; i < arrayOfQuestions.length; i++) {
        arrayOfQuestions[i]();
    }
})

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Louis Pierre Questionaire</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
</head>

<body>
    <div id="container">
        <div class="row">
            <div class="col-md-12">
                <center><ins>
                        <h1 class="Top">Welcome To Pernell's Trivia!</h1>
                    </ins></center>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <center>
                    <h1 class="under">Complete the song phrase!</h1>
                </center>
            </div>
        </div>

        <!-- <p class="empty space"></p> -->
        <div class="ratio-c-w">
            <center>
                <p class="Correct"></p>
                <p class="Wrong"></p>
            </center>
        </div>

        <div class="row">
            <div class="col-md-2">

            </div>

            <div class="col-md-8">
                <center>
                    <p class="timer" id="timer"></p>
                </center>
            </div>

            <div class="col-md-2">

            </div>
        </div>
       

        <div class="qContainer"> <!--contains both the question and the buttons in an entire div-->

            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-8" id="questions-div">
                    <center>
                        <div id="questions" class="question"></div>
                    </center>
                </div>
                <div class="col-md-2"></div>
            </div>

            <div class="row">
                <div class="col-md-2"></div>

                <div class="col-md-8">
                    <center>
                        <div id="buttons">
                            <button id="pot-ans-1" type="button" class="btn btn-secondary"></button>
                            <button id="pot-ans-2" type="button" class="btn btn-secondary"></button>
                            <button id="pot-ans-3" type="button" class="btn btn-secondary"></button>
                            <button id="pot-ans-4" type="button" class="btn btn-secondary"></button>
                        </div>
                    </center>
                </div>

                <div class="col-md-2"></div>
            </div>

        </div>

    </div>

    <!-- Scripts -->
    <div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
        <script src="assets/javascript/app.js"></script>

    </div>

</body>

</html>

javascript jquery html

0

Pernell Louis-Pierre 19 listopad 2018, 02:26

Answer

Proponuję:

usuń instrukcję "()" na końcu wywołania funkcji podczas pętli nawigacyjnej tablicy, aby mieć to arrayOfQuestions[i];, myślę, że element indeksu, który wywołujesz, jest już funkcją i to nie potrzebuje kolejnego "()" (przetestowałem go tutaj na JSFiddle i wydaje się działać)
zmodyfikuj drugi argument setTimeout() w 1000 zamiast 100, ponieważ wyraża on milisekundy i zapewniam, że będziesz mieć prawdziwy 10 sekundowy limit czasu (;

Miłego kodowania (;

1

b00leant 19 listopad 2018, 02:40

Question 2

Proponuję:

usuń instrukcję "()" na końcu wywołania funkcji podczas pętli nawigacyjnej tablicy, aby mieć to arrayOfQuestions[i];, myślę, że element indeksu, który wywołujesz, jest już funkcją i to nie potrzebuje kolejnego "()" (przetestowałem go tutaj na JSFiddle i wydaje się działać)
zmodyfikuj drugi argument setTimeout() w 1000 zamiast 100, ponieważ wyraża on milisekundy i zapewniam, że będziesz mieć prawdziwy 10 sekundowy limit czasu (;

Miłego kodowania (;

1

b00leant 19 listopad 2018, 02:40

Funkcje w tablicy i dodatkowo, używając interwałów czasowych, jeśli to możliwe

1 odpowiedź

Podobne pytania

Nowe pytania