Question

我正在尝试创建一个按钮，将段落从可见变为不可见而相反，但我无法使其工作。

    <html>
    <head>
    </head>
    <body>
    
        <div id="p1">
        <p>Hello</p>
        <div>
   
    <script>
 function toggle_visibility(id){
  var p = document.getElementById(id)
   if(p1.style.display == "block")
   p1.style.display = "none";
   else
   p1.style.display = "block";
		}

    
    </script>
<button class="button button1"onclick="toggle_visibility"("p1")>Easy</button>
    </body>
     </html>

python

抱歉在css中添加p1两次，实际上只在原始代码中添加了一次

Answer 1

您的语法不正确。

要访问id p1，您需要使用哈希符号：

#p1 {
    display:none;
}

与按钮相同，要访问类，您将使用点：

.button {
    ...your styles
}

你的HTML也错了：

<button class="button button1"onclick="toggle_visibility"("p1")>Easy</button>

应该是：

<button class="button button1" onclick="toggle_visibility('p1')">Easy</button>

Answer 2

您的代码中存在多个问题。这是工作片段：

function toggle_visibility(id) {
  var p = document.getElementById(id)
  if(p.style.display == "block") {
    p.style.display = "none";
  } else {
    p.style.display = "block";
  }
}

#p1 {
  display: none;
}


button {
  position:absolute;
  background-color: #8C6D09;
  color: white;
  padding: 16px 32px;
  display:inline-block;
  margin:4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;	
}
	
#button1 {
  background-color:#8C6D09;
  color:#FFF;
  position:absolute;
}

<div id="p1">
  <p>Hello</p>
</div>

<button class="button button1" onclick="toggle_visibility('p1')">Easy</button>

仔细研究并发现差异。

有人可以用javascript显示段落中的按钮来帮助我

2 个答案: