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();。

Answer 2

另一种选择是：
$('#yourDivID').toggle();
如果要在show和hidden之间切换。

Answer 3

尝试一下，希望这对您有用

var element=document.getElementById('target');
element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

在JQuery中，以下代码将对您有用。

$('#youDivID').hide();
$('#youDivID').show();

$('.youDivClassName').hide();
$('.youDivClassName').show();

Answer 4

感谢所有贡献者，最后，我能够在开发工具的帮助下解决代码中的可见性问题，通过开发工具，我看到有问题的div对（1）负责。 strong> .display =“ none” ，以及（2）单击该按钮后的 .visibility =“ visible” ，这样。显示属性优先于.visibility。

我能够通过选择其中一个道具来纠正这个问题。请参阅下面的我的JS代码：

hiddenArea.style.visibility = "hidden";



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


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

如何使隐藏的div出现在Javascript中的按钮单击上

4 个答案: