JS
var score = 0 var yes = "yes" var pokemonName = []; var bg = []; var index = 0; document.getElementById('repete').style.visibility = 'hidden'; (function asyncLoop() { background = bg[num = Math.floor(Math.random() * bg.length)]; document.body.style.backgroundImage = 'url(' + background + ')'; })(); function loop() { var myAnswer = document.getElementById("myAnswer"); var answer = myAnswer.value; if (answer.toLowerCase().trim() == pokemonName[num].toLowerCase().trim()) { document.getElementById("text").innerHTML = "Correct, do you want to try again?"; score++ document.getElementById('repete').style.visibility = 'visible'; } else { document.getElementById("text").innerHTML = "Incorrect, do you want to try again?" + "\n" + " The pokemon was " + pokemonName[num]; document.getElementById('repete').style.visibility = 'visible'; } } function loopRepete() { var repete1 = document.getElementById("repete"); var replay = repete1.value; if (replay.toLowerCase().trim() == yes.toLowerCase().trim()) { asyncLoop(); } else { document.getElementById("text").innerHTML = "Goodbye, your score is " + score; location.href = 'index.html' } }HTML
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Pokemon Quiz</title> </head> <body> <lable> Answer </lable> <input id="myAnswer" type="text"> <button onclick="loop()">click</button> <p id="text"></p> <div id="repete"> <lable> Answer </lable> <input id="loop" type="text"> <button onclick="loopRepete()">click</button> <p id="loopText"></p> </div> <script src="Gen3.js"> </script> </body> </html>Cuando trato de tomar la entrada del segundo segundo botón (div id = repete) y pongo un toLowerCase() en él, no funciona, y elimino toLowerCase() todavía no funciona pero no muestra un error de consola en la página. Así que estoy confundido sobre lo que debo intentar hacer. Intenté buscarlo en Google, pero no pude encontrar nada que ayudara.
Debe verificar si num existe en la matriz pokemonName . De lo contrario, estará haciendo algo como esto: [1,2,3][5].toLowerCase() que da como resultado undefined.toLowerCase() , y no puede llamar a .toLowerCase() en undefined ya que solo existe para String .
Si desea que se defina asyncLoop, no puede envolverlo en un IIFE como ese. Sospecho que lo hizo para que se ejecutara cuando se carga la página, sin embargo, hay otra forma de hacerlo y aún tener la función definida para su uso posterior:
// define it like a normal function function asyncLoop() { background = bg[num = Math.floor(Math.random() * bg.length)]; document.body.style.backgroundImage = 'url(' + background + ')'; } // and call it right away asyncLoop();