JavaScript显示图像和文字而不是提示消息

我是一个新手，并开始学习编码。我有一个关于着名的“我握着多少手指？”的问题。项目。因此，我不想提醒消息，而是想要1-5的手指的实际图像以及它的消息是否正确。JavaScript显示图像和文字而不是提示消息

我认为有jQuery代码..但我不想跳到jquery和先学习hardcore的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>

谢谢你们！感谢你的帮助！

干杯！ Char

来源

2016-07-08 Char

你可以尝试使用'modals'。 http://www.w3schools.com/bootstrap/bootstrap_modal.asp –

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

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

来源

2016-07-08 03:41:20 dee

你在正确的轨道上！迄今为止工作很好！

你说

所以，而不是一个警报消息，我希望有一个手指的实际图像...

这使我认为我们从未希望请致电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>

有你有它！

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

来源

2016-07-08 03:41:35 IGNIS

嗨。谢谢你的帮助。我试过你给出的代码，但是我怎样才能使图像不排队？我希望它是一次一个图像将出现，如果用户键入数字。 – Char

@Char它们只在DOM中“排队”。它们实际上对用户不可见。请参阅[this fiddle]（https://jsfiddle.net/k5qmrxp4/）进行演示。 – IGNIS

JavaScript显示图像和文字而不是提示消息

回答

相关问题