javascript - 调用全局变量

Question

这是一个单题测验。当您选择答案并点击“提交”时，它应该输出您的答案和您的分数(满分 1 分)。

问题是它没有正确读取“var response” - 它是未定义的。

我希望第二双眼睛可以帮助我解决这个问题

感谢所有帮助:)

<p id="question">
<button type="button" class="start" onclick="test();">Start</button>
</p>

<p id="here"></p>

<script>

    function test() {
        document.getElementById("question").innerHTML =
          "<p>What color is the sky? <select id='list' onchange='score();'><option value='Not Sure' selected>Not Sure</option><option value='Blue'>Blue</option><option value='Red'>Red</option></select></p><button type='button' onclick='submit();'>submit</button>";
    }

    var total = 0;
    var response = document.getElementById('list').value;
    function score() {
        var response = document.getElementById('list').value;
        if (response === "Blue") {
            total++;
        }
    }

    function submit() {
        document.getElementById("here").innerHTML =
          "Your Answer:" + response + "<br />" + total + "/1";
    }

</script>

Answer 1

您当前有两个 response 变量，第一个是全局变量，并分配给尚不存在的字段中的值，第二个是 score() 中的本地变量 函数。

您需要在函数外部声明变量，但在score()内设置其值:

function test() {
    document.getElementById("question").innerHTML =
      "<p>What color is the sky? <select id='list' onchange='score();'><option value='Not Sure' selected>Not Sure</option><option value='Blue'>Blue</option><option value='Red'>Red</option></select></p><button type='button' onclick='submit();'>submit</button>";
}

var total = 0;
var response = "Not sure";
function score() {
    // 'var' removed from following line:
    response = document.getElementById('list').value;
    if (response === "Blue") {
        total++;
    }
}

function submit() {
    document.getElementById("here").innerHTML =
      "Your Answer:" + response + "<br />" + total + "/1";
}

<p id="question">
<button type="button" class="start" onclick="test();">Start</button>
</p>

<p id="here"></p>

(另外，不是您要问的，但从 select 元素的 onchange 调用 score() 没有意义，因为如果用户更改他们的思维从蓝色到红色来回几次，然后 total 变量会增加几次，他们可以获得类似 3/1 的分数。最好这样做所有的计算都会响应提交按钮的点击。)