Wie lösche ich die innere HTML

Ich habe schon hantieren mit diesem für eine Weile, aber es funktioniert nicht und ich kann nicht herausfinden, warum. Bitte helfen Sie. Hier ist, was ich habe:

<html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
    function go(what) {
        document.getElementById("goy").innerHTML = what;
    }
    function clear() {
        document.getElementById("goy").innerHTML = "";
    }
    </script>
</body>
</html>

Das mouseover funktioniert und zeigt den text in das div, aber wenn ich mich bewege die Maus aus dem h1-tag, der text bleibt drin und ich weiß nicht, warum, würde Hilfe geschätzt werden.

InformationsquelleAutor Moonkaman227 | 2014-03-23
  1. 18

    Das problem scheint zu sein, dass die globalen symbol clear ist bereits im Einsatz und Ihre Funktion nicht gelingt, überschreiben Sie es. Wenn Sie ändern Sie diesen Namen, um etwas anderes (ich habe blah), funktioniert es Prima:

    Live: Version mit clear, welche fehlschlägt | Version mit bla, die funktioniert

    <html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 onmouseover="go('The dog is in its shed')" onmouseout="blah()">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
    function go(what) {
        document.getElementById("goy").innerHTML = what;
    }
    function blah() {
        document.getElementById("goy").innerHTML = "";
    }
    </script>
</body>
</html>

    Dies ist eine großartige Darstellung des Grundprinzip: Vermeiden Sie Globale Variablen, wo immer möglich. Der Globale namespace in Browsern ist unglaublich überfüllt, und wenn Konflikte auftreten, erhalten Sie seltsame Fehler wie diese.

    Eine Folge, die ist nicht für die Verwendung der alten Stil onxyz=... Attribute, um hook up event-Handler, weil Sie erfordern, globals. Stattdessen, zumindest das code verwenden, um Haken, die Dinge bis: Live-Kopie

    <html>
<head>
    <title>lala</title>
</head>
<body>
    <h1 id="the-header">lalala</h1>
    <div id="goy"></div>
    <script type="text/javascript">
      //Scoping function makes the declarations within
      //it *not* globals
      (function(){
        var header = document.getElementById("the-header");
        header.onmouseover = function() {
          go('The dog is in its shed');
        };
        header.onmouseout = clear;

        function go(what) {
          document.getElementById("goy").innerHTML = what;
        }
        function clear() {
          document.getElementById("goy").innerHTML = "";
        }
      })();
    </script>
</body>
</html>

    ...und noch besser, verwenden Sie DOM2 ist addEventListener (oder attachEvent auf IE8 und früher), so können Sie mehrere Handler für ein Ereignis auf ein element.

    • Danke so viel, ich war immer so frustriert. Dies funktioniert nun perfekt. Auch vielen Dank für die schnelle Antwort.
    InformationsquelleAutor T.J. Crowder
  2. 0
    const destroy = container => {
  document.getElementById(container).innerHTML = '';
};

    Schneller vorherigen

    const destroyFast = container => {
  const el = document.getElementById(container);
  while (el.firstChild) el.removeChild(el.firstChild);
};
    InformationsquelleAutor Musa
  3. 0

    Den h1-tags leider nicht erhalten, die onmouseout-events.

    Einfachen Javascript-snippet unten, wird die Arbeit für alle Elemente und verwendet nur 1 Maus-Ereignis.

    Hinweis: "Die Grenzen im snippet angewendet werden, um eine visuelle Abgrenzung der Elemente."

    JS:

    document.body.onmousemove = function(){ move("The dog is in its shed"); };

document.body.style.border = "2px solid red";
document.getElementById("h1Tag").style.border = "2px solid blue";

function move(what) {
    if(event.target.id == "h1Tag"){ document.getElementById("goy").innerHTML = "what"; } else { document.getElementById("goy").innerHTML = ""; }
}

    HTML:

    <h1 id="h1Tag">lalala</h1>
<div id="goy"></div>

    Dies kann auch durchgeführt werden in reinem CSS, indem die hover-Selektor css-Eigenschaft, um das h1-tag.

    InformationsquelleAutor Animan
  4. -3

    Werfen Sie einen Blick auf diese. eine saubere und einfache Lösung mit jQuery.

    http://jsfiddle.net/ma2Yd/

        <h1 onmouseover="go('The dog is in its shed')" onmouseout="clear()">lalala</h1>
    <div id="goy"></div>


    <script type="text/javascript">

    $(function() {
       $("h1").on('mouseover', function() {
          $("#goy").text('The dog is in its shed');
       }).on('mouseout', function() {
          $("#goy").text("");
       });
   });
    • sauber und einfach mit Hilfe von jQuery, aber immer noch mithilfe von inline-js 😛
    • Ich sehe nicht ein jQuery tag überall. Aus der javascript tag Beschreibung: "es sei denn, ein tag für ein framework/Bibliothek ist auch vorhanden und eine Reine JavaScript-Antwort erwartet wird."
    InformationsquelleAutor thetrompf
Schreibe einen Kommentar