Javascript 输出未显示答案

【问题标题】：Javascript output not showingJavascript 输出未显示
【发布时间】：2013-03-06 12:53:00
【问题描述】：

我们有一个必须做的 JavaScript 作业。我们必须构建一个句子生成器。当我在 Chrome 中运行它时，单击按钮时没有任何反应。当我检查控制台日志时，它显示Uncaught ReferenceError: mySubject is not defined. 我以为我已经在element1.onclick 函数中定义了它？

这是我目前的代码：

<body>
    <div id="container">
        <div id="buttons">
            <button id="btn1">Generate subject</button>
            <input name="subject" type="text" id="subject"
            />
            <button id="btn2">Generate verb</button>
            <input name="verb" type="text" id="verb" />
            <button id="btn3">Generate adjective</button>
            <input name="adj" type="text" id="adj" />
            <button id="btn4">Generate object</button>
            <input name="object" type="text" id="object" />
        </div>
        <!--buttons closing div-->
        <div>
            <p id="output">asjkldhfahfjasf;d</p>
        </div>
        <!--output closing div-->
    </div>
    <!--container closing div-->
    <script>
        var subject = new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My Dentist");

        var verb = new Array("licks", "pets", "hugs", "stabs", "eats");

        var adj = new Array("fat", "ugly", "delicious", "redundant", "hopeless");

        var object = new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");


        var element1 = document.getElementById("btn1");
        var element2 = document.getElementById("btn2");
        var element3 = document.getElementById("btn3");
        var element4 = document.getElementById("btn4");

        element1.onclick = function() {
            mySubject = subject[Math.random() * subject.length]
        };

        element2.onclick = function() {
            myVerb = verb[Math.random() * verb.length]
        };

        element3.onclick = function() {
            myAdj = adj[Math.random() * adj.length]
        };

        element4.onclick = function() {
            myObject = object[Math.random() * object.length]
        };

        document.getElementById("output").innerHTML = mySubject + myVerb + " the" + myAdj + myObject + ".";
    </script>
</body>

我开始迷失方向，不知道该怎么办，这只是我遇到的众多问题之一。

编辑：

所以我得到了一些关于我的 Javascript 的帮助，现在一切正常，除了输出。我希望它输出到输出 div，但它没有输出任何东西。这是我现在的代码：

<h1>The Amazing Fantastical Sentence Generator!</h1>

<h4>Have hours of fun with your imaginary friends!</h4>
</div><!--title closing div-->
<div id="buttons">

<button id="btn1">Generate subject</button>
<input name="subject" type="text" id="insubject"/>



<button id="btn2">Generate verb</button>
<input name="verb" type="text" id="verb"/>

<button id="btn3">Generate adjective</button>
<input name="adj" type="text" id="adj"/>


<button id="btn4">Generate object</button>
<input name="object" type="text" id="object"/>

<div >
<p id="output"></p>
</div><!--output closing div-->

</div><!--container closing div-->

<script>


var subject=new Array("Mel Gibson", "Optimus-Prime", "The Cat-lady", "The student", "My        Dentist");

var verb=new Array("licks", "pets", "hugs", "stabs", "eats");

var adj=new Array("fat", "ugly", "delicious", "redundant", "hopeless");

var object=new Array("cat", "bacon-strip", "dog-house", "bigmac", "hobo");


var element1=document.getElementById("btn1");
var element2=document.getElementById("btn2");
var element3=document.getElementById("btn3");
var element4=document.getElementById("btn4");

element1.onclick=function()  {document.getElementById('insubject').value=subject[Math.floor(Math.random()*(subject.length))];}

element2.onclick=function(){document.getElementById('verb').value=verb[Math.floor(Math.random()*(verb.length))];}

element3.onclick=function(){document.getElementById('adj').value=adj[Math.floor(Math.random()*(adj.length))];}

element4.onclick=function(){document.getElementById('object').value=object[Math.floor(Math.random()*(object.length))];}

document.getElementById("output").innerHTML= document.getElementById("insubject").value + document.getElementById("verb").value + " the" + document.getElementById("adj").value + document.getElementById("object").value + ".";


</script>
</body>
</html>

【问题讨论】：

标签： javascript google-chrome output

【解决方案1】：

在函数内部声明的变量对于这些函数是本地的，这意味着您不能在这些函数之外使用它们。尝试在函数之外将变量声明为全局变量。

【讨论】：

【解决方案2】：

您应该将 mySubject 变量与 myVerb 和 myAdj 一起定义如下：

var mySubject;
var myVerb;
var myAdj;

【讨论】：

【解决方案3】：

您在 function 中定义它。在函数外部声明它们，然后尝试在内部为它们分配值。

【讨论】：

【解决方案4】：

当我检查控制台日志时，它显示 Uncaught ReferenceError： mySubject 未定义。我以为我已经在 element1.onclick 函数？

JavaScript 作用域是function scope。任何在函数中声明的变量只能被该函数和任何嵌套函数访问，但不能被外部函数访问。

如果你也想在函数外访问mySubject，你需要在你有verb, subject, etc.. delcared 的地方声明它。

此外，即使您仍然遇到document.getElementById 命令在分配点击事件之前使用mySubject 的问题，但我想这是另一个问题。

【讨论】：

【解决方案5】：

所以我想出了如何解决这个问题。

再次编辑我的代码后，所有按钮都可以工作，但它们没有正确输出到输出 div。所以我声明了在我的数组上运行的所有 Math.Random 方程，这样它们都有一个默认答案。我还创建了一个默认输出，它将显示在输出 div 中。

var subStr = subject[Math.floor(Math.random()*(subject.length))];
var verbStr = verb[Math.floor(Math.random()*(verb.length))];
var adjStr = adj[Math.floor(Math.random()*(adj.length))];
var objStr = object[Math.floor(Math.random()*(object.length))];

document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";

然后我更改了我的 onclick 事件。

element1.onclick=function(){

subStr = subject[Math.floor(Math.random()*(subject.length))];
document.getElementById('insubject').value=subStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";

}

element2.onclick=function(){

verbStr = verb[Math.floor(Math.random()*(verb.length))];
document.getElementById('verb').value=verbStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}


 element3.onclick=function(){

adjStr= adj[Math.floor(Math.random()*(adj.length))];
document.getElementById('adj').value=adjStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}

element4.onclick=function(){

objStr= object[Math.floor(Math.random()*(object.length))];
document.getElementById('object').value=objStr;
document.getElementById("output").innerHTML= subStr + " " + verbStr + " the " + adjStr + " " + objStr + " .";
}

现在每个 Math.random 都在重新计算，然后将其输入到特定的文本字段中，然后输出到输出 div。

【讨论】：