ジャバスプリクトの質問

締切済

質問者：なかはさTID
質問日時：2019/03/08 16:38
回答数：2件

このプログラムは晴れという文字が表示された場合晴れのアイコンを表示し、雨という文章が表示された場合雨のアイコンを表示するものなのですが二つ目以降の文章に画像が表示されません（下画像参照）

どのように改善したら2つ目以降もアイコンが表示されるのでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>
window.addEventListener('load', function() {
var text = document.getElementById('text').textContent;
var imgWindow = document.getElementById('image_window');
var textList = ['晴れ', '雨'];
var imgList = ['Hare.png', 'Ame.png'];
var index = textList.findIndex(function(element) {
var reg = new RegExp(element);
return text.search(reg) != -1;
});
if (index != -1) {
var image = document.createElement('img');
image.src = imgList[index];
imgWindow.appendChild(image);
}
},false);
</script>
</head>
<body>
今日の天気は晴れです。 
明日の天気は雨です。 
明後日の天気は晴れです。 
</body>
</html>

このあとidをnameに変更してみたのですが逆に一行目にも画像が表示されなくなりました

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>
window.addEventListener('load', function() {
var text = document.getElementByName('text').textContent;
var imgWindow = document.getElementByName('image_window');
var textList = ['晴れ', '雨',];
var imgList = ['Hare.png', 'Ame.png'];
var index = textList.findIndex(function(element) {
var reg = new RegExp(element);
return text.search(reg) != -1;
});
if (index != -1) {
var image = document.createElement('img');
image.src = imgList[index];
imgWindow.appendChild(image);
}
},false);
</script>
</head>
<body>
天気は晴れです 

天気は雨です 

天気は雨です 
</body>
</html>
　
こうゆうことですか？
こうすると一行目も画像が表示されないのですが

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： fujillin
回答日時：2019/03/09 22:39

こんばんは

そもそもですが、要素のIDは文書内で固有であることが原則です。
ですので、ご提示の最初の文書はHTMLの文法違反になっています。
一方、getElementByIdはIDを利用して要素を取得するメソッドですが、（当然ながら）ひとつの要素を返します。
従って、
＞二つ目以降の文章に画像が表示されません
となります。
https://developer.mozilla.org/ja/docs/Web/API/Do …

＞こうすると一行目も画像が表示されないのですが
getElementByNameというメソッドは存在しないので、エラーとなって停止しているものと思われます。
使うなら、getElementsByNameですが、こちらは複数の要素を返すので、（仮に要素がひとつしかなくても）NodeListと言われる配列に似たオブジェクトを返します。
https://developer.mozilla.org/ja/docs/Web/API/Do …

こちらの場合は、複数を扱う扱い方をする必要があります。
具体的には、添字でforループ等でまわすか、あるいは、forEachなどで順に処理するといった方法になるでしょう。
https://developer.mozilla.org/ja/docs/Web/API/No …

- 0
- 件

通報する

参考程度に

No.2

回答者： fujillin
回答日時：2019/03/11 10:44

No1です

少し考え方を変えていますが、こんなのはいかがでしょうか。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script type="text/javascript">
(()=>{
const textList = ["晴れ", "雨"];
const imgList = ["Hare.png", "Ame.png"];
let reg = new RegExp("(" + textList.join("|") + ")","gm");

window.addEventListener("DOMContentLoaded", ()=>{
document.querySelectorAll("p.text").forEach((e)=>{
let res = e.textContent.match(reg);
if(res){
res.forEach((r)=>{
let image = new Image();
image.src = imgList[textList.indexOf(r)]
e.appendChild(image);
});
}
});
});
})();
</script>

</head>
<body>
今日の天気は晴れです。
明日の天気は雨です。
明後日の天気は晴れです。
月曜日の天気は晴れ一時にわか雨です。
</body>
</html>