javascript - 使用单选按钮和 javascript style=none 隐藏和显示 html 元素

Question

我正在尝试使用 javascript 编写一个函数来显示或隐藏 html 元素(包含在 div 中)。现在我有 3 个单选按钮(最终根据选择的单选按钮显示/隐藏 3 个元素，但现在我只是想在选择年或周时隐藏一个元素(月)，如果选择月则显示它. 我的 html 是:

<div id="setting">
      <input type="radio" id="year" name="view" value="year"> year<br>
      <input type="radio" id="month" name="view" value="month"> month<br>
      <input type="radio" id="week" name="view" value="week"> week
    </div>
    <div id="cal">
    (element here I am trying to show/hide)
</div>

我的 javascript 是:

function defineSetting (){
              var setting = document.getElementById('setting').checked;
              if(setting =='year'){
                  document.getElementById("cal").style.display = "none";

              }else if(setting =='month'){
                  document.getElementById("cal").style.display = "unset";

              }else if(setting =='week'){
                  document.getElementById("cal").style.display = "none";
              }
            }

我对 javascript 也不是很有经验，我正在尝试弄清楚如何调用该函数(如果它有效)。如果它在文档就绪函数中，它将在加载页面时运行，还是我需要在某处调用它。

Answer 1

我认为这就是您想要的。您想要向按钮添加一个事件监听器，并将检查的输入值传递给隐藏/显示您的 #cal 元素的 defineSetting() 函数。我还在 defineSetting()

中简化了您的测试

<div id="setting">
  <input type="radio" id="year" name="view" value="year" class="setting"> year<br>
  <input type="radio" id="month" name="view" value="month" class="setting"> month<br>
  <input type="radio" id="week" name="view" value="week" class="setting"> week
</div>

<div id="cal">
  (element here I am trying to show/hide)
</div>

<style>
  .hidden { display: none; }
</style>

<script>
var inputs = document.getElementsByClassName('setting'),
    setting;

for (var i = 0; i < inputs.length; i++) {
  var el = inputs[i];
  el.addEventListener('change', function() {
    defineSetting(this.value);
  })
}

function defineSetting(setting) {
  if (setting == 'year' || setting == 'week') {
    document.getElementById("cal").classList.add('hidden');
  } else {
    document.getElementById("cal").classList.remove('hidden');
  }
}
</script>