How do I assign a variable when someone clicks an option? (HTML)

Question

I've been trying to figure out how to make it so when someone clicks an option, a variable gets assigned. Here is what I've tried:

function changessw() {
  switch (document.getElementById("ssw").value) {
    case "1":
      var test = "Im A";
      break;
    case "2":
      var test = "Im B";
      break;

  }
}
document.write(test)

<select name="ssw" id="ssw" onchange="changessw()">
  <option value="1">A</option>
  <option value="2">B</option>
</select>

The variable only works when I test it in the function. I want to work globally. Any help would be appreciated!

The var test must be declared outside the function. – Abel LIFAEFI MBULA May 24 '22 at 14:59 — Abel LIFAEFI MBULA, May 24 '22 at 14:59

ChazUK · Answer 1 · 2022-05-24T14:59:18.553

Declare the variable outside of the function and then assign it inside the function.

Here's a link to an article on scope in javascript https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript and the MDN entry on let.

let test;

function changessw() {
  switch (document.getElementById("ssw").value) {
    case "1":
      test = "Im A";
      break;
    case "2":
      test = "Im B";
      break;

  }
}

function logTest() {
  console.log(test);
}

<select name="ssw" id="ssw" onchange="changessw()">
  <option value="1">A</option>
  <option value="2">B</option>
</select>
<button onclick="logTest()">Log test</button>

score 0 · Accepted Answer · answered May 24 '22 at 14:51

Move your variable declaration outside the scope of the function.

var test;
function changessw() {
  switch (document.getElementById("ssw").value) {
    case "1":
      test = "Im A";
      break;
    case "2":
      test = "Im B";
      break;

  }
  console.log(test);
}

<select name="ssw" id="ssw" onchange="changessw()">
  <option value="1">A</option>
  <option value="2">B</option>
</select>

How do I assign a variable when someone clicks an option? (HTML)

2 Answers2