我們必須執行JavaScript分配。我們必須建立一個句子生成器。當我在Chrome中執行此操作時,單擊按鈕時沒有任何反應。當我檢查控制檯日誌時,它說Uncaught ReferenceError: mySubject is not defined.
我以爲我已經在element1.onclick
函數中定義它了?Javascript輸出不顯示
這是到目前爲止我的代碼:
<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>