web-dev-qa-db-ja.com

内部HTMLをクリアするにはどうすればよいですか

私はしばらくこれをいじっていましたが、それは機能せず、理由がわかりません。助けてください。ここに私が持っているものがあります：

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

マウスオーバーは機能し、div内のテキストを表示しますが、マウスをh1タグの外に移動すると、テキストはそこに留まり、理由がわかりません。

javascripthtmlinnerhtml
16
Moonkaman227

問題は、グローバルシンボルclearが既に使用されており、関数がそれをオーバーライドできないことです。その名前を別の名前に変更した場合（blahを使用しました）、うまく機能します

ライブ： 失敗したclearを使用したバージョン | 動作するblahを使用するバージョン

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

これは、基本原則の優れた例です。可能な限りグローバル変数を使用しないでください。ブラウザのグローバル名前空間は信じられないほど混雑しており、競合が発生すると、このような奇妙なバグが発生します。

その結果、古いスタイルのonxyz=...属性を使用してイベントハンドラーをフックしないのが、グローバルを必要とするためです。代わりに、少なくともコードを使用して接続します。 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>

...さらには、DOM2のaddEventListener（またはIE8以前ではattachEvent）を使用して、要素のイベントに複数のハンドラーを持たせることができます。

20
T.J. Crowder

残念ながら、h1タグはonmouseoutイベントを受け取りません。

以下の簡単なJavascriptスニペットは、すべての要素で機能し、1つのマウスイベントのみを使用します。

注：「スニペットの境界線は、要素を視覚的に区別するために適用されます。」

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>

これは、h1タグにホバーセレクターのcssプロパティを追加することにより、純粋なCSSでも実行できます。

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

前へ

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