Is there a way to repeatedly toggle between two different versions of an image each time it's clicked?

I am currently working on a basic project using HTML, CSS, and JS. My goal is to create a simple light bulb that can be turned on and off. Right now, I have both the images in the same directory, and I've managed to get it to turn off when clicked. However, once it's off, I can't click it again to turn it back on.

I want the ability to toggle the light switch repeatedly, turning it off and on as many times as I want. Do you have any suggestions or ideas? I'm trying to figure this out without relying on tutorials but I'm stuck.

Below is the code I have so far:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Switch</title>
    <link rel="stylesheet" href="style.css">
</head>
<body style="background-color: black;">
    <img src="light-on.png" onclick="this.src='light-off.png'">
    <img src="light-off.png" onclick="this.src='light-on.png'">
</body>
</html>

Answer №1

Your method of creating a functional code works, but it lacks efficiency and elegance. You can simplify it by using just one img element and changing its source accordingly.

<img src="light-on.png" class="image--switchable" data-light="on">

Instead of using onclick in the img tag, consider using an event listener for a cleaner solution.

let alternation = {
  on: "off",
  off: "on"
}

// Assuming you have multiple images, this code utilizes querySelectorAll and forEach.
document.querySelectorAll(".image--switchable").forEach(img => {
   img.addEventListener("click", () => {
      let light = img.dataset.light;
      img.src = `light-${alternation[light]}.png`;
      img.dataset.light = alternation[light];
   })   
})

// If you only have one image, you can use:
// document.querySelector(".image--switchable").addEventListener...

Answer №2

To switch the image, Javascript must be utilized.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can a website use to immediately recognize when JavaScript has been disabled?

Typically, when a webpage loads and Javascript is disabled in the browser, we use the <noscript> tag to display a warning prompting the user to enable Javascript. Contrary to this standard practice, Facebook notifies users of disabled Javascript even ...

How can I effectively display the city weather information that I have chosen from the drop-down menu?

Is there a way to display city weather information that I have selected from a drop-down menu using JSON? I am able to retrieve the city using jQuery, but I am not sure how to load the weather data for that city. Any guidance on this would be appreciated ...

What is the best way to ensure the checkbox functions correctly in this specific situation?

I am utilizing PHP, Smarty, and jQuery in the development of my website. Currently, I am working on implementing checkboxes within a Smarty template. Below is a snippet of my Smarty code related to checkboxes: <table cellpadding="5" cellspacing="0" bor ...

"Selectize component in Vue automatically closes the dropdown menu once an item is

Having trouble developing a straightforward selectize vue component. The issue arises when I select an option while using v-model within the component; the dropdown closes automatically. However, when I remove the v-model, the dropdown remains open until t ...

Issue: Unable to extract the 'title' property from '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is not defined (Next.js Chat App)

Currently facing an issue with the error message "Cannot destructure property 'title' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is undefined" while developing a chat application using Next.js and Solidity. Desp ...

What is the best way to navigate to a different page when scrolling in React Router?

I am working on a design that includes a landing page with 100vh and 100vw dimensions. I want it to transition into another page as the user scrolls down. How can I achieve this using React hooks and React Router? Any guidance or suggestions would be high ...

Tips for incorporating animation when opening a Jquery SimpleModal

The SimpleModal website features an animation-enabled example with the following sequence: 1. Display modal only 2. Fade in the overlay The code snippet for this animation is as follows: $("#the-div").modal({ onOpen: function (dialog) { dialog.overl ...

Android Webview onLoad function provides incorrect height information

When I load a file:// URL into the webview, issues with height calculation arise. Instead of using WRAP_CONTENT, I calculate the height in javascript during the onPageFinished event in Android. However, about 2 out of 5 times, the javascript reports an inc ...

Connect ngx-time picker to form input in Angular

Currently, I have successfully implemented Angular material date pickers in my project, however, I am facing a challenge with integrating time pickers as it is not natively supported by Angular Material for version 8. To address this issue, I am utilizing ...

What is the best way to share data between Angular controllers using a localhost API connection?

When a button on my tr is clicked, I want to transfer the data within that tr to the next ng-controller. I've searched for a solution but it seems like I need to create an angular.module and connect the controllers together. Would it work with a local ...

Difficulty encountered when loading JSON data using the getJSON function

When I open the JSON file in my web browser and input this code into the console: var p = document.getElementsByTagName('pre'); for(i=0; i < p.length; i++) { var data = JSON.parse(p[i].innerHTML); var pc = data.postalcodes; for (va ...

What happens to PHP echos when you send a post request to a web page?

I have a question that may seem silly to some. As someone who is relatively new to PHP, I am attempting to view echo statements from a page that I am posting to but not actually navigating to. Directly accessing the page's URL without the necessary po ...

Setting up a variable that has been previously declared outside of the jQuery $.getJSON callback function

When my script executes an Ajax request using jQuery, the data it receives is json_encoded by a server-side script written in PHP. This JSON data is then stringified and parsed with jQuery to create a recordCollection. Each item in the recordCollection is ...

The header and footer elements must be included along with a main div to house the content on the webpage

I am currently working on building a website using HTML and CSS. I would like to create an index.php file that calls all the different parts of the page. For example, I want to include the header and footer, and also have the ability to replace content wit ...

Tips for passing multiple values with the same key in Axios as parameters

I need to develop a function that allows users to select multiple categories and subcategories, then send their corresponding ids as a query string using Axios. For example, if a user selects category IDs 1 and 2, along with subcategory IDs 31 and 65, the ...

What is the most effective method to access a JSON object?

Here is a JSON response in the following format: [ { "0": [ { "tVote": "32" } ], "1": [ { "choice": "Barcelona", "tbAns": "2" }, { "choice": "Bayern Muen ...

Is it possible to modify this code to accept multiple IDs at once?

I'm attempting to create a form in JavaScript where, upon entering the necessary details and clicking submit, the user's email client opens with the information pre-filled for easy sending. However, I am facing challenges as my code involves mult ...

Iterate through three images using the `background-image` property in my Div

Is there a way to modify a code that loops through images based on an Img source in order to work with the "background-image" property of a div? HTML <div id="section2"></div> CSS #section2 { background-image: 'url(..images/banner1.jp ...

Is it possible to add a jQuery-generated element to pure vanilla JavaScript?

I am facing a challenge in creating a new notification div when an event is triggered. Ideally, I would normally achieve this using jQuery by utilizing something like $("myDiv").append(newDiv). However, in this case, the item selector to which the new div ...

A row in the table is preventing new content from being added

Here is the code snippet that successfully adds text from a modal window into a textarea: <script type="text/javascript"> var plusbutton_clicked; function insertQuestion(form) { var $tbody = $('#qandatbl > tbody'); var $tr = ...