CODEWITHSUNDEEP
javascriptfunctionundefined
anon
anon

Reputation: 49

Calling upon a global variable

This is intended to be a one question quiz. When you choose your answer and hit "submit" it should output your answer and your score out of 1.

The problem is it isn't reading "var response" correctly - it comes out undefined.

I was hoping a second set of eyes can help me address the problem

All help is appreciated :)

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

Upvotes: 0

Views: 35

Answers (3)

nnnnnn
nnnnnn

Reputation: 150080

You currently have two response variables, the first one being global and assigned to a value from a field that doesn't exist yet, and the second being local within the score() function.

You need to declare the variable outside the functions, but set its value inside 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>

(Also, not what you're asking, but it doesn't make sense to call score() from the select element's onchange, because if the user changes their mind back and forth from Blue to Red several times then the total variable gets incremented several times and they can get a score like 3/1. It would be better to do all the calculations in response to the submit button click.)

Upvotes: 2

brk
brk

Reputation: 50346

The problem seems to be with this line

var response = document.getElementById('list').value;

When this line is parsed there is not element with id list present in dom. Hence you are seeing undefined.

You can try by assigning this variable inside the test function

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>";
  response = document.getElementById('list').value;

}

DEMO

Upvotes: 0

Aruna
Aruna

Reputation: 12022

You can remove the "var" inside the below method which is redefining the global variable inside the function scope.

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

Upvotes: 0

Related Questions