Javascript show-element aus, klicken Sie auf

Ich versuche dies zu tun, ohne Jquery. Ich will zeigen, ein div, wenn Sie auf einen trigger. Bisher habe ich dies ausblenden element. 

 document.getElementById('element').style.display = 'none';

HTML..

<div class="element">Ahem, boo!!</div>
<a href="#" id="showDiv">Show</a>

Wie kann ich eine Funktion erstellen, um zu zeigen, das div bei Klick auf den link? Ich möchte vermeiden, mit Funktionen wie onclick="showDiv() im link selbst.

  • whydo Sie wollen vermeiden, mit dem onclick Ereignis? Ihre einzige andere Möglichkeit ist die <a href="javascript:showDiv()">, aber das ist auch nicht besser...
  • Wenn der link ist versteckt, wie kann man drauf klicken?
  • sorry, ich bearbeitet den code
  • Beachten Sie, dass das markup sieht stark wie du bist missbrauchen HTML-Anker für JavaScript-hooks, die Sie nicht tun sollten. Verwenden Sie eine <button> und Stil es Aussehen wie ein link, wenn Sie wollen, aber don ' T verwenden Sie einen HTML-Anker.
  • Ich nahm an, dass es wie jquery. Würden Sie nicht Zustimmen?
  • Ich bin mir nicht sicher, was Sie damit meine, Frage.
  • Junkie: Für den bearbeiteten code, meinst du id="element" oder nicht?
  • Ihr Kommentar ist sehr falsch. Es ist absolut eine alternative (mehr als einer) zum mischen von JavaScript in Ihre HTML-markup. Sollten Sie meiden der onclick - Attribut in HTML ist, zusammen mit allen anderen JavaScript-event-Handler in den HTML-Code.
  • Ich meine, mit HTML-Anker, wie <a> ist viel getan in Jquery. Ist es nicht ok mit reinem js?
  • Wenn Sie programmgesteuert generieren von HTML-Ankern und injizieren Sie in den DOM, es ist marginal akzeptabel. Es ist nicht OK wenn Ihr HTML-Code wird vom server gesendet, um den browser mit einer solchen semantisch falsche Anker. jQuery, allerdings ist hier irrelevant. Die Tatsache, dass viele Leute falsch verwenden, jQuery, Prototype und anderen JavaScript-Bibliotheken mit Ihrem HTML nicht machen es richtig.
  • Oooh ich sehen! Mit HTML-Ankern ist sehr effizient tho.. Hoffentlich js-Unterstützung wird diese unsachgemäße Codierung in die Zukunft.
  • wenn ich mein Kommentar wurde ich überlegt die onlick-Attribut über das HTML-oder Javascript-äquivalent zu einander. Die Tatsache ist, Ihre Lösung ist noch SCHLIMMER, als es gerade auf das HTML, da es macht es schwieriger zu Debuggen. In einem Fall habe ich überprüfen können, ein element in Firebug und finden Sie das onclick-Ereignis gibt es rechts. In der anderen, habe ich die Suche über javascript, die vielleicht wire es durch die ID, den class-Namen oder ein tag-name.
  • Es ist nicht syntaktisch nicht unterstützt. JavaScript unterstützt es in Ordnung (so wie es ist, mit der Anwendung klicken Sie auf Handler, um andere Elemente). Es ist einfach der falsche HTML-markup für die Aufgabe zur hand, da die Benutzung blockquote visuell Einzug Inhalten, die nicht ein Zitat ist falsch.

InformationsquelleAutor Cyber Junkie | 2010-12-05
  1. 5
    document.getElementById('showDiv').onclick=function(){
  //Remove any element-specific value, falling back to stylesheets
  document.getElementById('element').style.display='';
};
    InformationsquelleAutor Phrogz
  2. 2

    Es ist möglich, fügen Sie Ereignis-Handler, der vollständig in JavaScript. Beispiel:

    document.getElementById('showDiv').onclick = function() {
    //Do whatever now that the user has clicked the link.
};

    Umkehren der Wirkung der ersten code-Zeile, die Sie geschrieben, die Sie nutzen könnten:

    document.getElementById('element').style.display = 'block'; //or
document.getElementById('element').style.display = '';
    InformationsquelleAutor PleaseStand
  3. 0

    Fügen Sie diese dem Skript:

    function myFunction() {

            var btn = document.getElementById("myButton");
            //to make it fancier
            if (btn.value == "Click To Open") {
                btn.value = "Click To Close";
                btn.innerHTML = "Click To Close";
            }
            else {
                btn.value = "Click To Open";
                btn.innerHTML = "Click To Open";
            }
            //this is what you're looking for
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

    und Bearbeiten Sie die-Taste und div:

    <button onclick="myFunction()" id="myButton" value="Click To Open Instructions">Click To Open Instructions</button>

 <div style="display:none;" id="myDIV">
</div>
    InformationsquelleAutor Krisi Suci
Schreibe einen Kommentar