Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The image and text can be changed by using JavaScript functions and then calling the functions by clicking a button. We will do that into 3 sections., in the first section we will create the structure by using only HTML in the second section we will design minimally to make it attractive by using simple CSS and in the third section we will add the JavaScript code to perform the task

Approach

  • HTML Code: In this section, we create the structure plus we will add Bootstrap CDN link for the button design and the fonts.
  • CSS Code: In this section, we will use some basic CSS styling to make it look as normal as possible. 
  • In JavaScript:
    • before() changes image source to “img/photo1.jpg”.
    • before() updates message to “Hii! GeeksforGeeks people”.
    • afterr() changes image source to “img/photo2.jpg”.
    • afterr() updates message to “Bye! GeeksforGeeks people”.
    • Both functions are used document.getElementById for element selection.
    • They modify the src attribute for the image element and the innerHTML property for the message element.
    • The code assumes the existence of HTML elements with IDs 'myImage' and 'message'.

Example: This example shows the implementation of the above-explained approach.

Javascript




function before(){
    document.getElementById('myImage')
    .src="img/photo1.jpg";
    document.getElementById('message')
    .innerHTML="Hii! GeeksforGeeks people";
}
     
function afterr(){
    document.getElementById('myImage')
    .src="img/photo2.jpg";
    document.getElementById('message')
    .innerHTML="Bye! GeeksforGeeks people";
}


HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
          href=
</head>
 
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <h1 id="message">
                    Hii! GeeksforGeeks people
                </h1>
                <img id="myImage" src="img/photo1.jpg">
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
    <div class="button">
        <button class="btn btn-warning" onclick=before();>
            Before
        </button>
        <button class="btn btn-success" onclick=afterr();>
            Afterr
        </button>
    </div>
</body>
</html>


CSS




img{
    height: 500px;
    width: 450px;
}
h1{
    color: darkgreen;
    margin-top: 20px;
    font-family: Comic Sans MS, cursive, sans-serif;
}
.button{
    margin-left: 45%;
}


Output:  

HTML and CSS both are foundation of webpages. HTML is used for webpage development by structuring websites, web apps and CSS used for styling websites and webapps. JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn more about HTML and CSS from the links given below:



Last Updated : 09 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads