CODEWITHSUNDEEP
javascriptfunctiondrop-down-menuselection
austriker
austriker

Reputation: 15

What am I doing wrong? Get selection from drop down list. Javascript

For some reason, I cannot get this to work. I am new to JS (and pretty new to coding in general) and I've been looking at it for several hours and searching here as well. I do not see what is wrong with my code.

I am trying to retrieve a value from a select options list. I want to use that value in another function.

This is what I am trying, and "Vocation" does not change to the value, even though I believe it should.

<body>
<div class="wooh" style="width:200px;margin: 25px;">
  <select id="Vocation">
    <option value="0">Select Voc:</option>
    <option value="3.0">EK</option>
    <option value="1.4">RP</option>
    <option value="1.1">ED</option>
    <option value="1.1">MS</option>
  </select>
  
  <p id="result">Vocation</p>
</div>

<script>
// Edit your script here
function selection() {
  var x = document.getElementById("Vocation").value;
  document.getElementById("result").innerHTML = x;
}
</script>

My end "goal" is to pass the value on to this function:

  var x = document.getElementById("level").value;
  var y = [value here]
  var z = 1600
  var a = 305000
  document.getElementById("result").innerHTML =  Math.ceil((z * Math.pow(y, x))/305000);

Where y should be the value from the selected option. What am I doing wrong?

Upvotes: 0

Views: 80

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

You have written the code but nothing to specify when the code should run. You need to take your function and turn it into an "event handler".

<div class="wooh" style="width:200px;margin: 25px;">
  <select id="Vocation">
    <option value="0">Select Voc:</option>
    <option value="3.0">EK</option>
    <option value="1.4">RP</option>
    <option value="1.1">ED</option>
    <option value="1.1">MS</option>
  </select>
  
  <p id="result">Vocation</p>
</div>

<script>
  // You will be needing to refer to the result element more than once, so
  // just scan the document for it one time and cache the reference
  let result = document.getElementById("result");

  // Get a reference to the <select> element and bind a function to its change
  // event, which will trigger any time the select's value changes
  document.getElementById("Vocation").addEventListener("change", function() {
    // Because this function is bound to the select, when it is triggered
    // "this" will be an automatic reference to the select. 
    
    // Don't use .innerHTML when the string you are working with doesn't
    // contain any HTML because .innerHTML has security and performance
    // implications. For plain text, use .textContent
    result.textContent = this.value;
  });
</script>

Learn more about events and event handling here.

Upvotes: 2

Related Questions