隐藏 (none) div 并显示（阻止）另一个

Question

学习HTML，我有这段代码。开头 <div id = "inp"> 被隐藏（由于 class, CSS 文件）

我想在单击 <form> 部分中的按钮时隐藏 <div id="prods"> 并显示 <div id = "inp">

function disp(prod, inp) {
  var x = document.getElementById(prod);
  var y = document.getElementById(inp);
  x.style.display = "none";
  y.style.display = "block";
}

.hidden {
  display: none;
}

<div id="prods">
  <form>
    <button type="button" onclick="disp(prods,inp)">   
          Next page</button>
  </form>
</div>
<div id="inp" class="hidden">
  <form>
  </form>
</div>

但是当我点击按钮时什么也没有发生

Answer 1

现在，您调用 disp 函数的方式，参数 prods 和 inp 被假定为常量或变量，但是，这些不是字符串需要在 getElementById() 中使用，因此您将在控制台中收到错误消息。您的意思是通过用引号将这些参数作为字符串提供：

<button type = "button" onclick = "disp('prods','inp')">

Answer 2

disp(prods,inp)

您在此处传递变量。

由于 IE4 的遗留问题，

prods 和 inp 是 global variables representing the elements with matching IDs.

var x = document.getElementById(prod);

在这里，您尝试使用那些元素对象，就好像存在包含 ID 的字符串一样。它们被转换为字符串 ("[Object object]")，然后通过 ID 查找元素……但是您没有带有 id="[Object object]" 的元素，所以您得到 null.

x.style.display 然后会抛出错误，因为您无法读取 null.

的属性

首先传递字符串：

disp('prods','inp')

Answer 3

如果您已经在使用 jQuery。

$('#prods').addClass('hidden'); // to hide it
$('#prods').removeClass('hidden'); // to show it again

Answer 4

代码中一切正常，只需在传递的参数中添加引号 div id

        <style>
            .hidden{
           display: none;
        }   
        </style>
        <div id = "prods">
              <form>
                 <button type = "button" onclick = "disp('prods','inp')">           
                 Next page</button>
            </form>
        </div>
        <div id = "inp" class = "hidden">
            <div>INP Div</div>
            <form>
            </form>
        </div>


        <script>
        function disp(prod,inp){
            var x = document.getElementById(prod);
            var y = document.getElementById(inp);
            x.style.display = "none";
            y.style.display = "block";
        }
        </script>

隐藏 (none) div 并显示（阻止）另一个

hide (none) div and display (block) another

html

javascript

display