.toLowerCase() not working among other things not working-CodePudding

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>

When I try take the input from the second second button (div id = repete) and put a toLowerCase() on it it does not work, and we I remove the toLowerCase() it still doesn't work but doesn't show a console error on the page. So I am confused On what I need to try do. I have tried to google it, but I could not find anything that helped.

CodePudding user response：

You have to check if num exists in pokemonName array. Otherwise, you'll be doing something like this: [1,2,3][5].toLowerCase() which results in undefined.toLowerCase(), and you can't call .toLowerCase() on undefined as it only exists for String.

CodePudding user response：

If you want asyncLoop to be defined you can't wrap it in a IIFE like that. I suspect you did that so it would run when the page loads, however there's another way to do that and still have the function defined for later use:

// 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();