根据单选按钮选择更改只读输入字段文本

Question

场景是我想根据用户选择的单选按钮设置总价，当用户选择其中一个单选按钮时，价格会相应变化。

这里是 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>

但似乎对我没有任何帮助，感谢您的帮助，谢谢 :)

Answer 1

首先，您的代码存在一些问题。如果您在浏览器控制台中查看，您会看到错误以及它们出现的特定行号 - 这始终是一个很好的起点。

首先，getElementsByName returns 一个元素的集合，所以你需要遍历它并一个一个地附加事件监听器。例如，您不能像使用 jquery 那样只调用 addEventListener 一次应用它们。在此处查看该功能的文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

其次，您试图通过设置其 innerHTML 来更新 output 元素，但该元素是一个数字输入。您需要更新其 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>

根据单选按钮选择更改只读输入字段文本

Changing read only input field text according to radio button selection

html

javascript

css