Javascript 来自字符串函数的图像_Javascript_Arrays_String

Javascript 来自字符串函数的图像

javascript arrays string

Javascript 来自字符串函数的图像,javascript,arrays,string,Javascript,Arrays,String,我想做一个魔法八球模拟，但对我来说不起作用。Chrome中的inspector元素没有显示错误，所以我不明白为什么它不起作用。如有任何建议，将不胜感激 <!DOCTYPE html> <html lang="en"> <head> <title>Project 4: Consistent</title> <!-- This part is the function to create my magic eight

我想做一个魔法八球模拟，但对我来说不起作用。Chrome中的inspector元素没有显示错误，所以我不明白为什么它不起作用。如有任何建议，将不胜感激

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Project 4: Consistent</title>
    <!-- This part is the function to create my magic eight ball that will randomly give a result, but for certain questions,
    it will provide the same answer always to fool their minds. -->

    <script>

        var answerMap = {}

        var images = ['eightBallYes.png', 'eightBallNo.png', 'eightBallMillionYears.png', 'eightBallAskLater.png', 'eightBallReally.png'];

        //I actually had a little bit of difficulty with this part of the project. 
         //The answer.search method you showed us in class for some reason is not working for me.
        //I worked with the GTF on this part 

        function eightBall() {
            var answer = document.getElementById("answerBox").value;
            answer = answer.toLowerCase();

            if (answer.search(/[r]/) > 0 ) {
                var yes = '../Images/eightBallYes.png' 
                return yes;
            }

            if (answer.search(/[m]/) > 0 ) {
                var no = '../Images/eightBallNo.png' 
                return no;
            }

        }

        window.onload = alert('Welcome to my Project 4')

    </script>
</head>

<body>
<body style="background:#EEEE17">
    <!-- This part of the page will simulate a magic eight ball that will provide at least 4 answers.
    When certain questions are asked, it will return the same answers. This is honestly a pretty cool project to work on. -->

    <div style="text-align:center">
        <h1>Project 4: Booyah!</h1>
        <img src="../images/eightBallTemplate.png" >
        <h2>Magic 8-Ball Game</h2>


        <input type="text" id="answerBox" value="Please ask a question">
        <input type="button" value="Submit for Magical Results" onclick='eightBall()'/>


        <div id="myOutput"></div>

        <hr>

        <a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/mac.html">Old MacDonald In-Class Activity</a>
        <br>
        <a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/paramString.html">Parameter In-Class Activity</a>
        <br>
        <a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/isPrimeLight-jQuery.html">jQuery In-Class Activity</a>
        <br>
        <a href="http://pages.uoregon.edu/alans/111/CIS%20111/p4/string.html">String In-Class Activity</a>

        <footer>

            <p>
                &copy; Copyright  by Alan Sylvestre
            </p>
        </footer>
    </div>
</body>


项目4：一致性
var answerMap={}
var images=['eightBallYes.png'，'eightBallNo.png'，'eightBallMillionYears.png'，'eightBallAskLater.png'，'eightBallReally.png']；
//实际上，我在项目的这一部分遇到了一点困难。
//由于某种原因，你在课堂上向我们展示的答案搜索方法对我不起作用。
//我在这一部分与GTF合作
函数eightBall（）{
var answer=document.getElementById（“answerBox”）.value；
answer=answer.toLowerCase（）；
如果（答案搜索（/[r]/）>0）{
var yes='../Images/eightBallYes.png'
返回yes；
}
如果（答案搜索（/[m]/）>0）{
var no='../Images/eightBallNo.png'
返回否；
}
}
window.onload=alert（'欢迎使用我的项目4'）
项目4：哇！
魔术8球游戏








&抄袭；Alan Sylvestre版权所有

您没有对函数的返回值执行任何操作

您可能希望将其分配给

属性。
我看到的问题是，当单击按钮并选择正确的值时，您正在调用八个球
函数，但您没有对其执行任何操作，例如在myOutput
div中添加节点
您还有两个body标签。
它应该返回不同的图像以获得不同的结果。例如，如果答案中有r，它应该返回yes，如果有m，它应该返回no图像。它现在没有这样做。我还需要添加一个if语句，允许它在没有r或m的情况下从数组返回一个随机图像。我想我明白你的意思。那么，如何将其附加到myOutput div中呢？首先需要对myOutput的引用，可以使用document.getElementById方法获得该引用。然后，您可以使用document.createElement方法创建一个img节点，将所需的值分配给src属性，最后使用myOutput.appendChild方法将其追加……或者您可以更改myOutput并将其设置为img而不是div，这样您只需要按照SLaks建议的方式更新其src属性。这很有意义。我该怎么做？这个建议很好，但是有人能给我看一些关于如何使用不同变量来实现这一点的代码吗，这样我就可以直观地看到您试图解释的内容了？