更改 src 的值<img src>来自 javascript 的 div 内的标签

Question

I want to change the images of main webpage according to the value sent in javascript file.我想根据 javascript 文件中发送的值更改主网页的图像。 I have defined div tag in my html file and placed default value for image src.我在我的 html 文件中定义了 div 标签，并为图像 src 设置了默认值。 Then I am taking input from user about their mood.然后我从用户那里获取关于他们心情的信息。 Using if else, i compared the value and chose the suitable image to display on my webpage.使用 if else，我比较了值并选择了合适的图像显示在我的网页上。 But, I am unable to change the default value of src tag in my program.但是，我无法在我的程序中更改 src 标签的默认值。 I just tried something else and could not find ways to resolve this.我只是尝试了其他方法，但找不到解决此问题的方法。 Thank you in advance.先感谢您。

NOTE: I am a beginner in JS注意：我是 JS 的初学者

home.html家.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脚本.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");
}

Answer 1

element.innerHTML is a string, so element.innerHTML.src does not make sense. element.innerHTML 是一个字符串，所以 element.innerHTML.src 没有意义。

You should do this instead:你应该这样做：

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

Answer 2

There are some problems in your implementation你的实现有一些问题

With this var suitableImage = document.getElementById('feel') you'll get the div element not the img element.使用此var suitableImage = document.getElementById('feel')您将获得div元素而不是img元素。 You should be targeting img element.您应该以img元素为目标。
suitableImage.innerHTML is a string, so suitableImage.innerHTML.src will be undefined, and there's no value for this statement. suitableImage.innerHTML是一个字符串，因此suitableImage.innerHTML.src将是未定义的，并且此语句没有值。

Get the image element and then change the src on that获取图像元素，然后更改其上的 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";   
}

Answer 3

The problem here is that you don't query the correct tag you want to edit which is img .这里的问题是您没有查询要编辑的正确标签，即img 。

First I recommend you to add an id to your picture:首先我建议你给你的图片添加一个id：

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

Then:然后：

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

Answer 4

Simply give an id to your img tag - like if i give an id="feel_img" , then using JS I can set src like so:简单地给你的img标签一个id - 就像如果我给一个id="feel_img" ，然后使用 JS 我可以像这样设置src ：

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

更改 src 的值<img src>来自 javascript 的 div 内的标签

问题描述

4 个解决方案

解决方案1
2 2020-09-20 13:25:31

解决方案2
1 已采纳 2020-09-20 13:25:44

解决方案3
1 2020-09-20 13:28:44

解决方案4
0 2020-09-20 13:29:02

更改 src 的值<img src>来自 javascript 的 div 内的标签

问题描述

4 个解决方案

解决方案1 2 2020-09-20 13:25:31

解决方案2 1 已采纳 2020-09-20 13:25:44

解决方案3 1 2020-09-20 13:28:44

解决方案4 0 2020-09-20 13:29:02

解决方案1
2 2020-09-20 13:25:31

解决方案2
1 已采纳 2020-09-20 13:25:44

解决方案3
1 2020-09-20 13:28:44

解决方案4
0 2020-09-20 13:29:02