どのように私はクリック

Question

でこのJavaScriptコードを起動するか、編集：[OK]を、私は十分に説明しませんでした。 HTMLにボタンを追加しました。これをクリックすると、アラートが表示され、ユーザーは質問と回答を入力するよう求められます。しかし、それはカード自体に配列をプッシュしません。

私は一緒に簡単なJavaScriptのフラッシュカードプログラムをハッキングしています。しかし、それはすぐにページの読み込みを開始します。単一の<button>をクリックして開始するにはどうすればよいですか？私は関数内でコード全体を囲むことを試みましたが、配列を作成するユーザー入力はフラッシュカードに渡されません - 別々の関数なので、私は仮定します。私はおそらくこれを説明していないでしょう。しかし、私はプログラム全体を1つのボタンをクリックして実行したい。私はどんな助けにも感謝します。

#flashcardFront { 
    margin-top: 100px; 
    margin-left: 400px; 
    width: 300px; 
    height: 50px; 
    background-color: black; 
    color: white; 
    font-family: arial; 
    font-size: 22px; 
    text-align: center; 
    padding: 50px 0; 
    display: block; 
} 

a:link { 
    text-decoration: none; 
} 

#number { 
    color: red; 
    position: relative; 
    left: -120px; 
    top: 30px; 
} 

<div> 
    <button onclick='cards();'>button</button> 
    <a id="flashcardFront" href="#" onclick="flashCards();"></a> 
</div>  

var myArray = [];        

for (var i = 0; i < 2; i++) {    // # of loops 
    myArray.push(prompt('Enter question ' + (i+1))); // push the value into the array 
    myArray.push(prompt('Enter answer ' + (i+1))); // push the value into the array 
} 
/*var myArray = [ 
    "Q: What's my name?", 'A: Heck no.', 
    'Q: My age?', "A: Cool kids don't say.", 
    'Q: Fave rocker?', 'A: Paul Gilbert' 
];*/ 
var myIndex = 0; 

function renderQuestion(index) { 
    // render number if index is even 
    var str = myArray[index] 
    if (index % 2 == 0) { 
    str += '<br><span class="question-number">' + (index/2 + 1) + '</span>' 
    } 
    return str 
} 

function flashCards() { 
    var flashcardFront = document.getElementById('flashcardFront'); 
    flashcardFront.innerHTML = renderQuestion(myIndex); 
    myIndex = (myIndex + 1) % (myArray.length); 
} 

flashCards() 

Answer 1

私はここでの問題はmyIndexがグローバルであるということだと思います。初めてflashcards実行すると、それは、配列の長さにインデックスをインクリメントするので、次回はそれはそれは、配列の末尾にすでにだ（クリックハンドラで）実行されます。 flashcardsの先頭に0を設定します。

Answer 2

コードの最後には、ユーザーがすべてのプロンプトが表示され、入力に入った直後に最初の質問をロードするためにあなたのページを引き起こすflashCard() JavaScript関数を呼び出します。それを取り除くとあなたのアプリケーションは良いです。

Answer 3

var questionsAndAnswers = [];  
 

 
var myIndex = 0; 
 

 

 

 
function showAllQuestionsAndAnswers() { 
 
for (var i = 0; i < questionsAndAnswers.length; i++) { 
 
    if(i % 2 == 0) { 
 
     alert("Question: " + questionsAndAnswers[i]); 
 
    } 
 
    else { 
 
     alert("Answer: " + questionsAndAnswers[i]); 
 
    } 
 
} 
 
} 
 
/*var myArray = [ 
 
    "Q: What's my name?", 'A: Heck no.', 
 
    'Q: My age?', "A: Cool kids don't say.", 
 
    'Q: Fave rocker?', 'A: Paul Gilbert' 
 
];*/ 
 

 

 
function renderQuestion(index) { 
 
    // render number if index is even 
 
    var str = questionsAndAnswers[index] 
 
    if (index % 2 == 0) { 
 
    str += '<br><span class="question-number">' + (index/2 + 1) + '</span>' 
 
    } 
 
    return str 
 
} 
 

 

 
function flashCards() { 
 
for (var i = 0; i < 2; i++) {    // # of flash cards 
 
    questionsAndAnswers.push(prompt('Enter question ' + (i+1))); // push the value into the array 
 
    questionsAndAnswers.push(prompt('Enter answer ' + (i+1))); // push the value into the array 
 
    
 

 
} 
 
    var flashcardFront = document.getElementById('flashcardFront'); 
 
    flashcardFront.innerHTML = renderQuestion(myIndex); 
 
    myIndex = (myIndex + 1) % (questionsAndAnswers.length); 
 
} 
 

 
function startGame() { 
 
    flashCards(); 
 
} 
 
document.getElementById("start_game").onclick = function() {startGame()};

#flashcardFront { 
 
    margin-top: 100px; 
 
    margin-left: 400px; 
 
    width: 300px; 
 
    height: 50px; 
 
    background-color: black; 
 
    color: white; 
 
    font-family: arial; 
 
    font-size: 22px; 
 
    text-align: center; 
 
    padding: 50px 0; 
 
    display: block; 
 
} 
 

 
a:link { 
 
    text-decoration: none; 
 
} 
 

 
#number { 
 
    color: red; 
 
    position: relative; 
 
    left: -120px; 
 
    top: 30px; 
 
}

<div> 
 
    <button onclick='cards();'>button</button> 
 
    <button id="start_game"> 
 
    Start Game 
 
    </button> 
 
    <a id="flashcardFront" href="#" onclick="flashCards();"></a> 
 
</div>

@Roizpiセミコロンが本当に必要とされていない