从javascript更改div内<image src>标签中src的值答案

【问题标题】：Change value of src in <image src> tag inside div from javascript从javascript更改div内<image src>标签中src的值
【发布时间】：2021-01-06 18:57:40
【问题描述】：

我想根据 javascript 文件中发送的值更改主网页的图像。我在我的 html 文件中定义了 div 标签并为图像 src 放置了默认值。然后我从用户那里获取关于他们心情的信息。使用 if else，我比较了该值并选择了合适的图像显示在我的网页上。但是，我无法在我的程序中更改 src 标签的默认值。我只是尝试了其他方法，但找不到解决此问题的方法。提前谢谢你。

注意：我是 JS 的初学者

home.html

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with</title>
</head>
<body>
    <script src='script.js'></script>
    <div id = 'feel'>
         <img src = "images/dull.jpg"> 
    </div>   
    </body>
</html>

script.js

var feelingInfo = prompt("How are you feeling? (dull or fresh or sleepy)");

var suitableImage = document.getElementById('feel');
//console.log(feelingInfo);

//Here I want to change the src
if(feelingInfo == "dull"){
    suitableImage.innerHTML.src = '"images/dull.jpg">';
}

else if(feelingInfo == "fresh"){
    suitableImage.innerHTML.src = '"images/fresh.jpg">';
}

else if(feelingInfo == "sleepy"){
            suitableImage.innerHTML.src = '"images/sleepy.jpg">';
    }    
else{
           console.log("Error");
}

【问题讨论】：

您的目标是 div，而不是图像，您需要更改图像本身的来源。
我之所以这样使用是因为，我认为可能还有一些其他元素，如

早上好

所以，使用单个 id 并想尝试与其他标签连接。

在你提到的问题中 Change value of src in tag inside div from javascript，但在 sn-p img 元素中不在 div 内。您能告诉我们您到底在寻找什么吗？

抱歉打错了。我已经更正了。

你需要像我们其他人一样去阅读：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors w3schools.com/cssref/css_selectors.asp w3schools.com/jsref/met_document_queryselector.asp

标签： javascript html

【解决方案1】：

element.innerHTML 是一个字符串，所以 element.innerHTML.src 没有意义。

你应该这样做：

document.querySelector("#feel > img").src = "images/dull.jpg";

【讨论】：

【解决方案2】：

您的实现中存在一些问题

有了这个var suitableImage = document.getElementById('feel')，你会得到div元素而不是img元素。您应该定位 img 元素。
suitableImage.innerHTML 是一个字符串，因此 suitableImage.innerHTML.src 将是未定义的，并且此语句没有任何值。

获取图像元素，然后更改其上的 src

const suitableImage = document.querySelector("#feel > img");
if(feelingInfo === "dull"){
    suitableImage.src = "images/dull.jpg";
}
else if(feelingInfo === "fresh"){
    suitableImage.src = "images/fresh.jpg";
}
else if(feelingInfo === "sleepy"){
    suitableImage.src = "images/sleepy.jpg";   
}

【讨论】：

这里只是一个问题。该程序适用于 == 和 ===。我在w3schools.com/js/js_comparisons.asp 中阅读过它的用法我想问一下在 JS 中使用字符串比较时使用 === 是否是首选或更好的选择，或者 == 或 === 中的任何一个都可以
我更喜欢始终使用===，因为== 运算符确实键入强制。所以有时这不是预期的情况。您可能想查看this 以获得更多说明。

【解决方案3】：

这里的问题是您没有查询到要编辑的正确标签，即 img。

首先我建议你给你的图片添加一个id：

<img id="picture" src="images/dull.jpg">

然后：

var suitableImage = document.getElementById('picture');
suitableImage.src = 'new src content'

【讨论】：

我已经按照我的意图更正了
。我实际上想使用单个 id 并访问 div 中的所有其他标签。 div 内也可能有
标签。我不想分别为和
定义 id

【解决方案4】：

简单地给你的img标签一个id——就像我给一个id="feel_img"一样，然后使用JS我可以像这样设置src：

if(feelingInfo === "dull"){
    document.getElementById('feel_img').src = "images/dull.jpg";
}

【讨论】：

早上好

标签。我不想分别为 和

定义 id

标签。我不想分别为和