javascriptのgetElementByIdで、htmlに書いたsvgのpolyline要素(id=""numberLine)のプロパティpointsの中身を書き換えたいのですが、以下のようなエラーが出ました。
Uncaught TypeError: Cannot set property 'points' of null
以下がコードの該当部位です。
javascript
1コード 2//javascript部分 3document.getElementById("numberLine").points = numberLinePoints; 4//タグのあるhtml部分 5<svg id="svg-id" width="210" height="300"> 6<polyline id="numberLine" points="" stroke="black" fill="none"/> 7</svg>
何がいけないのでしょうか?ご回答よろしくお願いします。
以下、全コードです。
javascript
1コード 2<head> 3<meta charset="utf-8"> 4<script type="text/javascript"> 5var numberLinePoints = "";// 6 7function createNumLine(left,Top,delta,num) { 8 for(i=0;i<=num;i++){ 9 numberLinePoints = numberLinePoints + (left + (delta)*i) + "," + Top + "\t" + (left + (delta)*i) + "," + (Top - delta/2) + "\t" + (left + (delta)*i) + "," + Top + "\n" 10 }; 11 console.log(numberLinePoints); 12} 13createNumLine(10,90,20,50); 14 15document.getElementById("numberLine").points = numberLinePoints; 16 17</script> 18</head> 19 20<svg width="210" height="300"> 21<polyline points=" 22 10 30 10 20 10 30 23 20 30 20 25 20 30 24 30 30 30 25 30 30 25 40 30 40 25 40 30 26 50 30 50 25 50 30 27 60 30 60 20 60 30 28 70 30 70 25 70 30 29 80 30 80 25 80 30 30 90 30 90 25 90 30 31100 30 100 25 100 30 32110 30 110 20 110 30 33120 30 120 25 120 30 34130 30 130 25 130 30 35140 30 140 25 140 30 36150 30 150 25 150 30 37160 30 160 20 160 30 38170 30 170 25 170 30 39180 30 180 25 180 30 40190 30 190 25 190 30 41200 30" stroke="black" fill="none"/> 42<text x= "5" y="15">0</text> 43<text x= "55" y="15">5</text> 44<text x="100" y="15">10</text> 45<text x="150" y="15">15</text> 46</svg> 47 48<svg id="svg-id" width="210" height="300"> 49<polyline id="numberLine" points="" stroke="black" fill="none"/> 50<text x= "5" y="15">0</text> 51<text x= "55" y="15">5</text> 52<text x="100" y="15">10</text> 53<text x="150" y="15">15</text> 54</svg>
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ベストアンサー
numberLine出現前に取得しようとしているのでnullになっています。
<script>~</script>を</body>直前においてください。投稿2018/11/06 00:57
総合スコア13749
0
フリーハンドで書くなら座標をアペンドしていってください
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var p=[ 4 [ 10,30],//初期値用 5 [ 10,30],[ 10,20],[ 10,30], 6 [ 20,30],[ 20,25],[ 20,30], 7 [ 30,30],[ 30,25],[ 30,30], 8 [ 40,30],[ 40,25],[ 40,30], 9 [ 50,30],[ 50,25],[ 50,30], 10 [ 60,30],[ 60,20],[ 60,30], 11 [ 70,30],[ 70,25],[ 70,30], 12 [ 80,30],[ 80,25],[ 80,30], 13 [ 90,30],[ 90,25],[ 90,30], 14 [100,30],[100,25],[100,30], 15 [110,30],[110,20],[110,30], 16 [120,30],[120,25],[120,30], 17 [130,30],[130,25],[130,30], 18 [140,30],[140,25],[140,30], 19 [150,30],[150,25],[150,30], 20 [160,30],[160,20],[160,30], 21 [170,30],[170,25],[170,30], 22 [180,30],[180,25],[180,30], 23 [190,30],[190,25],[190,30], 24 [200,30], 25 ]; 26 var point=document.querySelector("#svg-id").createSVGPoint(); 27 p.forEach(function(n){ 28 point.x = n[0]; 29 point.y = n[1]; 30 document.querySelector("#numberLine").points.appendItem(point); 31 }); 32}); 33 34</script> 35</head> 36 37<svg id="svg-id" width="210" height="300"> 38<polyline id="numberLine" x="0" y="0" stroke="black" fill="none" /> 39<text x= "5" y="15">0</text> 40<text x= "55" y="15">5</text> 41<text x="100" y="15">10</text> 42<text x="150" y="15">15</text> 43</svg>
まとめ
上記をまとめるとこんな感じ?
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var x=10,y=30; //初期座標 4 var range_width =10; //目盛幅 5 var small_scale = 5; //目盛高さ(小) 6 var big_scale =10; //目盛高さ(大) 7 var big_scale_at = 5; //大目盛頻度 8 var big_scale_from = 0; //大目盛開始位置 9 var count =20; //回数 10 var p=[]; 11 var offset=0; 12 p.push([x,y]); 13 for(var i=0;i<count;i++){ 14 offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale; 15 p.push([x,y]); 16 y-=offset_y; 17 p.push([x,y]); 18 y+=offset_y; 19 p.push([x,y]); 20 x+=range_width; 21 } 22 var point=document.querySelector("#svg-id").createSVGPoint(); 23 p.forEach(function(n){ 24 point.x = n[0]; 25 point.y = n[1]; 26 document.querySelector("#numberLine").points.appendItem(point); 27 }); 28}); 29</script> 30<svg id="svg-id" width="210" height="300"> 31<polyline id="numberLine" x="0" y="0" stroke="black" fill="none" /> 32<text x= "5" y="15">0</text> 33<text x= "55" y="15">5</text> 34<text x="100" y="15">10</text> 35<text x="150" y="15">15</text> 36</svg>
ついで
※文字数の関係で一部削除
任意に数値を指定する方法
やや複雑になってきていますが、ついてきていますか?
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#draw').addEventListener('click',function(e){ 4 var svg1 = document.querySelector("#svg1"); 5 var init_x = parseInt(document.querySelector('#x').value); 6 var init_y = parseInt(document.querySelector('#y').value); 7 var position_x = init_x; 8 var position_y = init_y; 9 var offset_x = parseInt(document.querySelector('#range_width').value); 10 var offset_y = 0; 11 var small_scale = parseInt(document.querySelector('#small_scale').value); 12 var big_scale = parseInt(document.querySelector('#big_scale').value); 13 var big_scale_at = parseInt(document.querySelector('#big_scale_at').value); 14 var big_scale_from = parseInt(document.querySelector('#big_scale_from').value); 15 var count = parseInt(document.querySelector('#count').value); 16 var start_num = parseInt(document.querySelector('#start_num').value); 17 var add_num = parseInt(document.querySelector('#add_num').value); 18 19 /* 初期化 */ 20 [].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);}); 21 22 var p=[]; 23 p.push([position_x,position_y]); 24 for(var i=0;i<count;i++){ 25 offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale; 26 p.push([position_x,position_y]); 27 position_y-=offset_y 28 p.push([position_x,position_y]); 29 position_y+=offset_y 30 p.push([position_x,position_y]); 31 position_x+=offset_x; 32 } 33 var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline'); 34 pl.setAttribute("id","numberLine"); 35 pl.setAttribute("stroke","black"); 36 pl.setAttribute("fill","none"); 37 svg1.appendChild(pl); 38 39 var point=svg1.createSVGPoint(); 40 p.forEach(function(n){ 41 point.x = n[0]; 42 point.y = n[1]; 43 document.querySelector("#numberLine").points.appendItem(point); 44 }); 45 var texts=[]; 46 var adjust_num_y = 2; 47 var num=start_num; 48 for(var i=big_scale_from;i<count;i+=big_scale_at){ 49 var adjust_num_x = num.toString().length*5; 50 texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]); 51 num+=big_scale_at*add_num; 52 } 53 texts.forEach(function(x){ 54 var t= document.createElementNS('http://www.w3.org/2000/svg', 'text'); 55 t.setAttribute("id","text"); 56 t.textContent=x[0]; 57 t.setAttribute("x",x[1]); 58 t.setAttribute("y",x[2]); 59 svg1.appendChild(t); 60 }); 61 }); 62}); 63 64</script> 65 66<div id="input"> 67数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br> 68目盛り幅:<input type="text" id="range_width" value="30" size="2"><br> 69目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br> 70大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br> 71回数:<input type="text" id="count" value="20" size="2"><br> 72数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br> 73<input type="button" id="draw" value="draw"><hr> 74</div> 75<svg id="svg1" width=800 height=300></svg>
初期表示&入力するたびに数直線が変化
javascript
1<script> 2[NodeList,HTMLCollection].forEach(function(x){ 3 x.prototype.addEventListener=function(eventStr,callback){ 4 [].forEach.call(this,function(x){ 5 x.addEventListener(eventStr,callback); 6 }); 7 }; 8}); 9HTMLElement.prototype.trigger=function(eventStr){ 10 if (document.createEvent) { 11 var e = document.createEvent("HTMLEvents"); 12 e.initEvent(eventStr, true, true ); 13 return this.dispatchEvent(e); 14 } else { 15 var e = document.createEventObject(); 16 return this.fireEvent("on"+eventStr, e); 17 } 18}; 19window.addEventListener('DOMContentLoaded', function(e){ 20 document.querySelectorAll('#input input').addEventListener('change',function(){ 21 var svg1 = document.querySelector("#svg1"); 22 var init_x = parseInt(document.querySelector('#x').value); 23 var init_y = parseInt(document.querySelector('#y').value); 24 var position_x = init_x; 25 var position_y = init_y; 26 var offset_x = parseInt(document.querySelector('#range_width').value); 27 var offset_y = 0; 28 var small_scale = parseInt(document.querySelector('#small_scale').value); 29 var big_scale = parseInt(document.querySelector('#big_scale').value); 30 var big_scale_at = parseInt(document.querySelector('#big_scale_at').value); 31 var big_scale_from = parseInt(document.querySelector('#big_scale_from').value); 32 var count = parseInt(document.querySelector('#count').value); 33 var start_num = parseInt(document.querySelector('#start_num').value); 34 var add_num = parseInt(document.querySelector('#add_num').value); 35 36 /* 初期化 */ 37 [].forEach.call(svg1.querySelectorAll("*"),function(x){x.parentNode.removeChild(x);}); 38 39 var p=[]; 40 p.push([position_x,position_y]); 41 for(var i=0;i<count;i++){ 42 offset_y=(i-big_scale_from)%big_scale_at?small_scale:big_scale; 43 p.push([position_x,position_y]); 44 position_y-=offset_y; 45 p.push([position_x,position_y]); 46 position_y+=offset_y; 47 p.push([position_x,position_y]); 48 position_x+=offset_x; 49 } 50 var pl= document.createElementNS('http://www.w3.org/2000/svg', 'polyline'); 51 pl.setAttribute("id","numberLine"); 52 pl.setAttribute("stroke","black"); 53 pl.setAttribute("fill","none"); 54 svg1.appendChild(pl); 55 56 var point=svg1.createSVGPoint(); 57 p.forEach(function(n){ 58 point.x = n[0]; 59 point.y = n[1]; 60 document.querySelector("#numberLine").points.appendItem(point); 61 }); 62 var texts=[]; 63 var adjust_num_y = 2; 64 var num=start_num; 65 for(var i=big_scale_from;i<count;i+=big_scale_at){ 66 var adjust_num_x = num.toString().length*5; 67 texts.push([num,init_x+offset_x*i-adjust_num_x,init_y-big_scale-adjust_num_y]); 68 num+=big_scale_at*add_num; 69 } 70 texts.forEach(function(x){ 71 var t= document.createElementNS('http://www.w3.org/2000/svg', 'text'); 72 t.setAttribute("id","text"); 73 t.textContent=x[0]; 74 t.setAttribute("x",x[1]); 75 t.setAttribute("y",x[2]); 76 svg1.appendChild(t); 77 }); 78 }); 79 document.querySelector('#input input').trigger('change'); 80}); 81</script> 82 83<div id="input"> 84数直線の位置 X:<input type="text" id="x" value="150" size="2"> Y:<input type="text" id="y" value="150" size="2"><br> 85目盛り幅:<input type="text" id="range_width" value="30" size="2"><br> 86目盛り高さ 小:<input type="text" id="small_scale" value="5" size="2"> 大:<input type="text" id="big_scale" value="10" size="2"><br> 87大目盛り 頻度:<input type="text" id="big_scale_at" value="5" size="2"> 開始位置:<input type="text" id="big_scale_from" value="0" size="2"><br> 88回数:<input type="text" id="count" value="20" size="2"><br> 89数値 開始:<input type="text" id="start_num" value="0" size="2"> 増加:<input type="text" id="add_num" value="1" size="2"><br> 90</div> 91<svg id="svg1" width=800 height=300></svg>
投稿2018/11/06 00:50
編集2018/11/12 04:13総合スコア114843
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/08 20:39 編集
2018/11/08 16:39
2018/11/09 17:16 編集
2018/11/09 01:59
2018/11/09 17:07
2018/11/09 17:21
2018/11/12 04:15 編集
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/06 04:03
2018/11/06 04:12
2018/11/06 04:16
2018/11/06 04:19
2018/11/06 04:22
2018/11/06 04:25
2018/11/06 04:32
2018/11/06 04:41 編集
2018/11/06 04:47
2018/11/06 05:54
2018/11/08 15:39