来自字符串函数的图像答案

【问题标题】：Images from string function来自字符串函数的图像
【发布时间】：2013-02-18 02:54:58
【问题描述】：

我正在尝试制作一个魔术八球模拟，但它不适合我。 Chrome 中的检查器元素没有显示任何错误，所以我很困惑为什么它不起作用。任何建议将不胜感激。

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

【问题讨论】：

它应该为不同的结果返回不同的图像。例如，如果答案中有一个 r，它应该返回 yes，如果有一个 m，它应该返回 no image。它现在不这样做。如果没有 r 或 m，我还需要添加一个 if 语句以允许它从数组中返回一个随机图像。

标签： javascript arrays string

【解决方案1】：

我看到的问题是，当单击按钮并选择正确的值时，您正在调用 eightBall 函数，但您没有对它做任何事情，例如在myOutput div 中追加一个节点。

你还有两个 body 标签。

【讨论】：

好的。我想我明白你的意思。那么，如何将它附加到 myOutput div 中？
您首先需要一个对myOutput 的引用，您可以使用方法document.getElementById 获得它。然后您可以使用方法 document.createElement 创建一个 img 节点，将所需的值分配给 src 属性，最后使用方法 myOutput.appendChild 附加它
...或者您可以更改 myOutput 并将其设为 img 而不是 div，因此您只需按照 SLaks 的建议更新其 src 属性。

【解决方案2】：

您没有对函数的返回值做任何事情。

您可能希望将其分配给<img> 标记的src 属性。

【讨论】：

这是有道理的。我该怎么做？
这个建议很棒，但是有人可以给我看一些关于如何使用不同变量的代码，这样我就可以直观地看到你想要解释的内容吗？