angularjs：マウス（x、y）の位置にマウス・ホバー・テキストが表示されない

マウス・ホバー・テキストのangle-jsにコードを記述しました。マウスポインタが置かれている位置に表示するには、ホバーテキストが必要です。
しかし、残念ながらそのことは起こっていません。ホバーテキストは特定の場所に固定されており、google-Chromeデベロッパーツールにエラーが表示されますUncaught TypeError: Cannot read property 'style' of null
idをdivタグに指定しても、idプロパティが検出されません。 - そのため、変数tooltipSpanは、私がかつてtooltipSpanを設定するためにあなたの例を変更したnullangularjs：マウス（x、y）の位置にマウス・ホバー・テキストが表示されない

でページの読み込みが完了する前に、

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> 
    <script> 
    var tooltipSpan = document.getElementById("demo"); 

    window.onmouseover = function (e) { 
    var x = e.clientX, 
     y = e.clientY; 
    tooltipSpan.style.top = (y + 20) + 'px'; 
    tooltipSpan.style.left = (x + 20) + 'px'; 
}; 
    </script> 

</head> 
<body ng-app=""> 

    <div id="demo" ng-init="tooltip=false" ng-show="tooltip" style="border: 1px solid black;width: 230px;height: 40px;background-color: gray;color: white;z-index: 1;position: fixed;">Hi..Welcome In Angular JS World.</div> 


    <table border=1> 
    <tr><th>col1</th><th>col2</th></tr> 
    <tr><td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 1</td> <td>data 2</td></tr> 
    <tr><td>data 1</td> <td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 2</td></tr> 
    </table> 

</body> 
</html>

出典

2016-05-25 aiman

htmlの前にvascriptをロードすると、document.getElementById("demo")はDOMがまだロードされていないのでnullになります。

javascriptを下に移動してみてください（bodyタグの後に貼り付けますが、これがベストプラクティスであるかどうかはわかりません）。この方法でDOMが最初にロードされ、次にjavascriptは "demo"のIDをどこで見つけるかを知っています。

出典

2016-05-25 13:54:34 sainid

ありがとう@sainid :) – aiman

問題がvar tooltipSpan = document.getElementById("demo");で実行されている。ここで

は、以下のコードがありますボディがロードされました

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> 
    <script> 



     var tooltipSpan; 

    function setTooltip() { 
     tooltipSpan = document.getElementById("demo"); 
    } 

    window.onmousemove = function (e) { 
     if (!tooltipSpan) return; 
    var x = e.clientX, 
     y = e.clientY; 
    tooltipSpan.style.top = (y + 20) + 'px'; 
    tooltipSpan.style.left = (x + 20) + 'px'; 
}; 
    </script> 

</head> 
<body ng-app="" onload='setTooltip()'> 

    <div id="demo" ng-init="tooltip=false" ng-show="tooltip" style="border: 1px solid black;width: 230px;height: 40px;background-color: gray;color: white;z-index: 1;position: fixed;">Hi..Welcome In Angular JS World.</div> 


    <table border=1> 
    <tr><th>col1</th><th>col2</th></tr> 
    <tr><td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 1</td> <td>data 2</td></tr> 
    <tr><td>data 1</td> <td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 2</td></tr> 
    </table> 

</body> 
</html>

出典

2016-05-25 13:53:36

ありがとうございます。あなたの提案によってエラーは消えましたが、ホバーテキストは依然として修正されたままです。 @ sainidが述べたように、私はボディータグの後に

angularjs：マウス（x、y）の位置にマウス・ホバー・テキストが表示されない

答えて

関連する問題