javascriptを使用してボタンをクリックすると、最初は非表示になっているdivを表示する方法

Question

ボタンをクリックした後も隠れたdivが連続して表示されます。

これは私のjsのコードです：

document.getElementById("share").onclick=function show(){ 
    document.getElementById("taskdiv2").style.visibility='visible'; 
}; 

これは私のhtmlコードです：

<a id="share" onclick="show()" type="button" class="btn btn-lg btn-default" href="">Share</a> 

<div id="taskdiv2" style="visibility:hidden" class="row"> 
    hiiiii !this is vivek. 
</div> 

Answer 1

function becomevisible() { 
 
    document.getElementById("div").style.opacity="1"; 
 
    }

div { 
 
    background:red; 
 
    height: 100px; 
 
    width: 100px; 
 
    opacity: 0; 
 
    }

<div id="div">Test</div> 
 
<button onclick="becomevisible()">See the div!</button>

Answer 2

• inlineonclick属性aを削除しますあなたはイベントを登録しましたJavaScript
• を追加すると、デフォルト動作として<a>要素がナビゲートされます。

document.getElementById("share").onclick = function(e) { 
 
    e.preventDefault(); 
 
    document.getElementById("taskdiv2").style.visibility = 'visible'; 
 
};

<a id="share" type="button" class="btn btn-lg btn-default" href="">Share</a> 
 

 
<div id="taskdiv2" style="visibility:hidden" class="row"> 
 
    hiiiii !this is vivek. 
 
</div>

---

あなたは、視認性のtoggleを期待している場合は、

使用Element.classList.toggle

document.getElementById("share").onclick = function show() { 
 
    document.getElementById("taskdiv2").classList.toggle('show'); 
 
};

.show { 
 
    visibility: hidden; 
 
}

<div id="taskdiv2">Content Goes Here!!!</div> 
 
<button id="share">Toggle</button>

Answer 3

あなたはアンカータグを使用しているので、それはあなたがデフォルトを防ぐ場合を除き、リンクに移動しようとします。また、ボタンにあなたのHTMLアンカーを変更

document.getElementById("share").onclick=function show(event){ 
    event.preventDefault(); 
    document.getElementById("taskdiv2").style.visibility='visible'; 
}; 

もで、トリックを行います変更上記その場合は必要ありません。

<button id="share" onclick="show()" type="button" class="btn btn-lg btn-default" href="">Share</button> 

それはレーヨンことによって、上記の回答で述べたように、あなたがコーディングのより良い標準のために行くされている場合は、この使用して授業を行うことをお勧めします。あなたの要件に基づいて、私はあなたの要素にトグルではなくクラスを追加するだけです。

Answer 4

try this one out : 

document.getElementById("share").onclick = function show() { 
    document.getElementById("taskdiv2").classList.toggle('show'); 
}; 
.show { 
    visibility: hidden; 
} 
<div id="taskdiv2">Content Goes Here!!!</div> 
<button id="share">Toggle</button>