Javascript document.getElement innerHTML undefined

我想讓一個函數的結果出現在腳本外部的一個元素中。而不是結果，我得到一個「未定義」的消息。這可能只是一個語法問題，但我沒有得到它的工作。Javascript document.getElement innerHTML undefined

這裏是我做過什麼：

<html> 
 
<head> 
 

 

 
</head><body> 
 
<table class="mytable">  
 
<tr> 
 

 
<p><span id="number1">1</span><span> + </span><span id="number2">2</span><span> = </span></p> 
 

 
<p><span id="sr">here goes the range of solutions to select of</span></p> 
 

 
<p><span id="quote">here goes the quote</span></p> 
 
</table> 
 
<form id="myForm"> 
 
<div id="display" style="height: 20px; width: 100%;"></div> 
 
    
 
<script> 
 

 
var plusorminus1 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus2 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus3 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus4 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus5 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus6 = Math.random() < 0.5 ? -1 : 1; 
 
var plusorminus7 = Math.random() < 0.5 ? -1 : 1; 
 

 
function sortfunction(a, b){ 
 
    return (a - b) 
 
} 
 

 
var number1; 
 
var number2; 
 

 
number1 = Math.floor((Math.random() * 15) + 1); 
 
number2 = Math.floor((Math.random() * 15) + 1); 
 
document.getElementById("number1").innerHTML = number1; 
 
document.getElementById("number2").innerHTML = number2; 
 

 
var answer = parseInt(number1,10)+parseInt(number2,10); 
 

 
var addarr = [] 
 
while(addarr.length < 7){ 
 
    var randomnumber = Math.ceil(Math.random()*10) 
 
    if(addarr.indexOf(randomnumber) > -1) continue; 
 
    addarr[addarr.length] = randomnumber; 
 
} 
 

 
var var1 = answer; 
 
var var2 = answer + (plusorminus1 * addarr[0]); 
 
var var3 = answer + (plusorminus2 * addarr[1]); 
 
var var4 = answer + (plusorminus3 * addarr[2]); 
 
var var5 = answer + (plusorminus4 * addarr[3]); 
 
var var6 = answer + (plusorminus5 * addarr[3]); 
 
var var7 = answer + (plusorminus6 * addarr[3]); 
 

 
var myarray=[var1,var2,var3,var4,var5,var6,var7]; 
 
    myarray=myarray.sort(sortfunction); 
 

 

 
for(var i = 0; i < myarray.length; i++) 
 
{ 
 
\t var sr = (function(val) { 
 
     btn = document.createElement('button'); 
 
     btn.data = val; 
 
     btn.innerHTML = val; 
 
     btn.addEventListener('click', checkAnswer); 
 
     document.body.appendChild(btn); 
 
\t \t return btn.data = val; 
 
    })(myarray[i]); 
 
document.getElementById("sr").innerHTML = sr; //only shows the last value in the array 
 
} 
 

 

 
function checkAnswer(evt) { 
 
    if (evt.target.data == answer) { 
 
     display.innerHTML = ("correct"); 
 
    } else { 
 
     display.innerHTML = ("Not correct"); 
 
    } 
 
document.getElementById("quote").innerHTML = evt.target.data; //does not work 
 
} 
 
</script> 
 

 
</FORM> 
 

 

 
</body> 
 
</html>

所以，我想是這樣的：
- 顯示答案的範圍從上面跨度內選擇。
- 在上面的範圍中顯示答案（正確/不正確）。
嗯，也許有可能使整個代碼更優雅，但這些是我在這裏的主要問題。

來源

2017-06-06 user9

你不會從你設置'sr'的函數返回值。 –

你要未定義的原因是，你永遠不會從分配給變量sr（以及隨後設置爲一個div與相同ID的內容）功能

var sr = (function(val) { 
    btn = document.createElement('button'); 
    btn.data = val; 
    btn.innerHTML = val; 
    btn.addEventListener('click', checkAnswer); 
    document.body.appendChild(btn); 
})(myarray[i]); 
document.getElementById("sr").innerHTML = sr; 
       sr has the value undefined --^

它return什麼目前還不清楚你的意思是把innerHTML的ID設爲sr。

來源

2017-06-06 14:24:45 Jamiec

明白了。那麼，我能做些什麼才能獲得整個數組而不是最後一個元素，只有當我把'return btn.data = val;'然後'document.getElementById（「sr」）。innerHTML = sr; '？ – user9

您的內部HTML設爲sr，這是函數的返回值：

var sr = (function(val) { 
    // ... 
    // nothing is returned 
})(myarray[i]); 

document.getElementById("sr").innerHTML = sr;

但這個函數不返回任何東西！

使用return關鍵字返回一些內容。

var sr = (function(val) { 
    // ... 
    return "I <3 Stack Overflow"; 
})(myarray[i]);

來源

2017-06-06 14:26:04

O.k.我改變了上面的代碼片段，並把'return btn.data = val;'。現在它只返回範圍的最後一個值。我希望它顯示與按鈕的範圍相同。 – user9

Javascript document.getElement innerHTML undefined

回答

相關問題