Question

我的表单包含两个数字输入（betsHome和betsAway）和两个无线电输入（widgetHome和wigetAway）。默认情况下，无线电输入是隐藏的。我希望它们在两个数字输入具有相同值时可见，仅使用JavaScript。

这是我目前的剧本：

betHome.addEventListener('input', function (ev) {
    hideOrShowWidget(ev, betAway, widgetHome, widgetAway)
});
betAway.addEventListener('input', function (ev) {
    hideOrShowWidget(ev, betHome, widgetHome, widgetAway)
});

function hideOrShowWidget(event, other, widgetHome, widgetAway) {
if (event.value === other.value) {
    widgetHome.style.visibility = 'visible';
    widgetAway.style.visibility = 'visible';
} else {
    widgetHome.style.visibility = 'hidden';
    widgetAway.style.visibility = 'hidden';
}

但不知何故它不起作用：控制台不断发送此警报 TypeError：undefined不是对象（评估'other.value'）

你能帮我解决问题所在吗？

Answer 1

您可以简单地选择每个输入框中包含的值，然后检查它们是否相等。如果是这样，您可以将适当的CSS属性应用于单选框。

以下是代码：

betHome.addEventListener('input', function() {
  hideOrShowWidget();
});
betAway.addEventListener('input', function() {
  hideOrShowWidget();
});

function hideOrShowWidget() {

  let input1 = document.querySelector('#betHome').value
  let input2 = document.querySelector('#betAway').value

  if (input1 === input2) {
    radio1.style.visibility = 'visible';
    radio2.style.visibility = 'visible';
  } else {
    radio1.style.visibility = 'hidden';
    radio2.style.visibility = 'hidden';
  }
}

#radio1, #radio2 {
  visibility: hidden;
}

<div>BetHome</div>
<input type="text" id="betHome">
<input type="radio" id="radio2"> 


<br />
<div>BetAway</div>
<input type="text" id="betAway">
<input type="radio" id="radio1">

如何根据其他输入值显示和隐藏输入 - 没有JQuery

1 个答案: