Javascript onclick change attritube change localstorage Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Javascript onclick change attritube change localstorage without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have this script, where I need it to with onclick on “button “change image from default to 2nd and add a counter / intervel when it runs out change the image to a 3rd image, and when clicked again go back to the 2nd image again and restart the timer. It needs to be saved in local storage, and it should be okay. I found some help this far, but now I cannot get it to change my img src on button onclick. Can anybody help, please?

$(document).ready(function() {

  function aktivereSkift(initImagePath = null, initNextImagePath = null, count = 5) {

    if (initImagePath === null || initNextImagePath === null) {
      return false;
    }
    $(this).attr("src", initImagePath);

    let timer = count * 1000;
    let counter = setInterval(timer, 1000);

    function timer() {
      count = count - 1;

      localStorage.setItem('counter', count);
      if (count <= 0) {
        clearInterval(counter);
        return;
      }
    }
    setTimeout(() => $(this).attr('src', initNextImagePath), timer);

    localStorage.setItem('imagepath', initImagePath);
    localStorage.setItem('nextimagepath', initNextImagePath);
  }

  function loadDefaultValues() {
    const initImagePath = localStorage.getItem('imagepath');
    const initNextImagePath = localStorage.getItem('nextimagepath');
    const counter = localStorage.getItem('counter');
    aktivereSkift(initImagePath, initNextImagePath, counter);
  }

  loadDefaultValues();

  $(".toilet").on("click", () => {
    aktivereSkift('/lib/pictures/toiletBegyndt.png', '/lib/pictures/toiletSlut.png');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="toilet" src="~/lib/pictures/toilet.png" style="height:150px;width:150px;" />

Answer

OK here’s a working snippet, I hope it does what you want. LocalStorage doesn’t work in a snippet (for security), just uncomment all the localStorage things :

function aktivereSkift(
    initImagePath = null,
    initNextImagePath = null,
    count = 5
) {
    console.log("clicked =", this);

    if (initImagePath === null || initNextImagePath === null) {
        return false;
    }
    $(this).attr("src", initImagePath);

    let timer = count * 1000;
    let counter = setInterval(timerLS.bind(this, count), 1000);

    function timerLS() {
        count = count - 1;

        // localStorage.setItem("counter", count); --> Doesn't work in a Stackoverflow snippet

        if (count <= 0) {
            clearInterval(counter);
            return;
        }
    }
    setTimeout(() => $(this).attr("src", initNextImagePath), timer);

    // localStorage.setItem("imagepath", initImagePath);
    // localStorage.setItem("nextimagepath", initNextImagePath);
}

function loadDefaultValues() {
    const initImagePath = localStorage.getItem("imagepath");
    const initNextImagePath = localStorage.getItem("nextimagepath");
    const counter = localStorage.getItem("counter");
    aktivereSkift(initImagePath, initNextImagePath, counter);
}

// loadDefaultValues(); --> LocalStorage doesn't work inside a Stackoverflow snippet

$(".toilet").on("click", function () {
    aktivereSkift.call(
        this,
        "https://picsum.photos/200",
        "https://picsum.photos/200?grayscale"
    );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="toilet" src="https://picsum.photos/200" style="height:150px;width:150px;" />
We are here to answer your question about Javascript onclick change attritube change localstorage - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji