How to get the value of a drop down menu in html using js-CodePudding

My ultimate goal is to add the decimal value associated with the drop down item selected to any other number the user inputs (so they might input 1 and then choose 1/8 and I want it to spit out 1.125.) - it's a web app for me to keep track of the food and spices I have in the kitchen.

I can't get it to grab the value I've assigned to each option in the drop down. I keep getting the following error:

script.js:7 Uncaught TypeError: Cannot read properties of null (reading 'value')

I figured it would struggle with actual fractions, so my html drop down looks like this:

        <label for="fractions"></label>
        <select name="fractions" id="fractions">
            <option value="0">.0</option>
            <option value="0.125">1/8</option>
            <option value="0.25">1/4</option>
            <option value="0.67">1/3</option>
            <option value="0.50">1/2</option>
            <option value="0.75">3/4</option>
        </select>

Originally, I had my script using var fractions = document.getElementById("fractions") and then using fractions.value to get the value I assigned in the drop down, but it wouldn't give me the value. I found pretty much the same answer on here and on another website - use .value - and I can't figure out any other way to do it.

I also tried using var whatever = parseFloat(fractions); and then whatever.value to change the value to a float and then get that value, thinking maybe it was giving me a string, so that's why it wasn't adding properly, but it had the same error on it.

I did end up changing my selector thinking maybe that was the issue, so now my script looks like this:

const fractions = document.querySelector('#fractions')
const fractionsValue = fractions.value

I also tried implement .value this way:

const fractionsValue = fractions.options[fractions.selectedIndex].value

But I keep getting the same error.

I'm probably making a really silly mistake - what am I doing wrong?

CodePudding user response：

I have tried, and can confirm that the following code definitely works.

const fractions = document.querySelector('#fractions')
const fractionsValue = fractions.value
console.log("fractions.value:", fractionsValue)

Maybe you try to see whether the code was put in another iframe or similar issue so that it cannot find the element. Or, this code is rendered conditionally, and it even did not get rendered. Please check these pre-conditions.

CodePudding user response：

According to the error message your querySelector or getElementById is not finding the element. I tested all your attempts and they all worked for me (except the parse one). Are you sure the error is not from the other input?

Edit: see the snippet:

const fractions = document.querySelector('#fractions');
const fractions1 = document.getElementById("fractions");

console.log(fractions.value);
console.log(fractions1.value);
console.log(fractions.options[fractions.selectedIndex].value);

<label for="fractions"></label>
<select name="fractions" id="fractions">
    <option value="0">.0</option>
    <option value="0.125">1/8</option>
    <option selected value="0.25">1/4</option>
    <option value="0.67">1/3</option>
    <option value="0.50">1/2</option>
    <option value="0.75">3/4</option>
</select>