Javascript 输出未显示

标签 javascript google-chrome output

我们有一项必须完成的 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 输出未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15247856/

相关文章:

javascript - 为什么我不能在 .keys() 的结果上调用 .join()?

javascript - Vue.js 修改其他组件的样式

javascript - 如何在 "--allow-file-access-from-files"模式下使用 Chrome 启动 html?

c - 我的程序不接受 scanf 命令的输入

java - 将所有java输出写入txt文件中

javascript - window.open 没有应用给定的高度参数

javascript - jquery html() 不适用于 Chrome 中的定位元素

google-chrome - 无法识别的 list key 'applications'。 Google Chrome警告

php - mysqli::query() 期望参数 1 为字符串,给定对象

javascript - 在 Chrome 应用程序上调用函数