javascript - 如何在 Javascript 中单击按钮时显示隐藏的 div

Question

我是 JavaScript 的新手，我试图在单击按钮后显示一个 div，我已经尝试过了，但我似乎没有做对。下面是我的 JS 代码:

let hiddenArea = document.getElementById('hidden-div');


submitButton.addEventListener('click', function() {
    if(document.getElementById('r1').checked) {
        hiddenArea.style.display = "block";
        arena.style.display='none';
        actionArea.style.display ='none';

    }
    else{
        arena.style.visibility='visible';
        actionArea.style.visibility ='visible';   
        hiddenArea.style.display = "none";
    }
});

这是我的 HTML 代码:

<p>Do you want to lock? </p>
    <form>
        <input id="r1" type="radio" name="question" value="yes" checked> Yes<br>
        <input id="r2" type="radio" name="question" value="no"> No<br>
        <input id="btn" type="submit" value="Submit">
    </form><br><br>
</div>
<div id ="hidden-div"></div>

Answer 1

let hiddenArea = document.getElementById('hidden-div');
let submitButton = document.getElementById('btn');

submitButton.addEventListener('click', function(e) {
e.preventDefault();
    if(document.getElementById('r1').checked) {
        hiddenArea.style.display = "block";
     //   arena.style.display='none';
      //  actionArea.style.display ='none';

    }
    else{
     //   arena.style.visibility='visible';
    //    actionArea.style.visibility ='visible';   
        hiddenArea.style.display = "none";
    }
});

enter code here 


<p>Do you want to lock? </p>
          <form>
            <input id="r1" type="radio" name="question" value="yes" checked> Yes<br>
            <input id="r2" type="radio" name="question" value="no"> No<br>
            <input id="btn" type="submit" value="Submit">
          </form><br><br>

      </div>
      <div id ="hidden-div">Hidden</div>

您应该关闭按钮的默认行为 e.preventDefault();。