如何使用单选按钮更改变量值

How to use radio buttons to change variable values

本文关键字：改变 变量值 单选按钮 何使用      更新时间：2023-09-26

我是编码新手，正在尝试使用HTML5和JavaScript来创建具有用户输入的教育模拟。

为了将输入限制为合理的值，我想使用3个单选按钮在空气，水和油之间进行选择。

这些中的每一个都需要与粘度值和密度值相关联，稍后在模拟中使用。到目前为止，我只看到了如何使用单选按钮的"value"属性作为其输出，但是看到我需要将两个输出绑定到每个按钮，我如何实现这一目标（输出被发送到两个跨度，其内部HTML由脚本稍后的getElementById().innerHTML获取。

<div class="radio">
    <p><b>Fluid Type</b></p>
<form id="fluidForm">
    <p>
        <label>Air:   <input type="radio" name="fluid" value="Air"   /></label>
        <label>Water: <input type="radio" name="fluid" value="Water" /></label>
        <label>Oil:   <input type="radio" name="fluid" value="Oil"   /></label>
    </p>
</form>
<span>Fluid viscosity:</span>
    <span id="param3">4500</span>&nbsp;Pa s
<br/>
<span>Fluid density:</span>
    <span id="param4">4500</span>&nbsp;kg/m^3 <!-- SI -->
<script>
document.getElementByName("fluid").addEventListener("change", radioChange);
document.getElementByNAme("fluid").addEventListener("click", radioChange);
function radioChange (){
    if (document.getElementByName("fluid").value = "Air"){
        document.getElementById("param3").innerHTML = 50;
        document.getElementById("param4").innerHTML = 100;
    };
    if (document.getElementByName("fluid").value = "Water"){
        document.getElementById("param3").innerHTML = 60;   
        document.getElementById("param4").innerHTML = 110;
    };
    if (document.getElementByName("fluid").value = "Oil"){
        document.getElementById("param3").innerHTML = 70;
        document.getElementById("param4").innerHTML = 120;
    };
};
//and further down variables are called:
var viscosity = document.getElementById("param3").innerHTML;
var fdensity = document.getElementById("param4").innerHTML;
    </script>

这似乎行不通，在我看来（一个完全的新手）无论如何都是一种直率的做事方式。

（跨度内的值已经只是占位符，让我知道它是否正确更改）。

提前非常感谢任何帮助！

您的代码将在一些更改后工作：

  1. getElementByName()函数不存在，它应该是getElementsByName()的（请注意Elements中的s）。

  2. 您应该遍历 getElementByName() 返回的节点列表，并将事件附加到每个节点：

    var fluids = document.getElementsByName("fluid");
for(var i=0;i<fluids.length;i++){
     fluids [i].addEventListener("change", radioChange);
     fluids [i].addEventListener("click", radioChange);
}

  3. 您必须在全局范围内定义变量，并在方法radioChange()用新值覆盖它们。

  4. 当你想比较时，你必须使用=== ==，而不是应该用于情感目的=。

希望这有帮助，请查看下面的工作示例。

var viscosity = document.getElementById("param3").innerHTML;
var fdensity = document.getElementById("param4").innerHTML;
// Attaching events HERE
var fluids = document.getElementsByName("fluid");
for(var i=0;i<fluids.length;i++){
  fluids[i].addEventListener("change", radioChange);
}
function radioChange (){
  var current_value = this.value;
  var param3 = document.getElementById("param3");
  var param4 = document.getElementById("param4");
  
  if (current_value == "Air"){
    param3.innerHTML = 50;
    param4.innerHTML = 100;
  };
  if (current_value == "Water"){
    param3.innerHTML = 60;   
    param4.innerHTML = 110;
  };
  if (current_value == "Oil"){
    param3.innerHTML = 70;
    param4.innerHTML = 120;
  };
  viscosity = param3.innerHTML;
  fdensity = param4.innerHTML;
};
<div class="radio">
  <p>
    <b>Fluid Type</b>
  </p>
  <form id="fluidForm">
    <p>
      <label>Air:   <input type="radio" name="fluid" value="Air"   /></label>
      <label>Water: <input type="radio" name="fluid" value="Water" /></label>
      <label>Oil:   <input type="radio" name="fluid" value="Oil"   /></label>
    </p>
  </form>
  <span>Fluid viscosity:</span>
  <span id="param3">4500</span>&nbsp;Pa s
  <br/>
  <span>Fluid density:</span>
  <span id="param4">4500</span>&nbsp;kg/m^3 <!-- SI -->
</div>

为什么

不尝试开关盒？开关（ 流体） { 案例空气： 参数3 = .. 参数4 = .. 破; 案例 N： 代码块 破; 违约： 默认代码块}

如果你不反对使用jQuery，这就是我的做法：

https://jsfiddle.net/danhaswings/n4hg901u/

我会给我的输入 ID，然后使用这个 jQuery：

$(document).ready(function() {
    function radioChange(id) {
        switch (id) {
            case 'air':
                alert('air');
                break;
            case 'water':
                alert('water');
                break;
            case 'oil':
                alert('oil');
                break;
            default:
                alert('undefined id');
                break;
        }
    };
    $radios = $('.radio input');
    $radios.on('change', function() {
        var $this = $(this);
        radioChange($this.prop('id'));
    });
});

这很容易在没有jQuery的情况下做到，正如人们上面已经说过的那样。我只是认为这对您使用jQuery查看它的外观很有用。

相关文章：