Get selected option from HTML into JavaScript and using If statements to create numeric variables

user_14961501 0
Viewed 172

I am trying to use my select in HTML, bring in the values, then depending on the value, assign a different value to a variable. It's for an order form that will eventually give an updated price list based on what options the customer selects.

The logic goes as follows:

  • select an option
  • the option's value is assigned to a variable
  • based on the value, a numeric value is then assigned to that variable using a conditional statement

At this point I can get it to return the initial value, but once I invoke the conditional statement, it won't return anything.

I'm not receiving any errors, so I am just a little bit confused.

function fn1() {
  let cpu = document.getElementById("cpuOption").value;
  return cpu;
  cpuPrice = 0;
  if (cpu == cpu_1) {
    cpuPrice = 200;
  } else if (cpu == cpu_2) {
    cpuPrice = 300;
  } else {
    cpuPrice = 400;
  }

  document.getElementById("test").innerHTML = cpuPrice;
}
<form>
  <label for="cpuOption">Desired CPU Configuration</label>
  <br>
  <select id="cpuOption" onchange="fn1()">
    <option value="none" selected>select</option>
    <option value="cpu_1">cpu-1</option>
    <option value="cpu_2">cpu-2</option>
    <option value="cpu_3">cpu-3</option>
  </select>
</form>

<h2>Check it out!</h2>
<button onclick="fn1()">Click me</button>
<div id="test"></div>

conditional-statements forms html javascript
2 Answers

The first error, as @clod9353 mentioned, is that you return early inside your fn1() function. Code after a return won't get executed.

The second error is that you compare the select value to non-existing variables. Variables like cpu_1 and cpu_2 don't exist and you should compare the value to strings like "cpu_2".

The code below should work as expected:

function fn1() {
  let cpu = document.getElementById("cpuOption").value;
  let cpuPrice = 0;
  
  if (cpu === 'cpu_1') {
    cpuPrice = 200;
  } else if (cpu === 'cpu_2') {
    cpuPrice = 300;
  } else {
    cpuPrice = 400;
  }

  document.getElementById("test").innerHTML = cpuPrice;
}
<form>
  <label for="cpuOption">Desired CPU Configuration</label>
  <select id="cpuOption" onchange="fn1()">
    <option value="none" selected>select</option>
    <option value="cpu_1">cpu-1</option>
    <option value="cpu_2">cpu-2</option>
    <option value="cpu_3">cpu-3</option>
  </select>
</form>

<h2>Check it out!</h2>
<button onclick="fn1()">Click me</button>
<div id="test"></div>

user_61263730

I think this might help. Tell me if it does. This code has some unnecessary pieces of code.

    <body>
    <form>
        <label for="cpuOption">Desired CPU Configuration</label>
        <br>
        <select id="cpuOption">
            <option value="none" selected>select</option>
            <option id = "cpu_1"value="cpu_1">cpu-1</option>
            <option id ="cpu_2" value="cpu_2">cpu-2</option>
            <option id ="cpu_3"value="cpu_3">cpu-3</option>
        </select>
        <br><br>

    </form>
 <button onclick="fn1()">Click me</button>
    <script>
       function fn1() {
            let cpu = document.getElementById("cpuOption").value;
            var cpu_1 = document.getElementById("cpu_1").value
            var cpu_2 = document.getElementById("cpu_2").value
          ;
            cpuPrice = 0;
            if (cpu == cpu_1) {
                cpuPrice = 200;
            }
            else if (cpu == cpu_2) {
                cpuPrice = 300;
            }
else if (cpu == cpu ) {
cpuPrice = 0;
}

            else {
                cpuPrice = 400;
            }

           
         document.getElementById("test").innerHTML = cpuPrice;
        }
    </script>
    <h2>Check it out!</h2>
   
    <div id="test"></div>
</body>

user_146015810
Related