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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

Q&A

3回答

5675閲覧

Javascriptで既に画面に表示されているimgを別の画像に変えたい!

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2017/02/05 08:05

編集2022/01/12 10:55

JavascriptでDOM操作で動的に1のボタンを押して画面にimgが表示されます。
2のボタンを押すと1のボタンで出たimgのsrcが変更され別の画像が画面に表示されます。
何度1を押しても、2を押したら1で生成されたたくさんのイメージの中から一つは必ず2のイメージに変わるーこれが繰り返されることを目指してます。

html

1 <body> 2 <div id = "area"> 3 <div id = "content"></div> 4 <button id="Btn">開始</button> 5 </div> 6 <script src = "public/script.js"></script> 7 </body> 8</html>

javascript

1var Btn = document.getElementById('Btn'); 2Btn.addEventListener('click', function() { 3 change.start(); 4}); 5change.addEventListener('result', function(e) { 6 console.log(e); 7 var text = e.results[0][0].transcript; 8 9switch(text) { 10 case "first": 11 getF00(); 12 break; 13 case "second": 14 getS00(); 15 break; 16} 17 18}); 19function getF00() { 20 var box = document.createElement("div"); 21 22 var image = document.createElement("img"); 23 image.src = "img.jpg"; 24 image.style.position = "absolute"; 25 image.className = 'o'; 26 27 box.appendChild(image); 28 content.appendChild(box); 29} 30 31function getS00() { 32 var area = document.getElementById("content"); 33 var image = area.getElementsByClassName("o"); 34 image.src = "cloud.png"; 35}

と書いて反応がなかったです。setAttribute("src")も試したものの、errorが出るだけでした。
そのerrorはこちらになります。

Uncaught TypeError: image.setAttribute is not a function at getS00 (script.js:393) at SpeechRecognition.<anonymous> (script.js:82)

初心者なので、この書き方に何故問題が起こるのか良く分かりません。
期待通りに動かすためにはどうするべきですか?

何卒宜しくお願い致します。

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

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

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

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

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

kei344

2017/02/05 08:41

HTMLとエラー文も追記してください。
s8_chu

2017/02/05 09:28

getF00関数を閉じていないからエラーが起こっているのではないかと思いますが、id="Btn"がクリックされたら~する、といった処理をどこでしているのでしょうか?
turbgraphics200

2017/02/05 09:38

changeというオブジェクトはどこで定義されているのでしょうか。
退会済みユーザー

退会済みユーザー

2017/02/05 09:45

クリックって言うか、音声認識のAPIを起動させる部分をchangeで定義してます。最初から書くべきだったのですが、お手数おかけしました。汗
turbgraphics200

2017/02/05 09:50

質問内容とコードの内容がまったく一致してないため、質問内容をコードに合わせるか、コードを質問内容に合わせてください。がバラバラなので質問内容をコードに合わせてください
guest

回答3

0

こういうことでしょうか?(HTMLのコードは質問者さんのjavascriptのコードから推測)

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #content { 13 border: 1px solid #000; 14 width: 150px; 15 height: 150px; 16 } 17 </style> 18</head> 19<body> 20<div id="content"> 21</div> 22<label> 23 <input type="button" value="first" class="button1"> 24</label> 25<label> 26 <input type="button" value="second" class="button1"> 27</label> 28<script> 29 var getClassName = document.getElementsByClassName("button1"); 30 Array.from(getClassName).forEach(function (e) { 31 e.addEventListener("click", function () { 32 var text = this.value; 33 switch (text) { 34 case "first": 35 getF00(); 36 break; 37 case "second": 38 getS00(); 39 break; 40 } 41 }); 42 }); 43 44 function getF00() { 45 var box = document.createElement("div"); 46 var image = document.createElement("img"); 47 var content = document.getElementById("content"); 48 content.innerHTML = ""; 49 image.src = "https://placehold.jp/8a90ff/ffffff/150x150.png"; 50 image.style.position = "absolute"; 51 image.className = "o"; 52 53 box.appendChild(image); 54 content.appendChild(box); 55 }//閉じる。 56 57 function getS00() { 58 var box = document.createElement("div"); 59 var image = document.createElement("img"); 60 var content = document.getElementById("content"); 61 content.innerHTML = ""; 62 image.src = "https://placehold.jp/ff8a8a/ffffff/150x150.png"; 63 image.style.position = "absolute"; 64 image.className = "o"; 65 66 box.appendChild(image); 67 content.appendChild(box); 68 } 69</script> 70</body> 71</html>

投稿2017/02/05 09:22

s8_chu

総合スコア14731

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

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

0

getElementsByClassName()は、 エレメントの配列(なようなもの具体的にはHTMLCollection型)をかえしますので、

js

1var image = area.getElementsByClassName("o")[0];

とすればできるのではないでしょうか?

投稿2017/02/05 08:52

turbgraphics200

総合スコア4267

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

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

0

少々シンプルにして動作するものをコーディングしました。

html

1<!DOCTYPE html> 2<html> 3<head> 4<title>画像切り替え</title> 5<meta charset="utf-8"> 6<script> 7 8function getF00() { 9 var image = document.getElementById("o"); 10 image.src = "img.jpg"; 11} 12 13function getS00() { 14 var image = document.getElementById("o"); 15 image.src = "cloud.png"; 16} 17</script> 18</head> 19<body> 20内容 21<form> 22<input type="button" onclick ="getF00()" value ="1のボタン"> 23<br/> 24<input type="button" onclick ="getS00()" value ="2のボタン"> 25</form> 26<img id="o" src="img0.jpg" style="osition:absolute;"/> 27<br/> 28以上 29</body> 30</html>

HTML上のDOM操作は独特です。createElementは表示が完了した後では効かないので、idを配した<div><img>などのタグを初めからbodyに並べておいた方がバグを防げるでしょう。
class属性は省いてid属性をとっかかりとしてsrc属性を操作しています。

ボタンも開始ボタンしか用意していないものを[1のボタン]と[2のボタン]に分けて用意しています。
フリップフロップにしたければ[開始]ボタンにonclickで結びつける関数を工夫する必要があるでしょう。

各行がどのように関わり合って役割を果たしているか、分析してみて下さい。

投稿2017/02/05 09:55

編集2017/02/05 10:00
seastar3

総合スコア2285

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問