Javascript 如何单击图像以使用函数显示图像_Javascript_Html

Javascript 如何单击图像以使用函数显示图像

javascript html

Javascript 如何单击图像以使用函数显示图像,javascript,html,Javascript,Html,尝试单击magic8，但线下不会显示快乐、悲伤和惊讶的图片。我做错了什么？我已将图像保存在random.js中的同一文件夹中 <html> <head> <script type=text/javascript src="random.js"> </script> <script> function magicEight() { var im

尝试单击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>


函数magicEight（）{
var imgName；
imgName=RandomOneOf（[“happy.gif”、“sad.gif”、“sugged.gif”）；
document.getElementById（'outputDiv'）。value=imgName；
}
魔术8球（美泰公司）
在下面输入一个问题，然后点击神奇的8-球来接受它的智慧

如果要显示和图像，需要在img标签上而不是div标签上添加

randomoneof

的值。改变这一点，我认为如果你想显示和成像，你需要在img标签上而不是div标签上添加

randomoneof

的值，它会起作用。更改该设置，我认为它会起作用。

在

outputDiv

上设置

.value

将不会显示图像。您必须设置

的src属性；
document.getElementById（'outputDiv'）。innerHTML=imageTag；
}
设置。outputDiv
上的值
将不显示图像。您必须设置的src属性；
document.getElementById（'outputDiv'）。innerHTML=imageTag；
}
演示：

变量图像\u列表=[
"http://balance3e.com/Images/happy.gif",
"http://balance3e.com/Images/sad.gif",
"http://balance3e.com/Images/surprised.gif"
];
函数magicEight（）{
var imgName=IMAGE_LIST[Math.floor（Math.random（）*IMAGE_LIST.length）]；
document.getElementById（“randomImg”）.src=imgName；
}
魔术8球（美泰公司）
在下面输入一个问题，然后点击神奇的8-球来接受它的智慧


演示：

变量图像\u列表=[
"http://balance3e.com/Images/happy.gif",
"http://balance3e.com/Images/sad.gif",
"http://balance3e.com/Images/surprised.gif"
];
函数magicEight（）{
var imgName=IMAGE_LIST[Math.floor（Math.random（）*IMAGE_LIST.length）]；
document.getElementById（“randomImg”）.src=imgName；
}
魔术8球（美泰公司）
在下面输入一个问题，然后点击神奇的8-球来接受它的智慧


什么是random.js
？控制台是否记录任何错误？什么是RandomOneOf
？请发布所有代码。这将帮助我们回答你的问题。非常感谢。欢迎来到Stackoverflow:）什么是random.js
？控制台是否记录任何错误？什么是RandomOneOf
？请发布所有代码。这将帮助我们回答你的问题。非常感谢。欢迎来到Stackoverflow:）很好。为了完整性，只需弄清楚什么是/whererandomImg
。@Terminus:我刚刚更新了完整的代码+演示链接。谢谢你的建议。@WinnieChan:我的荣幸：）很好。为了完整性，只需弄清楚什么是/whererandomImg。@Terminus:我刚刚更新了完整的代码+演示链接。谢谢你的建议。@WinnieChan:我的荣幸：）它不起作用。我必须使用RandomOneOf，每次我点击球时，它应该只显示一种情绪。@WinnieChan我已经编辑了我的答案。但是如果HienHuynh已经回答了你的问题，接受他的回答。（他的答案左边应该有一个复选标记）它不起作用。我必须使用RandomOneOf，每次我点击球时，它应该只显示一种情绪。@WinnieChan我已经编辑了我的答案。但是如果HienHuynh已经回答了你的问题，接受他的回答。（答案左边应该有一个复选标记）怎么做？所以我不应该使用outputDiv？不，您应该使用：并且在javascript上您应该更改src值：document.getElementById（'rand-image'）.src=“图像路径”；怎样？所以我不应该使用outputDiv？不，您应该使用：并且在javascript上您应该更改src值：document.getElementById（'rand-image'）.src=“图像路径”；
function magicEight() {
     var imgName;
     imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]);
     var imageTag = "<img src='/Images/" + imgName + "'>";
     document.getElementById('outputDiv').innerHTML= imageTag;
}

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