Click event not triggering to update image

Question

Click event not triggering to update image

I'm currently working on a Codepen project where I want to use JavaScript to change the image of an element with the id "chrome". However, my code doesn't seem to be working as expected. Can someone help me troubleshoot and fix this issue? Your assistance is greatly appreciated.

The main goal is to modify the image of an element with the id of "chrome" when it's clicked.

Link to the Codepen

Below is the JavaScript code snippet that I have been using:

function changeImage() {

    if (document.getElementById("chrome").src == "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png") 
    {
        document.getElementById("chrome").src = "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png";
    }
    else 
    {
        document.getElementById("chrome").src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png";
    }
}

Essentially, I want to replace the chrome icon with an X image when it's clicked. Any insights on how to achieve this would be really helpful.

javascript html css

Answer 1

Answer №1

Modify the tag from

<img onclick()="changeImage()">

to

<img onclick="updateImg()">

Answer 2

Modify the tag from

<img onclick()="changeImage()">

to

<img onclick="updateImg()">

Answer 3

Answer №2

To start, modify the

<img onclick()="changeImage()"

to <img onclick="changeImage()". This adjustment will not resolve your issue if you aim to implement it for multiple users, as every chrome image necessitates its individual ID for the function to operate on various logos.

Answer 4

To start, modify the

<img onclick()="changeImage()"

to <img onclick="changeImage()". This adjustment will not resolve your issue if you aim to implement it for multiple users, as every chrome image necessitates its individual ID for the function to operate on various logos.

Answer 5

Answer №3

You made an error in your code. In the inline onclick definition, you wrote:

<div onclick()="changeImage()"></div>

The correct syntax should be:

<div onclick="changeImage()"></div>

Check out the snippet below:

function changeImage() {

        if (document.getElementById("chrome").src == "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png") 
        {
            document.getElementById("chrome").src = "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png";
        }
        else 
        {
            document.getElementById("chrome").src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"
        }
    }

img {
height: 25px;
      padding-right: 4px;
}
li {
margin: 4px;
      clear: both;
}
li:nth-child(odd) { 
background: #f0f0f5; 
}

<ul class="list-unstyled">
<li>Username<span class="pull-right">
          <img onclick="changeImage()" id ="chrome" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img id="firefox" src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
          <img id="ie" src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>

</ul>

Answer 6

You made an error in your code. In the inline onclick definition, you wrote:

<div onclick()="changeImage()"></div>

The correct syntax should be:

<div onclick="changeImage()"></div>

Check out the snippet below:

function changeImage() {

        if (document.getElementById("chrome").src == "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png") 
        {
            document.getElementById("chrome").src = "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png";
        }
        else 
        {
            document.getElementById("chrome").src = "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"
        }
    }

img {
height: 25px;
      padding-right: 4px;
}
li {
margin: 4px;
      clear: both;
}
li:nth-child(odd) { 
background: #f0f0f5; 
}

<ul class="list-unstyled">
<li>Username<span class="pull-right">
          <img onclick="changeImage()" id ="chrome" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right"><img id="firefox" src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
          <img id="ie" src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>

</ul>

Answer 7

Answer №4

Replace the function call from onclick()="changeImage()" to onclick="changeImage()". Make sure to remove the "()" brackets in the onclick function.

Answer 8

Replace the function call from onclick()="changeImage()" to onclick="changeImage()". Make sure to remove the "()" brackets in the onclick function.

Answer 9

Answer №5

Your HTML code contains a syntax error. Remember that onclick is an HTML attribute, not a function, so it should not be called with parentheses like a function.

You only add parentheses to the value of the onclick attribute when using JavaScript syntax.

To correct this, your code should look like this:

<img onclick="changeImage()">

To see a working version of your code pen, visit: https://codepen.io/pahund/pen/XgWVQx

Answer 10

Your HTML code contains a syntax error. Remember that onclick is an HTML attribute, not a function, so it should not be called with parentheses like a function.

You only add parentheses to the value of the onclick attribute when using JavaScript syntax.

To correct this, your code should look like this:

<img onclick="changeImage()">

To see a working version of your code pen, visit: https://codepen.io/pahund/pen/XgWVQx

Click event not triggering to update image

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Guide on creating a logarithmic-based bar rating system

Tips for storing a JSON file with GridFS

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

Tips for aligning a div within a flexbox to the bottom position

What are some ways to implement dangerouslySetInnerHTML in conjunction with read-more-react from npm?

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

Pass information submitted through a JavaScript prompt to an expressjs endpoint

What is the best way to implement pushstate degradation – using backbone.history or history.js?

Executing asynchronous functions in Angular using ng-click

The received URL from the POST request in React is now being opened

Modifying the color of the active column

When attempting to open a link in a new tab, the ng-click function fails to execute

Can an Angular application be developed without the use of the app-root tag in the index.html file?

Updating Rails record using Ajax with select_tag and onchange functionality

What is the reason behind the continual change in the background image on this website?

Tips for initiating a browser file download using JavaScript, ensuring that the download is only carried out if the web service responds with

Utilizing a Node.js web server in conjunction with an Apache Cordova Application

Is Window.navigator malfunctioning on different browsers in Mac OS?

Storing a collection of images simultaneously in Firebase Storage and saving their URLs in a Firestore document using Firebase v9

Sorting through JSON data obtained through YQL