js獲取html下拉菜單的值的方法

Question

我的最終目標是將與所選下拉項關聯的十進制值添加到用戶輸入的任何其他數字（因此他們可能輸入 1，然后選擇 1/8，我希望它吐出 1.125。） - 這是一個 web 應用程序讓我跟蹤廚房里的食物和香料。

我無法獲取我在下拉列表中分配給每個選項的值。 我不斷收到以下錯誤：

script.js:7 Uncaught TypeError: 無法讀取 null 的屬性（讀取“值”）

我認為它會與實際分數斗爭，所以我的 html 下拉列表如下所示：

        <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>

最初，我的腳本使用 var fractions = document.getElementById("fractions") 然后使用 fractions.value 來獲取我在下拉列表中分配的值，但它不會給我值。 我在這里和另一個網站上找到了幾乎相同的答案 - use.value - 我想不出任何其他方法來做到這一點。

我也嘗試使用 var whatever = parseFloat(fractions); 然后 whatever.value 將值更改為浮點數，然后獲取該值，我想也許它給了我一個字符串，所以這就是為什么它沒有正確添加，但它有同樣的錯誤。

我確實最終改變了我的選擇器，認為這可能是問題所在，所以現在我的腳本如下所示：

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

我也試過 implement.value 這種方式：

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

但我不斷收到同樣的錯誤。

我可能犯了一個非常愚蠢的錯誤——我做錯了什么？

Answer 1

我已經嘗試過，並且可以確認以下代碼確實有效。

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

也許您嘗試查看代碼是否放在另一個 iframe 或類似問題中，以便它找不到該元素。 或者，這段代碼是有條件地渲染的，它甚至沒有被渲染。 請檢查這些先決條件。

Answer 2

根據錯誤消息，您的 querySelector 或 getElementById 未找到該元素。 我測試了你所有的嘗試，它們都對我有用（除了解析）。 您確定錯誤不是來自其他輸入嗎？

編輯：看片段：

 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>