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顯示圖像和文字而不是提示消息

回答

相關問題