Change value of src in <image src> 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
– ikiK, Commented Sep 20, 2020 at 13:27
I used so because, I thought there could be some other elements as in <div id = 'feel'></div> <img src = "images/dull.jpg"> <h1> Good Morning</h1> </div> So, using single id and wanted to try to connect with other tags with that as well. — cnayak
– cnayak, Commented Sep 20, 2020 at 13:29
In the question you mentioned Change value of src in <image src> 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
– Nithish, Commented Sep 20, 2020 at 13:30
You need to go and read like the rest of us did: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors w3schools.com/cssref/css_selectors.asp w3schools.com/jsref/met_document_queryselector.asp — ikiK
– ikiK, Commented Sep 20, 2020 at 13:37

Chong Lip Phang · Accepted Answer · 2020-09-20 13:34:58Z

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, 2020 at 13:34

answered Sep 20, 2020 at 13:25

Chong Lip Phang

9,2877 gold badges76 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nithish · Accepted Answer · 2020-09-20 13:37:43Z

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, 2020 at 13:37

answered Sep 20, 2020 at 13:25

Nithish

6,1273 gold badges13 silver badges25 bronze badges

2 Comments

cnayak Over a year ago

Just a question here. The program worked for both == and ===. I had read about its usage in 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

Nithish Over a year ago

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 for more clarification.

Mze · Accepted Answer · 2020-09-20 13:28:44Z

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, 2020 at 13:28

Mze

1879 bronze badges

1 Comment

cnayak Over a year ago

I have corrected </div> as I intended to. I actually want to use single id and access all other Tags within div. There could be <h1> tags inside div too. I dont want to define ids for <image ...> and <h1> separately

Sowjanya R Bhat · Accepted Answer · 2020-09-20 13:29:02Z

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, 2020 at 13:29

Sowjanya R Bhat

1,18610 silver badges21 bronze badges

Collectives™ on Stack Overflow

Change value of src in <image src> tag inside div from javascript

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related