Change value of src in tag inside div from javascript

Question

I want to change the images of main webpage according to the value sent in javascript file. I have defined div tag in my html file and placed default value for image 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. But, I am unable to change the default value of src tag in my program. I just tried something else and could not find ways to resolve this. Thank you in advance.

NOTE: I am a beginner in 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");
}

You are targeting div, not a image, you need to change source on image itself. — ikiK, Sep 20 '20 at 13:27
I used so because, I thought there could be some other elements as in

Good Morning
So, using single id and wanted to try to connect with other tags with that as well. — cnayak, Sep 20 '20 at 13:29
In the question you mentioned *Change value of src in tag inside div from javascript*, but in the snippet `img` element is not inside div. Can you tell us what exactly you are looking for? — Nithish, Sep 20 '20 at 13:30
You need to put that into your question HTML and explain. Your code is not working because you are changing source on div. Div does not have source attribute... And after you corrected the ""typo", first answers where correct, now you make them wrong again... You need to watch out what you are asking and presenting. With all relevant code present to make [mre] — ikiK, Sep 20 '20 at 13:34
You need to go and read like the rest of us did: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors https://www.w3schools.com/cssref/css_selectors.asp https://www.w3schools.com/jsref/met_document_queryselector.asp — ikiK, Sep 20 '20 at 13:37
@ikiK Thank you for pointing out. I will watch what I am posting carefully next time. Also thank you for the resources. I learned a lot from the links you gave. — cnayak, Sep 20 '20 at 13:55

Chong Lip Phang · Answer 1 · 2020-09-20T13:34:58.143

2

element.innerHTML is a string, so element.innerHTML.src does not make sense.

You should do this instead:

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

edited Sep 20 '20 at 13:34

answered Sep 20 '20 at 13:25

Chong Lip Phang

8,755
5
65
100

Nithish · Accepted Answer · 2020-09-20T13:37:43.307

1

There are some problems in your implementation

With this var suitableImage = document.getElementById('feel') you'll get the div element not the img element. You should be targeting img element.
suitableImage.innerHTML is a string, so suitableImage.innerHTML.src will be undefined, and there's no value for this statement.

Get the image element and then change the src on that

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";   
}

edited Sep 20 '20 at 13:37

answered Sep 20 '20 at 13:25

Nithish

5,393
2
9
24

Just a question here. The program worked for both == and ===. I had read about its usage in https://www.w3schools.com/js/js_comparisons.asp I wanted to ask if using === is like preferred or better choice while working with string comparison in JS or either of the == OR === is fine – cnayak Sep 20 '20 at 14:01
1

I would prefer using `===` always as `==` operator does type coercion. So sometimes which is not the intended case. You might want to look at [this](https://stackoverflow.com/a/359509) for more clarification. – Nithish Sep 20 '20 at 14:07

score 1 · Answer 3 · answered Sep 20 '20 at 13:28

1

The problem here is that you don't query the correct tag you want to edit which is img.

First I recommend you to add an id to your picture :

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

Then :

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

answered Sep 20 '20 at 13:28

Mze

197
9

1

I have corrected as I intended to. I actually want to use single id and access all other Tags within div. There could be
tags inside div too. I dont want to define ids for and
separately
– cnayak Sep 20 '20 at 13:35

score 0 · Answer 4 · answered Sep 20 '20 at 13:29

0

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 :

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

answered Sep 20 '20 at 13:29

Sowjanya R Bhat

1,128
10
19

Change value of src in tag inside div from javascript

Good Morning

4 Answers4

tags inside div too. I dont want to define ids for and

separately