Question

我是编码的新手，我正在尝试使用HTML5＆amp;使用JavaScript创建用户输入的教育模拟。

为了限制输入到合理的值，我想使用3个单选按钮来选择Air，Water＆amp;油

这些中的每一个都需要与粘度值和粘度值相关联。密度值，稍后在模拟中使用。到目前为止，我才看到如何使用＆＃34;值＆＃34;单选按钮的属性作为其输出，但看到我需要两个输出绑定到每个按钮我怎么能实现这一点（输出被发送到两个跨度，其内部HTML由<TextBlock TextAlignment="Right"> <Run Text="{Binding FirstProp}" Foreground="Green"/> / <Run Text="{Binding SecondProp}" Foreground="Red"/> </TextBlock>稍后在脚本中获取。

getElementById().innerHTML

这似乎不起作用，而且在我看来（总是新手）无论如何都是一种直截了当的事情。

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

提前感谢任何帮助！

Answer 1

您的代码将在一些更改后生效：

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

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

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

您必须在全局范围内定义变量，并使用新值在radioChange()方法中覆盖它们。
当您想要比较==时，您必须使用===，而不是=应该用于做作目的。

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

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>

Answer 2

为什么你不尝试开关盒？开关（流体）{ 案例空气： param3 = .. param4 = .. 打破; 案例n：代码块打破; 默认：默认代码块 }

Answer 3

如果你不反对使用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看起来很有用。

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

3 个答案: