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

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

ただいまの
回答率

90.52%

  • JavaScript

    19815questions

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

  • HTML5

    4964questions

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

  • CSS3

    2557questions

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

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,524

H93

score 4

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

  <body>
    <div id = "area">
        <div id = "content"></div>
        <button id="Btn">開始</button>
    </div>
    <script src = "public/script.js"></script>
  </body>
</html>
var Btn = document.getElementById('Btn');
Btn.addEventListener('click', function() {
  change.start();
});
change.addEventListener('result', function(e) {
  console.log(e);
  var text = e.results[0][0].transcript;

switch(text) {
    case "first":
      getF00();
      break;
    case "second":
      getS00();
      break;
}

});
function getF00() {
    var box = document.createElement("div");

    var image = document.createElement("img");
    image.src = "img.jpg";
    image.style.position = "absolute";
    image.className = 'o';

    box.appendChild(image);
    content.appendChild(box);
}

function getS00() {
   var area = document.getElementById("content");
   var image = area.getElementsByClassName("o");
    image.src = "cloud.png";
}  

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • turbgraphics200

    2017/02/05 18:38

    changeというオブジェクトはどこで定義されているのでしょうか。

    キャンセル

  • H93

    2017/02/05 18:45

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

    キャンセル

  • turbgraphics200

    2017/02/05 18:50

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

    キャンセル

回答 3

+2

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #content {
            border: 1px solid #000;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
<div id="content">
</div>
<label>
    <input type="button" value="first" class="button1">
</label>
<label>
    <input type="button" value="second" class="button1">
</label>
<script>
    var getClassName = document.getElementsByClassName("button1");
    Array.from(getClassName).forEach(function (e) {
        e.addEventListener("click", function () {
            var text = this.value;
            switch (text) {
                case "first":
                    getF00();
                    break;
                case "second":
                    getS00();
                    break;
            }
        });
    });

    function getF00() {
        var box = document.createElement("div");
        var image = document.createElement("img");
        var content = document.getElementById("content");
        content.innerHTML = "";
        image.src = "https://placehold.jp/8a90ff/ffffff/150x150.png";
        image.style.position = "absolute";
        image.className = "o";

        box.appendChild(image);
        content.appendChild(box);
    }//閉じる。

    function getS00() {
        var box = document.createElement("div");
        var image = document.createElement("img");
        var content = document.getElementById("content");
        content.innerHTML = "";
        image.src = "https://placehold.jp/ff8a8a/ffffff/150x150.png";
        image.style.position = "absolute";
        image.className = "o";

        box.appendChild(image);
        content.appendChild(box);
    }
</script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<!DOCTYPE html>
<html>
<head>
<title>画像切り替え</title>
<meta charset="utf-8">
<script>

function getF00() {
    var image = document.getElementById("o");
    image.src = "img.jpg";
}

function getS00() {
   var image = document.getElementById("o");
   image.src = "cloud.png";
}  
</script>
</head>
<body>
内容
<form>
<input type="button" onclick ="getF00()" value ="1のボタン">
<br/>
<input type="button" onclick ="getS00()" value ="2のボタン">
</form>
<img id="o" src="img0.jpg" style="osition:absolute;"/>
<br/>
以上
</body>
</html>

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • JavaScript

    19815questions

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

  • HTML5

    4964questions

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

  • CSS3

    2557questions

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