javascript change image onclick event

How to change the text and image by just clicking a button in JavaScript?

The text given to an particular element and the image given in an img element can be easily changed using the JavaScript. We can use the onclick event with the button element in the HTML document to make this happen when the button is clicked. To change the text on click to the button we assign a function to the onclick event as the value which performs the required changes.

Let us understand the methods of changing the text and the image individually using JavaScript in details with the help of code examples.

Changing text of an element

JavaScript provide us with the two different properties to change or get the text of an element in the HTML document, both of these properties are listed below with their functionalities and syntaxes −

• innerText − The innerText property of JavaScript is used to change the previous text or to get the previous text of a particular selected element from the HTML document.

Syntax

Following syntax will show you hoe to use the innerText property to get and change the text of an element −

selected_element.innerText = " new text ";

• innerHTML − The innerHTML propertynot only gives the text of an element with all the sub tags used inside it but it can also change the text of an element with the sub tags used in the new text.

Syntax

Following syntax will show you how to use the innerHTML property to get or change the text an element −

selected_element.innerHTML = " new text ";

Let us understand both of these properties by their practical implementations inside a code example −

Algorithm

• Step 1 − In the first step, we will add the input element to the HTML document. So that, we can change the text of the below paragraphs with the text entered by the user.
• Step 2 − In this step, we will add a button tag with an onclick event associated with it which takes a function as its value and call it when user clicks the button and changes the text of the paragraphs.
• Step 3 − In the next step, we will define a JavaScript function where we will grab the input text entered by the user and use the innerText and the innerHTML property to change the text of the paragraphs below on the page.

Example

The example below will explain you the practical use of the innerText and the innerHTML property to change the text of an element −

  
Changing an Text of an element in the HTML document using JavaScript.
 
The text of the below element will be replaced by the text you enter in input bar once you click the button.
  
 
 Click to change the Text 
This is the initial text of Para1.
 
This is the initial text of Para2.
    

In the above example, we have changed the text f two different paragraphs using the innerText and the innerHTML property. The text of former one is changed using the innerText property. While, the text of later one is changed using the innerHTML property.

Changing the image on click to the button

We have already discussed that how we can change the text of an element in HTML document using JavaScript. No, we will discuss how a image can be changed just by clicking the button using JavaScript.

JavaScript allow us to use the src property to change as well as to get the value of the given link or address of the image given to an img element in the src attribute.

Syntax

Following syntax will show how to use the src property to change the image on a web page −

selected_img_element.src = " new link or address ";

Let us now understand the practical implementation of the src property to change the image with the help of JavaScript code example −

Algorithm

• Step 1 − In the first step, we will add a img element in the HTML document with src attribute that contains some initial value and later we will change that value with the help of src property using JavaScript.
• Step 2 − In the next step, we will add a button element with the onclick event which will call a function when the button is clicked.
• Step 3 − In this step, we will define the JavaScript function and grab the img element inside it by its id.
• Step 4 − In the last step, we will change the value of the src attribute using the src property and give it a new value to show some new image on the web page. Every time, the button is clicked user will toggle between the two images on each click.

Example

Below example will explain how the src property takes the new value to replace the previous value of src attribute as well as the previous image on the web page −

  
Changing an Image in the HTML document using JavaScript
 
The image shown below will be changed once you click the button.
  
 
 Click to change the Image    

In the above example, we have used the src property to change the value of the src attribute of img element and the actual image on the web page.

In this article, we have learned about the two different methods of changing the text of an element on the web page using JavaScript as well as a method of changing the image on the web page in details with the help of code examples for each one of them. These examples will help you in enhancing your practical knowledge of JavaScript.

Источник

JavaScript — change image on click

Leen-Kerr

In this article, we would like to show you how to change the image src on click event using JavaScript.

var image = document.querySelector('#image'); image.onclick = function() < image.src = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png'; >;

var image = document.querySelector('#image'); image.addEventListener('click', function() < image.src = 'https://dirask.com/static/bucket/1633375165831-yjQ7G6WQeL--image.png'; >);

Practical examples

1. by clicking on image

In this section, we present practical example that changes image src when you click the image.

// ONLINE-RUNNER:browser;   
Click the image:
 
 
    

2. by clicking on button

In this section, we present practical example that changes image src when you click the button.

// ONLINE-RUNNER:browser;   Click me 
 
    

Note: check this article to know more about methods of how to add an onclick event to the HTML element.

References

Alternative titles

Источник

JavaScript Change Image onclick Event

We are displaying the best method to JavaScript change image onclick event with the example. As well as, given another way to implement ‘change image on button click javascript’.

Also, We can do change image on mouse hover and mouse click event in the below section. After that, showing an example of change multiple image onclick.

JavaScript Change Image onclick Event

    h2 < text-align: center; font-size: 30px; >img#getImage < width: 300px; height: auto; border: 4px solid #a1a1a1; >div  
Change image onClick event here.
    

Here, the whole code of change image with onclick event. So, I am telling you about this code.

Firstly, we created an Html code structure and also, created an image tag and button in the body section.

Under, you can see this button and images code. After that, I have to add the image source path and put an id for getting the source code.

Thus, the Id name is getImage and image source name imageName1.

Afterward, added a script in the below code and apply function. Now, add function in the button tag which is name imagefun with onclick() event.

Now, about in the function getting image src by id using JavaScript document.getElementById().

So then, added an if the condition for change image onclick event. There are define two image source codes and change with onclick event.

Here, showing parts of implement to change multiple images. Firstly, the visible code of image and input button in the below section.

 
Change image onClick event here.
 

Under, This is Html code which we added in the body section as you saw.

Secondly, Displaying JavaScript code after the Html code. You can see above an example.

Additionally, we created some implement for design structure to better show image and button on the front end. So, This is a stylesheet in the below code.

Here, these are some methods to get elements using JavaScript.

Replace Image on Button Click JavaScript

Similarly, you can use for change image on button click using javascript. therefore, we have provided an example in the below area.

 
Change image onClick event here.
 
Image Change 

So, you can change only one line from the Html code. Likewise, replace the input tag to button this is the main code line.

After that, all codes same as above we define script code. you might add a script tag with function.

Replace Picture onclick CSS

Similarly, you can use CSS in our Html code. I already defined style with onclick() event. Also, change image size and button design.

As well as, showing alignment you can copy this code which we provided above area.

Hence, you can add another CSS design that you want on your page. There have many components to relate your CSS style.

How to Change Image on Mouse Click in JavaScript

    h2 < text-align: center; font-size: 30px; >img#getImage < width: 300px; height: auto; border: 4px solid #a1a1a1; >div  
Change image onClick event here.
   

Here, we add a mouse hover event. When you click and want to change image going to on image through the mouse.

Then, automatically change the image on the mouse click event. So, you can use this code

otherwise, added only this line, and remove old input and button code from your editor.

JavaScript Change Multiple Images onclick

Hence, there are we implement two images to change. Therefore, it means you can add more images to change multiple images of onclick events.

Now, given an example for change multiple images using on click event check below code.

As an example, we added another image source with script code. Afterward, displaying multiple images from these codes. You can add more images as you want on your page.

Conclusion

Finally, you saw many methods to JavaScript change image onclick event. Also, if you have any other queries you can ask us. Here this is the main point for change image with onclick event using JavaScript.

Источник