Question 407846 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to make a different function happen after every single click on the document in js?

Im trying to make a gaming website in which when the user first signs in, they are greeted by two show lights that shine down on words that say: "WELCOME TO COSMIC GAMES!" I want to make it interactive, so I’ve been trying to make it so that when the user clicks anywhere on the document, it displays one of the words. I already got the first word, the problem, though is trying to call the second function to light up the second word without calling the first function.

This is what I tried:

var clicks = 0;

function playLightSwitch1() {
  clicks = 1;
  audio  = new Audio("lightSwitch.mp3");
  audio.play();
  document.getElementById("welcomeText").setAttribute("class", "glowWelcome");
  document.getElementById("whiteTraingle1").setAttribute("class", "whiteTraingleVisible1");
  document.getElementById("whiteTraingle2").setAttribute("class", "whiteTraingleVisible2"); 
}

if (clicks == 0) {
  document.addEventListener("click", playLightSwitch1);
}
if (clicks = 1) {
  document.removeEventListener("click", playLightSwitch1);
}

the first function worked, but when I clicked again, the first function ran. I just want nothing to happen on the second click. PS: ignore the setAttribute stuff, that’s just changing the text so it glows.

Tags:

2

Answers


  1. 0

    Instead of dynamically adding/removing event handlers, a better approach to achieve your goal would be to have a single event handler which iterates through a set of actions on each click.

    You can place these actions inside an array and execute each one based on an index which increments as the document (or whatever target element you require) is clicked.

    Here’s a working example:

    const welcomeDiv = document.querySelector('.welcomeText');
const triangle1Div = document.querySelector('.whiteTriangle1');
const triangle2Div = document.querySelector('.whiteTriangle2');
const audio = new Audio('lightSwitch.mp3');

const actions = [
  () => welcomeDiv.classList.add('glowWelcome'),
  () => triangle1Div.classList.add('whiteTraingleVisible1'),
  () => triangle2Div.classList.add('whiteTraingleVisible2'),
]

const playLightSwitch = () => {  
  /* removed as audio element not in demo
  audio.currentTime = 0;
  audio.play(); 
  */
  
  let clickIndex = document.body.dataset.clickIndex || 0;
  actions[clickIndex % actions.length]();
  document.body.dataset.clickIndex = ++clickIndex;  
}

document.addEventListener('click', playLightSwitch);
    body {
  font-size: 2rem;
  font-weight: bold;
}

.glowWelcome {
  color: #C00;
}

.whiteTraingleVisible1 {
  color: #0C0;
}

.whiteTraingleVisible2 {
  color: #00C;
}
    <div class="welcomeText">Welcome</div>
<div class="whiteTriangle1">Triangle1</div>
<div class="whiteTriangle2">Triangle2</div>

    A few things to note in this implementation:

    • The use of addEventListener() instead of adding onclick attributes to the DOM.
    • Using classList.add() instead of updating class attributes.
    • Preloading the single audio element when the DOM loads, instead of re-creating it every time the event fires.
    Login or Signup to reply.
  2. 0

    There are some logical problems in your code.

    • The first problem is that you used = in the condition, but it was wrong.
    • Second, you used if conditions outside the scope of function.

    I provide updated code. Hope it helps you.

    var clicks = 0;

function playLightSwitch1() {
    if (clicks === 0) {
        clicks = 1;
        var audio = new Audio("lightSwitch.mp3");
        audio.play();
        document.getElementById("welcomeText").setAttribute("class", "glowWelcome");
        document.getElementById("whiteTraingle1").setAttribute("class", "whiteTraingleVisible1");
        document.getElementById("whiteTraingle2").setAttribute("class", "whiteTraingleVisible2");
        
        document.removeEventListener("click", playLightSwitch1);
    }
}

// Add the event listener initially
document.addEventListener("click", playLightSwitch1);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search