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)
初心者なので、この書き方に何故問題が起こるのか良く分かりません。
期待通りに動かすためにはどうするべきですか?
何卒宜しくお願い致します。