Q&A
本当にありがとうございます！
参考になりましｔ！
こんにちは、初心者です。
D3.jｓでグラフを作っていますが。
SVGタグのIDAttibuteのvalueを獲得するためにjqeuryのselector利用すると
なぜか<head>タグのなかでするとundifinedが変換されています。
でも<body>でするとできます。
その理由は何ですか？そして<head>でしたかったらどうすればいいでしょうか？
ご意見待っています。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script> <script src="liquidFillGauge.js" language="JavaScript"></script> <script src="https://code.jquery.com/jquery-latest.js" language="JavaScript"></script> <style> .liquidFillGaugeText { font-family: Helvetica; font-weight: bold; } </style> <script language="JavaScript"></head> <body> <!-- svg = xml형식으로 그래픽을 지원, 이미지 포맷(jpg,gif등)을 대신 이용할때 사용됨. -->var tagId2 = $('svg').attr('id'); alert(tagId2); //できない var config = liquidFillGaugeDefaultSettings() config.circleColor = "#FF7777"; config.textColor = "#FF4848"; config.waveTextColor = "#FF0000"; config.waveColor = "#FFDDDD"; config.circleThickness = 0.2; config.textVertPosition = 0.2; config.waveAnimateTime = 1000; function NewValue(){ if(Math.random() > .5){ return Math.round(Math.random()*100); } else { return (Math.random()*100).toFixed(1); } } </script>
<svg id="fillgauge" width="50%" height="250" onclick="gauge.update(NewValue());"></svg>
<script> var tagId = $('svg').attr('id'); alert(tagId); //できる var gauge = loadLiquidFillGauge("fillgauge", 25, config); </script> </body> </html>
回答2件
0
ベストアンサー
HTMLは上から下に解釈されるので、<head>の時点ではまだ下のSVGタグを読み込んでいないので、うまく動きません。
<head>に書く場合は、HTMLの読み込みが終わってから実行するように、jQuery(function(){...})で囲んで実行しましょう。
投稿2016/05/05 08:13
総合スコア145183
0
<script language="JavaScript"> $(function(){ ・・ここに書く }); </script>
おまじないだと思って $(function(){ });の中に書いてください。
このコードが読み込まれた時にまだページの読み込みが完了していないタイミングで実行しても、DOMが存在していない場合がありますね。ページの読み込みを待ってから、コードを実行する動きに変化します。
投稿2016/05/05 08:13
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/05/05 08:15
2016/05/05 08:17
退会済みユーザー
2016/05/05 11:55