前提・実現したいこと
javascriptで乱数Pk(xk,yk)*3点(k=0~2)を発生させ三角形とし、
ベクトル計算から重心を求めるものを想定しています。(拡張して三角形のその他5心も求めるものも別途書きました。そちらについては、今後再質問させていただくかもしれません。)
プログラムはできているのですが、素人目にも増長になりすぎて、短縮している過程ですが、
うまい方法が思いつきません。
具体的には該当ソースコードの以下の部分の省略に手間取っております。
var x0=parseFloat(document.getElementById('x0').value);
var x1=parseFloat(document.getElementById('x1').value);
var x2=parseFloat(document.getElementById('x2').value);
var y0=parseFloat(document.getElementById('y0').value);
var y1=parseFloat(document.getElementById('y1').value);
var y2=parseFloat(document.getElementById('y2').value);
この部分を短くfor文を使って回したいです。
発生している問題・エラーメッセージ
該当のソースコード
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<style></style> 6</head> 7<body> 8 9<script> 10 function atk(){ 11 12var fm = document.getElementById('fm'); 13fm.innerHTML=""; 14 15var arr=[]; 16 17for(k = 0; k < 3; k++){ 18 var inputX = document.createElement('input'); 19 inputX.type = 'number'; 20 inputX.size = 10; 21 inputX.id = `x${k}`; 22 inputX.placeholder = `x${k}`; 23 24 var inputY = document.createElement('input'); 25 inputY.type = 'number'; 26 inputY.size = 10; 27 inputY.id = `y${k}`; 28 inputY.placeholder = `y${k}`; 29 inputY.value = `y${k}`; 30 31 var br = document.createElement('br'); 32 33 var before = document.createTextNode(`p${k}(`); 34 var comma = document.createTextNode(','); 35 var after = document.createTextNode(')'); 36 37 fm.append(before); 38 fm.append(inputX); 39 fm.append(comma); 40 fm.append(inputY); 41 fm.append(after); 42 fm.append(br); 43 44 var p=(Math.random()*1000); 45 var q=(Math.random()*1000); 46 47 document.getElementById(`x${k}`).value=p; 48 document.getElementById(`y${k}`).value=q; 49 arr.push({x:p,y:q}); 50} 51 52var x0=parseFloat(document.getElementById('x0').value); 53var x1=parseFloat(document.getElementById('x1').value); 54var x2=parseFloat(document.getElementById('x2').value); 55var y0=parseFloat(document.getElementById('y0').value); 56var y1=parseFloat(document.getElementById('y1').value); 57var y2=parseFloat(document.getElementById('y2').value); 58 59 //g 60const g=[]; 61const gx=(x0+x1+x2)/3; 62const gy=(y0+y1+y2)/3; 63g.push(gx); 64g.push(gy); 65alert(g); 66} 67 68</script> 69 70<form id="fm"></form> 71<input type="button" id="Atk" onclick="atk()" value="solve"> 72 73 74</body> 75</html>
試したこと
for(k…){}の中に
x[k]=parseFloat(document.getElementById('y${k}').value);
とした所、
今まで正常に表示されていたp1,p2ポイントのxy座標のinputタグまで表示されなくなってしまいました。
そこで、for(m…)のループをkの後に追加しkをmと置き換えて回してみましたが、
今度はxy座標の取得に失敗してしまいました。
kのループの中ではp,q座標配列取得が最終項しか何故かできず、
今後のその他5心を求めるために必要な情報として配列として残すのに失敗してしまいました。
わかりにくい質問で申し訳ありませんが、何卒よろしくお願い申し上げます。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答6件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/24 06:07
2018/09/24 09:07
2018/09/24 10:01 編集
2018/09/24 11:15