有人可以帮我用JavaScript中的按钮显示段落

-1

我正在尝试创建一个按钮，将段落从可见变为不可变和相反，但我无法让它工作。有人可以帮我用JavaScript中的按钮显示段落

p1 { 
 
\t 
 
\t display = none; 
 
\t 
 
\t } 
 

 

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

<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"; 
 
\t \t } 
 

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

对不起，在CSS中添加P1两次它实际上只是在原有的代码

来源

2017-08-09 demis

这里有些乱七八糟的引文。它应该是'onclick =“toggle_visibility（'p1'）”'。 – deceze

这里是一个工作jsFiddle为你： https://jsfiddle.net/dtqxabof/ –

你的语法不正确添加一次。

要访问的p1的id你需要使用一个哈希符号：

#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>

来源

2017-08-09 08:43:42 Stuart

我已经做了这些改变，但文本“你好”仍然出现在按钮上方，现在每当我按下按钮两次按钮和文字消失，永远不会回来 – demis

原来，这是一个愚蠢的错误，它现在的作品，现在感谢很多家伙 – demis

如果它帮助打勾答案... – Stuart

您的代码有几个问题。这里是工作的代码片段：

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; \t 
 
} 
 
\t 
 
#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>

看它通过和预告出现差异。

来源

2017-08-09 08:50:56

有人可以帮我用JavaScript中的按钮显示段落

回答

相关问题