Question

我希望浏览器显示随机图像（在0.jpg，1.jpg，2.jpg等中），用户应该识别并输入答案。浏览器应回复“正确”或“不正确”。

我的代码出了什么问题？

编辑：现在可以了！我更新了代码。谢谢你的提示。新年快乐！

<!DOCTYPE html>
<html>
<head>
<title>Identify the fruit</title>
<script type="text/javascript">
    var N = 4;  // number of images
    var fruitname = new Array( 
        "apple",        // name of 0.jpg 
        "orange",       // name of 1.jpg
        "banana",       // name of 2.jpg
        "pineapple",    // name of 3.jpg
     );     
    var samplefruitnumber; 
    function Initialize() {
        samplefruitnumber = Math.floor(N*Math.random()); 
        var DisplayedImage = samplefruitnumber + ".jpg";
        document.getElementById("id_main_image").src=DisplayedImage;
        document.getElementById("replytouser").innerHTML = "...";
        document.getElementById("useranswer").value = "";
    }
    function CheckAnswer() {
        if (document.getElementById("useranswer").value == window.fruitname[window.samplefruitnumber]) {
            document.getElementById("replytouser").innerHTML = "CORRECT!";
        } else {
            document.getElementById("replytouser").innerHTML = "INCORRECT! The correct answer is " + window.fruitname[window.samplefruitnumber];
        }
        document.getElementById("beginbutton").innerHTML = "Sample another";
    }
</script>
</head>
<body>
<h2>Identify the fruit</h2>
<p><button type="button" id="beginbutton" onclick="Initialize()">Begin</button></p>
<p><img id="id_main_image" src="default.jpg"></p>   
<p>Enter the name: <input type="text" id="useranswer"><button type="button" onclick="CheckAnswer()">Submit answer</button></p>
<p>Your answer is <span id="replytouser">...</span></p>
</body>
</html>

Answer 1

您需要获取数组中的值

var DisplayedImage = fruitname[samplefruitnumber] + ".jpg";

Answer 2

JavaScript的一个主要方面是提供用户与网站，应用程序等之间的交互。可以安全地假设您的目标属于此类别。编写此类代码的正确方法是使用事件。使用提示和警报是与用户交互的可怕方式。

如果您正在进行测验，请使用<input>，<button>，<output>等表单控件。

此外，您有多项选择题，那么您需要知道如何将元素和值收集到NodeLists和/或数组中。

最重要的是，您需要知道如何使用事件/侦听器/处理程序以及e.target如何帮助您确定单击的元素。

详细信息在演示中进行了评论

演示

// Define counter outside of main block
var idx = 0;

// Register the click event on button#btn...
document.getElementById('btn').addEventListener('click', function(e) {

  /* This is an array of arrays of strings in 
  || which each sub-array has 4 strings
  */ // Options 4 per quiz question
  var opt = [
    ['&#127827;', '&#127815;', '&#127819;', '&#127822;'],
    ['&#127818;', '&#127805;', '&#127813;', '&#127840;'],
    ['&#129364;', '&#129361;', '&#129365;', '&#129372;']
  ];

  // Array of 3 strings -- one for each question
  var que = ['Which one is a citris?', 'Which one is a vegetable?', 'Which one is a fruit?'];


  /* Template Literal's interpolation of variables
  || made creating this string very easy.
  */
  const QA =
    `<hr>
  <figure id='Q${idx}'>
   <figcaption>${idx+1}\. ${que[idx]}</figcaption>

    <input id='A${idx}0' class='A' name='A${idx}' type='radio'>
    <label for='A${idx}0'>${opt[idx][0]}</label>
    <input id='A${idx}1' class='A' name='A${idx}' type='radio'>
    <label for='A${idx}1'>${opt[idx][1]}</label>
    <input id='A${idx}2' class='A' name='A${idx}' type='radio'>
    <label for='A${idx}2'>${opt[idx][2]}</label>
    <input id='A${idx}3' class='A' name='A${idx}' type='radio'>
    <label for='A${idx}3'>${opt[idx][3]}</label>
    
</figure>`;

  // The TL will be inserted into the DOM
  document.querySelector('.dock').insertAdjacentHTML('beforeend', QA);

  // Increment the count
  idx++;
});

var sec = document.querySelector('.dock');

sec.addEventListener('click', function(e) {
  // Array answer key
  var ans = ['A02', 'A13', 'A21'];
  var tgt = e.target;
  if (tgt !== e.currentTarget) {
    if (tgt.checked) {
      var x = tgt.id.charAt(1);
      if (tgt.id === ans[x]) {
        console.log('Correct!');
      } else {
        console.log('Wrong!');
      }
      //console.log(tgt.id);
      //console.log(ans[idx]);
    }
  }
});

.A {
  display: none;
}

figcaption {
  font-size: 18px;
}

label {
  font: inherit;
  font-size: 64px;
}

.A:checked+label {
  border: 3px ridge #0ff;
  border-radius: 8px;
  width: 56px;
  height: 56px;
  background: #111;
}

#btn {
  margin-left: 70%;
  width: 64px;
  width: 84px;
  font-size: 24px
}

.as-console-wrapper {
  max-width: 20%;
  margin-left: 80%
}

<html>

<head>
  <title>Identify the fruit</title>
</head>

<body>
  <header>

    <h1>Identify the fruit</h1>
    <button id='btn'>Next</button>
  </header>
  <section class='dock'></section>


  <footer>

  </footer>
</body>

</html>

这个JavaScript测验游戏有什么问题？

2 个答案:

演示