Change javascript VAR value with HTML select

Question

I want to change the value of a variable via a HTML select prompt but it's not working.

// starting number of brick rows
const BRICK_ROWS = document.getElementById('nivel');

<select id='nivel' onchange='BRICK_ROWS()'>
  <option value="1">easy</option>
  <option value="2">medium</option>
  <option value="3">hard</option>
</select>

Please add details and clarity to your question for anyone to be able to help you, what do you want to achieve, how are you trying to achieve this, what results are you getting. at a first glance I can tell you directly as it is right now BRICK_ROWS is not a function and if a variable is meant to be changed to define it as a `const` use `let`, I would recommend going through a tutorial about the basics of javascript — Breezer, Dec 05 '22 at 01:25
Thanks for the answer and the tips! I've changed it to let and it still doesn't updates based on my select value. — mightfloat, Dec 05 '22 at 01:31
I see here got a similar solution to your question: [link](https://stackoverflow.com/questions/19329978/change-selects-option-and-trigger-events-with-javascript), please have a look — Chan Guan Yu, Dec 05 '22 at 01:39

Gustavo · Answer 1 · 2022-12-05T01:31:45.310

1

First: you can`t declare a const and then change this value. You should declare a var or let. Then to get select value:

<select id="nivel" onchange="changeValue(event)">
  <option value="1">easy</option>
  <option value="2">medium</option>
  <option value="3">hard</option>
</select>
<script>
  var brickRowsValue = 0
  function changeValue(event) {
    brickRowsValue = event.target.value
  }
</script>

edited Dec 05 '22 at 01:31

answered Dec 05 '22 at 01:25

Gustavo

11
2

This doesn't actually change the value when the option is updated. – asportnoy Dec 05 '22 at 01:26

score 1 · Answer 2 · answered Dec 05 '22 at 01:29

Create a non-constant variable to store the value:

let difficulty; // you can give it a default value if you want

Then, use .addEventListener() to listen for changes and update your variable:

const difficultySelector = document.getElementById('nivel');
difficultySelector.addEventListener('change', () => {
    difficulty = difficultySelector.value;
});

score 1 · Answer 3 · answered Dec 05 '22 at 01:30

You have a some syntax and logical error in your code.

const declaration mean that you can't change the value through your code once you set it.
you're trying to call variable lie a function using 'onChange' event

The solution:

declare your variable as a dynamic variable
create a function to reset its value

let BRICK_ROWS = 0;
function SET_BRICK_ROWS() {
BRICK_ROWS = document.getElementById('nivel').value; 
console.log(BRICK_ROWS)
}

 <select id='nivel'  onchange='SET_BRICK_ROWS()'>
        <option value="1">easy</option>
        <option value="2">medium</option>
        <option value="3">hard</option>
      </select>

Note: You can use addEventListener If you want a better solution

Change javascript VAR value with HTML select

3 Answers3