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>
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>
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>
You also had to get rid of the onchange section if you want to use the button.
