Bucle a través de la matriz utilizando un botón

Ok, en esencia quiero crear una prueba corta que tenga un botón siguiente y anterior. Quiero recorrer dos matrices, preguntas y opciones, y tener una puntuación al final. He leído capítulos sobre el DOM y los eventos y simplemente no está haciendo clic aparentemente.

Realmente necesito un poco de código que muestre un ejemplo concreto de cómo manipular el DOM. Lo que tengo hasta ahora son solo las matrices, y una función que declara que x de hecho está obteniendo mi elemento por id. jaja.

Lo siento, no tengo más código para dar. Intenté adjuntar el ID a un párrafo, y luego obtenerlo por ID y document.write la matriz, pero eso reemplaza al botón. Si ejecuta el código de abajo verá lo que estoy diciendo.

   Bom    

Some Text

var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"]; var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","","The Smurf Girl"]]; function iter_onclick () { var x = document.getElementById("qArray"); document.write("Hello World"); } `

Como dije, este es mi primer bash de manipular verdaderamente el DOM, y sé lo que quiero hacer. Simplemente no sé cómo hacerlo. Estoy entendiendo toda la syntax y eventos y objetos y tal. Pero, no estoy muy seguro de cómo aplicarlo. Además, no hay Jquery. Quiero saber cómo crear aplicaciones con Javascript y luego trabajar en Jquery. Gracias gente.

Esto recorrerá tus preguntas, espero que esto te ayude a continuar.

 var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"]; var cArray = [ ["Bill", "Billy", "Arnold", "Tyler"], ["Oz", " Buffon", "Tupac", "Amy"], ["Tony Blair", "Brack Osama", "Barack Obama", "Little Arlo"], ["Emma Stone", "Tony the Tiger", "Amy Dahlquist", "The Smurf Girl"] ]; var index = 0; function iter_onclick() { //if this is the last question hide and displays quiz ends if (index >= qArray.length) { document.getElementById('qArray').innerHTML = '
Quiz End, Thank you
' document.getElementById('myButton').style.visibility = 'hidden '; return false; } var html = '
' + qArray[index] + '
'; for (var i = 0; i < cArray[index].length; i++) { html += ''; } html += '
'; document.getElementById('qArray').innerHTML = html; index++; }

Aquí hay un ejemplo muy básico del que puedes trabajar. Esto modifica los elementos DOM existentes. No puede usar document.write() en un documento que ya está cargado o borrará todo lo que tiene y volverá a empezar y no es la forma más eficiente de colocar contenido en el DOM.

Este ejemplo tiene varios campos en la página, carga una pregunta y luego verifica la respuesta cuando presiona el siguiente botón.

HTML:

 





Number Correct So Far: 0

Javascript (en la etiqueta de script):

 var qArray = ["Who is my dog?", "who is the prez?", "Who is my girlfriend?", "Who am I?"]; var cArray = [["Bill","Billy", "Arnold", "Tyler"],["Oz"," Buffon","Tupac","Amy"],["Tony Blair","Brack Osama","Barack Obama","Little Arlo"],["Emma Stone","Tony the Tiger","Amy Dahlquist","The Smurf Girl"]]; var questionNum = -1; var numCorrect = 0; function loadQuestion() { ++questionNum; if (questionNum >= qArray.length) { alert("all questions are done"); } else { document.getElementById("question").innerHTML = qArray[questionNum]; document.getElementById("answer").value = ""; } } loadQuestion(); function checkAnswer() { var answer = document.getElementById("answer").value.toLowerCase(); var allowedAnswers = cArray[questionNum]; for (var i = 0; i < allowedAnswers.length; i++) { if (allowedAnswers[i].toLowerCase() == answer) { return true; } } return false; } document.getElementById("next").addEventListener("click", function(e) { if (checkAnswer()) { ++numCorrect; document.getElementById("numCorrect").innerHTML = numCorrect; loadQuestion(); } else { alert("Answer is not correct"); } }); 

Demostración de trabajo: http://jsfiddle.net/jfriend00/gX2Rm/