wake-up-neo.com

Wie lösche ich inneres HTML?

Ich habe schon eine Weile damit herumgepfuscht, aber es funktioniert nicht und ich kann nicht verstehen, warum. Bitte helfen Folgendes habe ich:

<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 im div an, aber wenn ich die Maus aus dem Tag h1 verschiebe, bleibt der Text dort und ich weiß nicht, warum, Hilfe wäre willkommen.

9
Moonkaman227

Das Problem scheint zu sein, dass das globale Symbol clear bereits verwendet wird und Ihre Funktion es nicht schafft, es zu überschreiben. Wenn Sie diesen Namen in etwas anderes ändern (ich habe blah verwendet), funktioniert es gut:

Live: Version mit clear was fehlschlägt | Version mit blah welche 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 ein hervorragendes Beispiel für das grundlegende Prinzip: Vermeiden Sie, wo immer möglich, globale Variablen. Der globale Namespace in Browsern ist unglaublich überfüllt, und wenn Konflikte auftreten, werden seltsame Fehler wie diese angezeigt.

Eine Folge davon ist, dass Sie keine onxyz=...-Attribute im alten Stil verwenden, um Event-Handler anzuschließen, da sie globale Werte benötigen. Verwenden Sie stattdessen mindestens Code, um die Dinge miteinander zu verbinden: Live Copy

<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 DOM2s addEventListener (oder attachEvent bei IE8 und früheren Versionen), damit Sie für ein Ereignis mehrere Handler für ein Element haben können.

14
T.J. Crowder

Die h1-Tags erhalten leider keine Onmouseout-Ereignisse.

Das einfache Javascript-Snippet unten funktioniert für alle Elemente und verwendet nur ein Mausereignis.

Hinweis: "Die Ränder im Snippet werden angewendet, um eine visuelle Abgrenzung der Elemente zu ermöglichen."

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 = ""; }
}
<h1 id="h1Tag">lalala</h1>
<div id="goy"></div>

Dies kann auch in reinem CSS erfolgen, indem die hover-Selector-Eigenschaft css zum Tag h1 hinzugefügt wird.

0
Animan
const destroy = container => {
  document.getElementById(container).innerHTML = '';
};

Schneller früher

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