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);

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.