Question

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

当我点击<div id="prods">部分中的按钮并显示<form>

时，我想隐藏<div id = "inp">

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

但是当我点击按钮时，没有真正发生的事情

Answer 1

现在，您调用apiVersion: v1 kind: Service metadata: annotations: service.beta.kubernetes.io/azure-load-balancer-internal: "true" name: nginx-ingress-svc spec: type: LoadBalancer ports: - port: 443 targetPort: 443 loadBalancerIP: 130.10.1.9 selector: k8s-app: nginx-ingress-controller函数的方式，参数disp和prods被假定为常量或变量，但是，这些不是您需要的字符串在inp中使用，因此您的控制台会出现错误。你的意思是通过用引号括起来将这些参数作为字符串提供：

getElementById()

Answer 2

disp(prods,inp)

您在这里传递变量。

由于IE4的遗留问题，{p> 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

您的代码中的一切正常只需在您传递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>

Answer 4

如果你已经在使用jQuery。

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

hide（none）div并显示（阻止）另一个

4 个答案: