Question

首先，我想说我是javascript的新手，这是我要实现的第一个代码，因此，想法是用户看到生物的图像，而玩家必须猜测该生物的名称并用文本区域（表格）填充。对于每个正确答案，玩家将获得+1分。

图像是由脚本从数组中随机生成的

现在的问题是，播放器看到图像并输入正确的名称时。当玩家给出相同的答案并且图像已被随机选择并且该图像==答案时，分数不会更新。

示例：Javascript计数问题，因此随机选择就像我提到的那样，它选择随机图像的数组。给定的答案就是玩家给出的答案。所以基本上，答案是仅在以后的随机选择中检查它。

我的代码可以在这里找到

function pick() {
  var imgArray = ['kabutops.png', 'wobbuffet.png', 'articuno.png'];
  var rand = imgArray[Math.floor(Math.random() * imgArray.length)]; //Pak een random naam uit de lijst
  document.querySelectorAll('img')[0].src = 'images/' + rand;
  var remove = rand;
  var keuze1 = remove.substr(0, remove.lastIndexOf('.'));
  console.log('Random pick ' + keuze1);
  return keuze1;
}

pick();

var score = document.getElementById('score'),
  count = 0;

function input() {
  var gegevenINPUT = (document.querySelector('input').value);
  return gegevenINPUT;
}

function verwerkFormulier(event) {
  event.preventDefault();
  console.log('given answer ' + input());

  if (input() == pick()) {
    count += 1;
    score.innerHTML = 'Score ' + count;
    console.log('Your score has been updated');
  }
}

document.querySelector('form').addEventListener('submit', verwerkFormulier);

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="opmaak/opmaak2.css">
    <meta charset="UTF-8">
    <title>Who's that Pokemon</title>
</head>
<body>


<div class="bg"></div>
<img id='pokemon'src="" alt="">

<form id='form' action="">
  <label for="name"></label>
  <input type="text" required name="name" id="name"><br>
<input id="clickme" type="submit" value="Go!"> 
     
    
    

</form>                                                      
         

<h1 id='score'>Score:</h1>
   
   
   
   
   
   
   
   
   
  
<script src="js/Pokemon.js"></script> 
</body>
</html>

现在我发现：提交表单后，它将调用verwerkFormulier。这将调用函数输入并选择然后比较结果。函数输入获取文本框的当前值。函数pick随机选择一个文件名，将当前图像设置为该文件名并返回选择的名称。您正在将玩家的答案与下一个问题进行比较。

有人可以帮助我修复此问题并使其运行吗？我尝试了多种解决方案，但它们没有帮助我。

Answer 1

我们的错误是您在使用（input（）== pick（））和pick（）再次调用该函数时，必须存储随机生成的值，然后将其与输入进行比较

pick = pick（）;

（input（）==选择）

function pick() {
  var imgArray = ['kabutops.png', 'wobbuffet.png', 'articuno.png'];
  var rand = imgArray[Math.floor(Math.random() * imgArray.length)]; //Pak een random naam uit de lijst
  document.getElementById('generator').style.display = "none";
  document.querySelectorAll('img')[0].src = 'images/' + rand;

  var remove = rand;
  var keuze1 = remove.substr(0, remove.lastIndexOf('.'));
  console.log('Random pick ' + keuze1);
  return keuze1;
}


var score = document.getElementById('score'),
  count = 0;

function input() {
  var gegevenINPUT = (document.querySelector('input').value);
  return gegevenINPUT;
}

function verwerkFormulier() {
  console.log('given answer ' + input());

  var url = document.querySelectorAll('img')[0].src;
  var keuze1 = url.substr(0, url.lastIndexOf('.'));
  //split string from start to index of '.'
  var pick = keuze1.substr(keuze1.lastIndexOf('/') + 1, keuze1.length); //split string from last index of / to last char of string
  console.log('Random pick ' + pick);
  if (input() == pick) {
    count += 1;
    score.innerHTML = 'Score ' + count;
    console.log('Your score has been updated');
    document.getElementById('generator').style.display = "block";
    document.querySelector('input').value = '';
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="opmaak/opmaak2.css">
  <meta charset="UTF-8">
  <title>Who's that Pokemon</title>
</head>

<body>


  <a id="generator" class="bg" onClick="pick()">Click here to generate a random Pic</a><br>
  <img id='pokemon' src="" alt="">


  <label for="name"></label>
  <input type="text" required name="name" id="name"><br>
  <input id="clickme" type="submit" onclick="verwerkFormulier()" value="Go!">


  <h1 id='score'>Score:</h1>

</body>

</html>

Javascript数组和更正的答案问题

1 个答案: