我试图使函数的结果出现在脚本外部的元素中。我得到的不是结果，而是“未定义”消息。这可能只是一个语法问题，但我无法让它工作。
这是我所做的:
<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++)
{
var sr = (function(val) {
btn = document.createElement('button');
btn.data = val;
btn.innerHTML = val;
btn.addEventListener('click', checkAnswer);
document.body.appendChild(btn);
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>所以，我想要的是以下内容:
- 显示从上述范围内选择的答案范围。
- 在上面的范围内显示答案(正确/不正确)。
好吧，也许可以使整个代码更加优雅，但这些是我这里的主要问题。
最佳答案
您未定义的原因是您从未从分配给变量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 --^
目前尚不清楚您想要将什么内容放置为 id 为 sr 的 div 的 innerHTML。
关于Javascript document.getElement insideHTML 未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44392567/