JavaScript 显示图像和文本，而不是警报消息

JavaScript Display Image and Text Rather than Alert Message

本文关键字：消息 显示图 显示 图像 文本 JavaScript      更新时间：2023-09-26

我是新手，开始学习编码。我有一个关于著名的"我举起多少根手指？"项目的问题。因此，我想要的不是警报消息，而是带有 1-5 的手指的实际图像以及它是否正确的消息。

我认为有jquery代码......但我不想跳到jquery并先学习硬核JavaScript。我坚持创建图像数组，无法使图像出现。

这是我的代码：

    <body>
    <p>How many fingers am I holding up?</p>
    <p><input type="text" id="guess"> <button id="checkGuess">Guess!</button></p>
    <div id="image"></div>
    <div id="text"></div>
    <script type="text/javascript">
        var imgArray = new Array();
        imgArray[1] = new Image();
            imgArray[1].src="images/1.png";
        imgArray[2] = new Image();
            imgArray[2].src="images/2.png";
        imgArray[3] = new Image();
            imgArray[3].src="images/3.png";
        imgArray[4] = new Image();
            imgArray[4].src="images/4.png";
        imgArray[5] = new Image();
            imgArray[5].src="images/5.png";

        document.getElementById("checkGuess").onclick = function() {
            var randomNumber = Math.random();
            randomNumber = randomNumber * 6;
            randomNumber = Math.floor(randomNumber);
            if (document.getElementById("guess").value == randomNumber) {
                doument.getElementById("image").innerHTML = imgArray[num] + alert("Well done! You got it!");
            } else {
                alert("Nope! The number was " + randomNumber);
            }
        }

    </script>

</body>

谢谢大家！感谢您的帮助！

干杯！煳

我认为你可以做这样的事情。

https://jsfiddle.net/6a4p2po4/5/

我所做的是使imgArray成为图像的src数组，并根据结果更新img src。

我注意到在工作时您有一些错别字和未设置的变量。

例如，"doument"拼写错误，并且未设置"'num'"。

doument.getElementById("image").innerHTML = imgArray[num] + alert("Well done! You got it!");

使用 Chrome 或其他浏览器检查控制台 （F12） 可能会有所帮助。它肯定会帮助您调试。

使用 console.log() 而不是 alert() 将使其显示为日志而不是弹出窗口，因此您可以检查存储在变量上的值，即 console.log(randomNumber);

你走在正确的轨道上！到目前为止干得好！

你说

因此，我想要的不是警报消息，而是手指的实际图像......

这让我认为我们永远不想打电话给alert()，而是想显示图像和消息。假设我的假设是正确的，这里有一些代码......

<html>
<head>
   <!-- some other stuff... -->
   <!-- CSS is your friend! -->
   <style>
     .hidden {
        display: none;
     }
   </style>
</head>
<body>
<p>How many fingers am I holding up?</p>
<p>
  <input type="text" id="guess"> 
  <button id="checkGuess" onclick="checkGuess()">Guess!</button>
</p>
<div id="image">
  <!-- We can put the images in here then just hide/show them, which is much easier! -->
  <img class="hidden" src="./images/1.png"/>
  <img class="hidden" src="./images/2.png"/>
  <img class="hidden" src="./images/3.png"/>
  <img class="hidden" src="./images/4.png"/>
  <img class="hidden" src="./images/5.png"/>
</div>
<div id="text"></div>
<script>
   function checkGuess(){
     var actualFingerCount = Math.floor(Math.random() * (5 - 1 + 1)) + 1;
     //the `+` casts the value into a number
     var userGuess = +document.getElementById('guess').value; 
     //get all of our images
     var images = document.querySelectorAll('img');
     //hide all of them just to be safe
     images.forEach(function(img){
       img.classList.add('hidden');
     });
     //then show the one we want
     images[actualFingerCount - 1].classList.remove('hidden');
     var textDiv = document.getElementById('text');
     if(actualFingerCount === userGuess) {
       textDiv.innerHTML = 'Yay, you got it!';
     }
     else {
       textDiv.innerHTML = 'Whoops, try again! The number was ' + actualFingerCount + '.';
     }
   } 
</script>
</body>
</html>

你有它！

请注意，这是一个人为的示例。在现实世界中，你永远不应该在全局命名空间中定义函数，也不应该依赖于按特定顺序排列的元素，就像我对图像所做的那样。也许你可以接受它并改进它以遵循更好的编码标准！

相关文章：