Update JavaScript variable on a HTML Select value change [duplicate]

Question

I would like to update a variable in javascript when the value of a HTML select value changes.

When I choose option 2 or 3 in the browser, the level variable still displays option 1 value (level = 2).

If it's not possible I would love to hear some other alternatives.

Here's the HTML -->

<select id="nivel">
        <option value="1">easy</option>
        <option value="2">medium</option>
        <option value="3">hard</option>
</select>
<p id="lvl">Level: </p>

Here's the js-->

var level;
if(document.getElementById("nivel").value == "1"){
        level = 2;
    }
      else{
        if(document.getElementById("nivel").value == "2"){
            level = 5;
        }else{
            level = 9;
        }
      }
 document.getElementById("lvl").innerHTML=("Level: " +level);

You are not handling any change here, this code only reads the currently selected value once. Are you familiar with the basics of JavaScript event handling? If not, that is something you need to go read up on first. — C3roe
– C3roe, Commented Jun 6, 2018 at 8:49
please re-visit the question, i made a small mistake, now corrected — edd
– edd, Commented Jun 6, 2018 at 8:54
function setLevel() { document.getElementById("lvl").innerHTML=("Level: " +[2,5,9][this.selectedIndex]); } var nivel= document.querySelector("#nivel"); nivel.onchange=setLevel; nivel.onchange(); jsfiddle.net/mplungjan/L1dhwfut — mplungjan
– mplungjan, Commented Jun 6, 2018 at 8:59

score 2 · Accepted Answer · 2018-06-06 08:57:25Z

Try to map values with levels using HTML5 data- attribute:

Option 1: With JS

var nivel = document.getElementById('nivel');
var lvl = document.getElementById('lvl');
nivel.onchange = function() {
  lvl.innerHTML = 'Level: ' + this.options[this.selectedIndex].getAttribute('data-level');
};
nivel.onchange();

<select id="nivel">
  <option value="1" data-level="2">easy</option>
  <option value="2" data-level="5">medium</option>
  <option value="3" data-level="9">hard</option>
</select>
<p id="lvl"></p>

Option 2: With jQuery

$(function() {
  $('#nivel').on('change', function() {
    $('#lvl').text('Level: ' + $(this).find('option:selected').data('level'));
  }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="nivel">
  <option value="1" data-level="2">easy</option>
  <option value="2" data-level="5">medium</option>
  <option value="3" data-level="9">hard</option>
</select>
<p id="lvl"></p>

Ankit Agarwal · Accepted Answer · 2018-06-06 08:53:48Z

There are multiple issues in your code:

You need to associate a change event in the select dropdown
You are using incorrect id in the if condition. It should be nivel and not lvl
Call changeLevel() function on page load so that it will set the default level variable based on the default selection.

function changeLevel(){
  var level;
  if(document.getElementById("nivel").value == "1"){
      level = 2;
  }
  else{
    if(document.getElementById("nivel").value == "2"){
        level = 5;
    } else{
        level = 9;
    }
  }
  document.getElementById("lvl").innerHTML=("Level: " +level);
}
changeLevel();

<select id="nivel" onchange='changeLevel()'>
        <option value="1">easy</option>
        <option value="2">medium</option>
        <option value="3">hard</option>
</select>
<p id="lvl">Level: </p>

Akhil Aravind · Accepted Answer · 2020-02-18 03:33:07Z

1

Just some alter with ? : -> replacing if.. else Check this snippet, i hope it will help

var level;
function updateLevel(event) {
  level = event.value;
  level = (level && level == '1') ? '2' : (level == '2') ? '5' : (level > 2) ? '9':''; 
  document.getElementById("lvl").innerHTML = ("Level: " + level);
}

<select id="nivel" onchange="updateLevel(this)">
  <option value="">Select</option>
  <option value="1">easy</option>
  <option value="2">medium</option>
  <option value="3">hard</option>
</select>
<p id="lvl">Level: </p>

edited Feb 18, 2020 at 3:33

answered Jun 6, 2018 at 8:51

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

2 Comments

mplungjan Over a year ago

Different values for 1,2,3

Akhil Aravind Over a year ago

@mplungjan thats the requirement, show 2 if selected 1, show 5 if selected 2, show 9 if selected 3.

Collectives™ on Stack Overflow

Update JavaScript variable on a HTML Select value change [duplicate]

3 Answers 3

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Linked

Related