Question

我是新手，开始学习编码。我有一个关于着名＆＃34;我举起多少手指的问题？＆＃34;项目。因此，我希望手指的实际图像不是一条警告信息，而是一条手指的实际图像，而且信息的正确与否都是正确的。

我认为有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>

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

干杯！炭

Answer 1

我认为你可以做这样的小提琴。

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

Answer 2

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

你说

警告信息的相反，我想要一个手指的实际图像......

这让我认为我们从不想要调用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>

你有它！

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

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

2 个答案: