如何點擊圖片以顯示圖像的功能

試圖點擊magic8，但快樂，悲傷和驚訝的圖片不會顯示在線以下。我做錯了什麼？我將random.js中的圖像保存在同一個文件夾中。如何點擊圖片以顯示圖像的功能

<html> 
    <head> 
     <script type=text/javascript src="random.js"> 
     </script> 
     <script> 
     function magicEight() { 
      var imgName; 
      imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]); 
      document.getElementById('outputDiv').value = imgName; 
     } 
     </script> 
    </head> 
    <body> 
     <div style="text-align:center"> 
      <h1> Magic 8-ball (Mattel, Inc.) </h1> 
      <p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p> 
      <input type="text" id="questionBox" size=90 value=""> 
      <p> 
       <input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();"> 
      </p> 
      <hr> 
      <div id="outputDiv"></div> 
     </div> 
    </body> 
</html>

來源

2016-10-27 Winnie Chan

什麼是'random.js'？控制檯是否記錄了任何錯誤？ – Isaac

什麼是'RandomOneOf'？ – Dekel

請張貼您的所有代碼。它會幫助我們回答你的問題。謝謝。歡迎來到Stackoverflow :) – www139

如果你想顯示和圖像，你需要在一個img標籤添加不是div標籤的randomoneof的價值。改變這一點，我認爲它會工作

來源

2016-10-27 02:27:29

怎麼樣？所以我不應該使用outputDiv？ –

不，你應該使用：，然後在JavaScript，你應該改變src值：的document.getElementById（「蘭特圖像」）SRC =「路徑到的圖像」; –

設置.value on outputDiv將不會顯示圖像。您必須設置<img>標記的src屬性。

假設所有的隨機圖像都生活在/Images，你可以使用下面的作爲你的新magicEight函數。

function magicEight() { 
    var imgName; 
    imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]); 
    var imageTag = "<img src='/Images/" + imgName + "'>"; 
    document.getElementById('outputDiv').innerHTML= imageTag; 
}

來源

2016-10-27 02:33:32 Terminus

它不起作用。我必須使用RandomOneOf，每當我點擊球時，它應該只顯示一種情緒。 –

@WinnieChan我編輯了我的答案。但是如果HienHuynh已經回答你的嘲笑，接受他的回答。（他的回答的左邊應該有一個複選標記） – Terminus

演示：https://codepen.io/hienhuynhtm/pen/dpLgNr

<script> 
    var IMAGE_LIST = [ 
     "http://balance3e.com/Images/happy.gif", 
     "http://balance3e.com/Images/sad.gif", 
     "http://balance3e.com/Images/surprised.gif" 
    ]; 
    function magicEight() { 
     var imgName = IMAGE_LIST[Math.floor(Math.random() * IMAGE_LIST.length)]; 
     document.getElementById("randomImg").src = imgName; 
    } 
</script> 

<div style="text-align:center"> 
    <h1> Magic 8-ball (Mattel, Inc.) </h1> 
    <p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p> 
    <input type="text" id="questionBox" size=90 value=""> 

    <p><input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();"></p> 

    <hr /> 
    <img id="randomImg" /> 
</div>

來源

2016-10-27 02:55:32

不錯。只要說清楚randomImg是什麼/哪裏是完整的。 – Terminus

@Terminus：我剛更新完整的代碼+演示鏈接。感謝您的建議。 –

我明白了。謝謝:) –

如何點擊圖片以顯示圖像的功能

回答

相關問題