web-dev-qa-db-fra.com

Comment effacer le HTML interne

Je bricole ça depuis un moment, mais ça ne marchera pas et je ne comprends pas pourquoi. S'il vous plaît aider. Voici ce que j'ai

<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>

Le survol fonctionne et affiche le texte dans le div, mais lorsque je déplace la souris hors de la balise h1, le texte reste là et je ne sais pas pourquoi, l'aide serait appréciée.

javascripthtmlinnerhtml
9
Moonkaman227

Le problème semble être que le symbole global clear est déjà utilisé et que votre fonction ne parvient pas à le remplacer. Si vous changez ce nom pour autre chose (j'ai utilisé blah), cela fonctionne très bien:

Live: Version utilisant clear qui échoue | Version utilisant blah qui fonctionne

<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>

Ceci est une excellente illustration du principe fondamental: Évitez les variables globales dans la mesure du possible. L'espace de noms global dans les navigateurs est incroyablement encombré, et lorsque des conflits se produisent, vous obtenez des bogues étranges comme celui-ci.

Un corollaire à cela est de ne pas utiliser les anciens attributs onxyz=... pour connecter des gestionnaires d’événements, car ils nécessitent des globales. Au lieu de cela, utilisez au moins du code pour raccorder des éléments: 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>

... et mieux encore, utilisez addEventListener de DOM2 (ou attachEvent sur IE8 et versions antérieures) afin de pouvoir avoir plusieurs gestionnaires pour un événement sur un élément.

14
T.J. Crowder

Les balises h1 ne reçoivent malheureusement pas les événements onmouseout.

L'extrait de code Javascript simple ci-dessous fonctionnera pour tous les éléments et utilisera un seul événement de souris.

Remarque: "Les bordures de l'extrait sont appliquées pour fournir une démarcation visuelle des éléments."

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>

Cela peut également être fait en CSS pur en ajoutant la propriété css du survol de la balise h1.

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

Plus rapide précédent

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