如何点击图片以显示图像的功能

试图点击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：我刚更新完整的代码+演示链接。感谢您的建议。 –

我明白了。谢谢:) –

如何点击图片以显示图像的功能

回答

相关问题