How do I start this javascript code on click -
edited: ok, didn't explain well. have added button in html. when click that, alerts , asks user enter questions , answers. but...it doesn't push array cards themselves.
i have hacked simple javascript flash card program. starts on page load. how make start on click of single <button>
? i've tried enclosing entire code in function user inputs create array don't passed flashcards -- assume because separate functions. i'm not explaining well. want entire program run on click of 1 button. appreciate help.
#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 = []; (var = 0; < 2; i++) { // # of loops myarray.push(prompt('enter question ' + (i+1))); // push value array myarray.push(prompt('enter answer ' + (i+1))); // push value array } /*var myarray = [ "q: what's name?", 'a: heck no.', 'q: age?', "a: cool kids don't say.", 'q: fave rocker?', 'a: paul gilbert' ];*/ var myindex = 0; function renderquestion(index) { // render number if index 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()
i think issue here myindex
global. first time flashcards
runs, increments index length of array, next time runs (in click handler) it's @ end of array. set 0 @ beginning of flashcards
.
Comments
Post a Comment