場景是我想根據用戶選擇的單選按鈕設定總價，當用戶選擇其中一個單選按鈕時，價格會相應變化。
這是HTML：
<div class="input_box">
<h4 style="text-align: center;">???? ??????</h4>
<input type="radio" name="package" class="radio" id="pk1" value="70">
<label for="pk1">???????</label>
<input type="radio" name="package" class="radio" id="pk2" value="200">
<label for="pk2">???</label>
<input type="radio" name="package" class="radio" id="pk3" value="2500">
<label for="pk3">???</label>
</div>
<div class="input_box">
<input type="number" placeholder="Total Value" name="price" class="name" id="output">
<i class="fa fa-money icon" aria-hidden="true"></i>
</div>
我嘗試使用 javaScript 解決方案，例如：
<script>
document.getElementsByName("package").addEventListener("change", function(){
document.getElementById("output").innerHTML = this.value;// Show the value in output element
});
</script>
但它似乎對我沒有任何作用，我感謝任何幫助，謝謝:)
uj5u.com熱心網友回復：
您的代碼有幾個問題。如果您在瀏覽器控制臺中查看，您將看到錯誤和發生錯誤的特定行號——這始終是一個很好的起點。
首先，getElementsByName回傳一個元素的集合，因此您需要對其進行回圈并逐個附加事件偵聽器。例如，您不能addEventListener像使用 jquery 那樣一次呼叫來應用它們。在此處查看該功能的檔案：https ://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
其次，您試圖output通過設定其來更新元素innerHTML，但該元素是一個數字輸入。您需要改為更新其value屬性。
這是一個將所有這些結合在一起的片段。
const radios = document.getElementsByName('package')
radios.forEach(function(radio) {
radio.addEventListener('change', function() {
document.getElementById("output").value = this.value;
})
})<div class="input_box">
<h4 style="text-align: center;">???? ??????</h4>
<input type="radio" name="package" class="radio" id="pk1" value="70">
<label for="pk1">???????</label>
<input type="radio" name="package" class="radio" id="pk2" value="200">
<label for="pk2">???</label>
<input type="radio" name="package" class="radio" id="pk3" value="2500">
<label for="pk3">???</label>
</div>
<div class="input_box">
<input type="number" placeholder="Total Value" name="price" class="name" id="output">
<i class="fa fa-money icon" aria-hidden="true"></i>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483163.html
標籤：javascript html css