Question

我试图让函数的结果出现在脚本之外的元素中。而不是结果我得到一个“未定义”的消息。这可能只是一个语法问题，但我不能让它发挥作用。

这是我做的：

<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>

所以，我想要的是以下内容：
- 显示在上述范围内选择的答案范围 - 在上面的范围内显示答案（正确/不正确）好吧，也许有可能使整个代码更优雅，但这些是我在这里的主要问题。

Answer 1

您未定义的原因是您永远不会return来自分配给变量sr的函数的任何内容（并随后设置为具有相同ID的div的内容））

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为innerHTML的div的sr放置。

Answer 2

您将内部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]);

Javascript document.getElement innerHTML undefined

2 个答案: