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

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

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

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

Q&A

解決済

2回答

3163閲覧

画像をbody部にfor文で表示する

javascripter

総合スコア12

JavaScript

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

0グッド

0クリップ

投稿2016/09/10 12:20

###前提・実現したいこと
javascriptのbody部に、配列によって画像を描写する。
例えば配列が
001
120
だとすれば、それぞれの配列データに対応した画像ファイルが表示されるようにしたい。

###発生している問題・エラーメッセージ

以下のソースコードで実行したところ、描画されない。

###該当のソースコード

javascript

1<head> 2 3<script type="text/javascript"> 4var map = [//配列宣言 5 [0, 0, 0, 0], 6 [0, 0, 0, 0], 7 [0, 0, 0, 0] 8]; 9 10</script> 11 12</head> 13 14 15<body> 16 17<script type="text/javascript"> 18 for(var wy=0; wy<=map.length; wy++){//配列の縦要素分実行 19 for(var wx=0; wx<=map[y].length; wx++){//配列の縦要素文実行 20 var iy=wy*30, ix=wx*30;//画像を並べるために、座標要素を調節 21 document.write("<img src='img/masu.png' id='"masu"+wy+""+wx+""' style='position:absolute;left:"ix";top:"iy";'>");//調節した変数を座標に代入、idをmap[0][1]ならmasu01となるようにする 22 } 23 } 24</script> 25 26</body>

###試したこと
documentwriteの記述が間違っているかもしれないので確認、修正を行った。

###補足情報(言語/FW/ツール等のバージョンなど)
javascript
ieバージョン 11.545.105.86.0

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

element.onclick = new Function("move();");

と記述したら実行できました!
ありがとうございました

投稿2016/09/11 21:46

javascripter

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

「""」「''」の対称のミスだったり変数名が正しくなかったり、forのループ回数に誤解があったりしますね。

デベロッパーツールでエラーを確認しながらコーディングしてみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/

JavaScript

1var map = [//配列宣言 2 [0, 0, 0, 0] 3 , [0, 0, 0, 0] 4 , [0, 0, 0, 0] 5]; 6for ( var wy = 0; wy < map.length; wy++ ) { //配列の縦要素分実行 7 for ( var wx = 0; wx < map[wy].length; wx++ ) { //配列の縦要素文実行 8 var iy = wy * 30 9 , ix = wx * 30; //画像を並べるために、座標要素を調節 10 document.write( 11 '<img src="https://placehold.jp/9/cc9999/993333/30x30.png" id="masu"' 12 + wy 13 + '' 14 + wx 15 + ' style="position:absolute;left:' 16 + ix 17 + ';top:' 18 + iy 19 + ';">' 20 ); //調節した変数を座標に代入、idをmap[0][1]ならmasu01となるようにする 21 } 22} 23```**動くサンプル:**[https://jsfiddle.net/xy4t646u/1/](https://jsfiddle.net/xy4t646u/1/) 24 25--- 26 27`document.write` は使わない方向でプログラミングを覚えるほうが良いです。 28 29document . writeはやめて、innerHTMLを使おう | Web Developers Antenna ?ウェブ開発者アンテナ? [W'ANEB]30[http://web.antenna.work/innerhtml/](http://web.antenna.work/innerhtml/) 31 32【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。(DOMおれおれAdvent Calendar 2015 ? 01日目) | Ginpen.com】 33[http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/](http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/)

投稿2016/09/10 12:40

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

javascripter

2016/09/10 13:48

ご丁寧な回答ありがとうございます! innerhtmlを使って頑張ってみたいと思います
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問