2013-03-06 94 views
1

我們必須執行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> 

回答

0

所以我想出瞭如何解決這個問題。

再次編輯我的代碼後,所有的按鈕都在工作,但他們沒有正確地輸出到輸出div。所以我宣佈了所有正在我的陣列上運行的Math.Random公式,以便它們都有一個默認的答案。此外,我創建了一個默認輸出,將顯示在輸出格。

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 + " ."; 
} 

現在每個數學。隨機數正在被再次計算,然後被輸入到特定的文本字段,然後輸出到輸出格。

0

在函數內部聲明的變量是當地這些功能,這意味着你不能使用它們這些功能之外。嘗試將變量聲明爲函數外部的全局變量。

0

When I check the Console Log, it says Uncaught ReferenceError: mySubject is not defined. I thought I defined it already in element1.onclick function?

JavaScript範圍是function scope。任何在函數中聲明的變量只能被該函數和任何嵌套函數訪問,而不能被外部函數訪問。

如果你想訪問mySubject以外的功能,你需要聲明它有你已經verb, subject, etc.. delcared。

此外,即使您仍然有問題,您的document.getElementById命令使用mySubject之前點擊事件分配它,但這是一個不同的問題,我想。

0

你應該myVerb和myAdj沿定義mySubject變量,如下所示:

var mySubject; 
var myVerb; 
var myAdj; 
0

要定義function裏面。在函數之外聲明它們,然後嘗試將它們賦值給它們。