根据元素中的单词更改图像 src

Question

我想根据元素中的单词更改显示的图像，这会经常更改。我尝试使用 indexOf 方法，尝试搜索将决定是否在元素 1 或元素 2 中显示特定图像的关键字，但没有成功。

<div class="main>
    <h1 id="nextGame" onLoad="nextGames()">Aug 25, 2019: Home against Genoa</h1>
    <p id="homeTeam"><img src="" id="teamHome"> vs <img src="" id="teamAway"></p>
</div>


<script>
var nextGame1 = document.getElementById("nextGame").indexOf("Home");
 if (nextGame1 !== -1); {
    document.getElementById("homeTeam").src = "asroma2.png";
 } else { 
    document.getElementById("teamAway").src = "asroma2.png";
 }
</script>

我希望我的代码能够查看元素 "nextGame" 中是否包含字符串 "Home"。如果是这样，"homeTeam"的图片来源将更改为我指定的src，如果不是"teamAway"将分配给src。

显然不是这样。有谁知道我做错了什么？

Answer 1

我想你想使用类似

的东西

var nextGame1 = document.getElementById("nextGame").innerText.indexOf("Home");

Answer 2

使用 document.getElementById("nextGame") 将生成完整的 HTML 标签，而不是标签中的文本。您可以使用 document.getElementById("nextGame").innerText 获取标签内的文本，然后您可以使用 indexOf 运算符来确定其中是否存在 "Home"。完整的代码会这样写：

<div class="main>
  <h1 id="nextGame" onLoad="nextGames()">Aug 25, 2019: Home against Genoa</h1>
  <p id="homeTeam"><img src="" id="teamHome"> vs <img src="" id="teamAway"></p>
</div>


<script>
 var nextGame1 = document.getElementById("nextGame").innerText.indexOf("Home");
 if (nextGame1 !== -1) {
     document.getElementById("homeTeam").src = "asroma2.png";
 } else { 
     document.getElementById("teamAway").src = "asroma2.png";
 }
</script>

您还用分号关闭了 if 语句，并在末尾使用了额外的右括号，这两种操作都会引发语法错误。

根据元素中的单词更改图像 src

Changing image src depending on which word is in the element

javascript

indexof

src