Javascript document getelementbyid src

Change HTML image src using JavaScript code

You can change an HTML image src attribute programatically by using JavaScript. First, you need to grab the HTML element by using JavaScript element selector methods like getElementById() or querySelector() and assign the element to a variable.

After you have the element, you can assign a new string value to its src property as follows:

When you have the image in another folder, than you need to add the image path to the src attribute as well. The code below shows how to change the src attribute to an image inside the assets/ folder:

Finally, if you need to run some JavaScript code after a new image has been loaded to the element, you can add an onload event loader to your img element before changing the src attribute as follows:

Using the above code, an alert will be triggered when the new image from the src attribute has been loaded to the HTML page.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

Using JavaScript to Change the Image src

To change the src of an image using JavaScript, we simply use the image src property along with the getElementById method.

document.getElementById("img1").src = "anotherImg.jpg";

Let’s say I have the following HTML code:

To change the image src of #img1 from img.jpg to anotherImg.jpg, we will use the src property in the following JavaScript code:

document.getElementById("img1").src = "anotherImg.jpg";

Using JavaScript to Change the Image src with a Click

To change the source of an image we can combine the src property with a click event.

Let’s say we have the same HTML from above.

We have two images, example-img1.png is a picture of gears and example-img2.png is the same image, but with different colors.

We have added an onclick event to the #click-me div which will run a function where we can change the image from the example-img1.png version to the example-img2.png version.

Here is the function below that will accomplish this:

The final code and output for this example of how to change the source of an image using the src property and JavaScript is below:

#img-1 
Change image
 
  

Using JavaScript to Toggle Image src with a Click

To toggle the source of an image we simply need access to another image, or use our original image URL.

We will use the same HTML.

We have two images, example-img1.png is a picture of gears and example-img2.png is the same image, but with different colors. We will toggle between these two images.

We will modify our function slightly to toggle the image instead of just changing it once.

Here is the function below that will accomplish this:

The final code and output for this example of how to toggle the source of an image using the src property and JavaScript is below:

#img-2 
Toggle image
 
  

Hopefully this article has helped you understand how to use JavaScript to change the image src of an image.

Other Articles You’ll Also Like:

• 1. cleartimeout JavaScript – How the clearTimeout() Method in JavaScript Works
• 2. Using JavaScript to Set the Id of an Element
• 3. Using JavaScript to Hide Element by Class
• 4. How to Convert Radians to Degrees Using JavaScript
• 5. Using JavaScript to Create a Unique Array
• 6. Using JavaScript to Get the URL Path
• 7. Using JavaScript to Get the Domain From URL
• 8. JavaScript onkeyup – How to Use onkeyup Event with JavaScript
• 9. Creating a JavaScript Function to Subtract Two Numbers
• 10. Remove Word From String In JavaScript

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Comments

Hey Berdly. We added a new section to this post at the end to show how to toggle an img src onclick. Hope that helps!

Источник

Change the “src” attribute of an image using JavaScript.

This is a tutorial on how to change the “src” attribute of an image using JavaScript.

The src attribute specifies the URL of an image. Therefore, by setting a new src, we can dynamically change the image in question.

In this post, I will show you how to accomplish this using both regular JavaScript and jQuery.

Changing the src attribute using regular JavaScript.

If you’re not already using jQuery, then there is no sense in including the library just to manipulate the src attribute. Instead, you can just use vanilla JavaScript, which tends to be faster.

Take a look at the example below:

If you run the snippet above, you will see that the src attribute of our image element is replaced by our JavaScript code.

A more verbose example for those of you who want to understand what is going on here:

//Get our img element by using document.getElementById var img = document.getElementById("myImage"); //Set the src property of our element to the new image URL img.src = 'img/new-image.jpg';

In this case, we have broken the process up into two steps:

1. We retrieved the img element from our HTML DOM by using the method document.getElementById(). We passed “myImage” in as the parameter because that is the ID of our image.
2. After retrieving the img, we were able to modify its src attribute and assign a new URL.

This will force the browser to load our new image.

Changing the img src using jQuery.

If you’re already using the jQuery library and you would like to keep your code consistent, you can use the following method:

//Change the img property using jQuery's attr method $("#myImage").attr("src", 'img/new-image.jpg');

In the code above, we referenced the image by its ID and then used jQuery’s attr() method to set a new value for its src attribute.

Determining when the new image is loaded.

If you need to do something after the new image has loaded, then you can attach jQuery’s load() method to our example above:

//Change the img property and use load() to figure out when //the new image has been loaded $("#myImage").attr("src", 'img/new-image.jpg').load(function()< alert('New image loaded!'); >);

Once jQuery has changed the src property and the image from the new URL has been loaded in the browser, the code inside the load() method will execute. However, this load block will not execute if the image in question doesn’t exist.

Источник

Get the HTML img tag src attribute value in JavaScript

I am sure that you must familiar with the HTML img tag. We all know that using this tag, we can display an image on a web page. All we have to do is just to give the image path inside the src attribute of the image tag.

Now, in this article, I am going to tell you how to get the img tag src attribute value in JavaScript.

Below is an example of how we can show an image on the web page with the HTML img tag:

Now we want to get the src value of the above HTML img tag. We can clearly see that the src attribute has path value “cat.png”. We want to get the value programmatically with JavaScript.

JavaScript code to get the HTML img tag src attribute value

Below is our JavaScript code to get src value from the above img tag that I have just used as the example:

var img_src = document.getElementById("my-img").src; console.log(img_src);

If we run our code on the browser, we can see “directory/cat.png” in the console log. You can see that it returns the complete path of the src file.

So easy and simple. Isn’t it? We did it only in one line of code and the extra one line is just to show the value in the console log.

Here we have used the HTML image src property to get the attribute value. The src property of JavaScript HTML DOM can set or return the value of src attribute. In our case, we have used this property to return the attribute value.

Источник

Get the HTML img tag src attribute value in JavaScript

I am sure that you must familiar with the HTML img tag. We all know that using this tag, we can display an image on a web page. All we have to do is just to give the image path inside the src attribute of the image tag.

Now, in this article, I am going to tell you how to get the img tag src attribute value in JavaScript.

Below is an example of how we can show an image on the web page with the HTML img tag:

Now we want to get the src value of the above HTML img tag. We can clearly see that the src attribute has path value “cat.png”. We want to get the value programmatically with JavaScript.

JavaScript code to get the HTML img tag src attribute value

Below is our JavaScript code to get src value from the above img tag that I have just used as the example:

var img_src = document.getElementById("my-img").src; console.log(img_src);

If we run our code on the browser, we can see “directory/cat.png” in the console log. You can see that it returns the complete path of the src file.

So easy and simple. Isn’t it? We did it only in one line of code and the extra one line is just to show the value in the console log.

Here we have used the HTML image src property to get the attribute value. The src property of JavaScript HTML DOM can set or return the value of src attribute. In our case, we have used this property to return the attribute value.

Источник