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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

1247閲覧

JavaScriptのコードの間違いを指摘してください。

portfolio

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

1クリップ

投稿2018/01/13 09:00

###前提・実現したいこと
教則本を読みながら、画像ビューアを作っています。
→ボタンを押すと画像が切り替わるようにしたいのですが、切り替わりません。
どこがおかしいでしょうか。
###発生している問題・エラーメッセージ

画像が切り替わらない

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

JavaScript

1var pictNo = 1; 2var myImg = []; 3 4myImg[0] = document.createElement'img'); 5myImg[0].src = 'img/1.jpg'; 6myImg[1] = document.createElement'img'); 7myImg[1].src = 'img/2.jpg'; 8myImg[2] = document.createElement'img'); 9myImg[2].src = 'img/3.jpg'; 10myImg[3] = document.createElement'img'); 11myImg[3].src = 'img/4.jpg'; 12 13function revBtnClick(){ 14 pictNo--; 15 document.getElementById('no').innerHTML = 'No.'+ pictNo; 16 document.getElementById('pict').src = myImg[pictNo - 1].src; 17 18 if (pictNo === 1) { 19 document.getElementById('rev_btn').disabled = 'disabled'; 20 } else if (pictNo === 3){ 21 document.getElementById('fwd_btn').disabled = false; 22 document.getElementById('no').className = 'no1' ; 23 } 24} 25 26function fwdBtnClick(){ 27 pictNo++; 28 document.getElementById('no').innerHTML = 'No.'+ pictNo; 29 document.getElementById('pict').src = myImg[pictNo - 1].src; 30 31 if (pictNo === 4){ 32 document.getElementById('no').className = 'no2' ; 33 document.getElementById('fwd_btn').disabled = 'disabled'; 34 } else if (pictNo === 2){ 35 document.getElementById('rev_btn').disabled = false; 36 } 37} 38

###試したこと
HTMLはこれです。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>簡易画像ビューワ</title> <link rel="stylesheet" href="viewer.css"> <script src="viewer.js"></script> </head> <body> <img id="pict" src="img/1.jpg"> <div id="no" class="no1">No.1</div> <button id="rev_btn" onclick="revBtnClick();" disabled="disabled">←</button> <button id="fwd_btn" onclick="fwdBtnClick();">→</button> </body> </html>

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

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

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

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

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

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

defghi1977

2018/01/13 09:06

WEBブラウザの開発者ツールにおいて発生しているエラーを確認されましたか?
portfolio

2018/01/13 12:42

WEBブラウザの開発者ツールの使い方がわかりません。WEBブラウザの開発者ツールを調べてみます。
guest

回答2

0

document.createElement'img');
かっこがたりません…

投稿2018/01/13 09:53

sousuke

総合スコア3828

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

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

portfolio

2018/01/13 12:39

ふわわ。本当ですね。ありがとうございます。
guest

0

ベストアンサー

こんにちは

myImg に要素を追加していくところで、 createElement の後に ( がないです。
なので、以下のように修正してみると、いかがでしょうか?

修正前:

javascript

1myImg[0] = document.createElement'img');

修正後:

javascript

1myImg[0] = document.createElement('img');

myImg[1], myImg[2], myImg[3] についても同様です。
参考になれば幸いです。

投稿2018/01/13 09:43

jun68ykt

総合スコア9058

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

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

portfolio

2018/01/13 12:39

できました!ありがとうございます!
jun68ykt

2018/01/13 12:40

解決されたようで、よかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問