wie man ein div sichtbar macht, das zuerst durch Klicken auf den Knopf mit Javascript versteckt ist

Question

Ich möchte, dass mein verstecktes div wird kontinuierlich sichtbar nach dem Klicken auf die Schaltfläche.

Das ist mein js Code:

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

Das ist mein HTML-Code ist:

<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

• entfernen inlineonclick Attribut ein s Sie haben das Ereignis mit JavaScript
• registriert Fügen Sie event.preventDefault() als Standardverhalten von <a> Elemente ist zu navigieren.

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>

---

Wenn Sie toggle der Sichtbarkeit erwarten,

Verwenden 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

Sie haben einen Anker-Tag verwendet, so dass es zu einem Link zu gehen versucht, es sei denn, Sie Standard verhindern:

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

Alternativ Ihren HTML-Ankers auf eine Schaltfläche Ändern wird auch den Trick, in die oben genannten Fall Änderung ist nicht erforderlich:

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

Es empfiehlt sich dies mit Klassen zu tun, wie in oben Antwort von Rayon erwähnt, wenn Sie für eine bessere Standard der Codierung werden. Obwohl ich basierend auf Ihrer Anforderung die Klasse zu Ihrem Element hinzufügen würde, anstatt sie umzuschalten.

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>