有人可以幫我用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中的按鈕顯示段落

回答

相關問題