質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

for文での上手な短縮の仕方がわかりません。

hectopascal1013
hectopascal1013

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

6回答

0評価

0クリップ

3閲覧

投稿2018/09/23 09:40

前提・実現したいこと

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

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style></style> </head> <body> <script> function atk(){ var fm = document.getElementById('fm'); fm.innerHTML=""; var arr=[]; for(k = 0; k < 3; k++){ var inputX = document.createElement('input'); inputX.type = 'number'; inputX.size = 10; inputX.id = `x${k}`; inputX.placeholder = `x${k}`; var inputY = document.createElement('input'); inputY.type = 'number'; inputY.size = 10; inputY.id = `y${k}`; inputY.placeholder = `y${k}`; inputY.value = `y${k}`; var br = document.createElement('br'); var before = document.createTextNode(`p${k}(`); var comma = document.createTextNode(','); var after = document.createTextNode(')'); fm.append(before); fm.append(inputX); fm.append(comma); fm.append(inputY); fm.append(after); fm.append(br); var p=(Math.random()*1000); var q=(Math.random()*1000); document.getElementById(`x${k}`).value=p; document.getElementById(`y${k}`).value=q; arr.push({x:p,y:q}); } 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); //g const g=[]; const gx=(x0+x1+x2)/3; const gy=(y0+y1+y2)/3; g.push(gx); g.push(gy); alert(g); } </script> <form id="fm"></form> <input type="button" id="Atk" onclick="atk()" value="solve"> </body> </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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。