Refering to a live demo codepen at https://codepen.io/Maximusssssu/pen/MWrzpav. May I ask how can I toggle between 2 css class that is red square and red triangle represented below? When user click on triangle button, it will represent a triangle when grid is clicked and when click on square button it will be a square on grid when user click on it. Thank you for reading and have a nice day :)

  <button onclick="triangle()">triangle</button>
  <button onclick="square()">square</button>



.red-dot {
  position:absolute; 
  width:15px; 
  height:15px;
  background:red;
  pointer-events: none;
}
.red-triangle {
  position:absolute; 
  width:15px; 
  height:15px;
  background:red;
  pointer-events: none;
  clip-path: polygon(50% 0, 100% 100%, 0 100%)
}

CodePudding user response：

Here you go:

let classNameValue = "red-dot"

function triangle(){
  classNameValue = "red-triangle"
}

function square(){
  classNameValue = "red-dot"
}

I just created a global variable and I set it to the className value you need, and then I just set the newDot.classList to the variable value.

function showCoords(event) {
    // Calculate the position of the nearest grid intersection:

   var x = (Math.floor(event.clientX/50) * 50) 2 ;
   var y = (Math.floor(event.clientY/50) * 50) 2 ;
    var coords = "X coordinates: "   x   ", Y coordinates: "   y;
    document.getElementById('showCoords').innerHTML = coords;
    // Create a new red dot:
    let newDot = document.createElement('span');
    // Add the CSS class:
    newDot.className = classNameValue;
    // Set coordinates:
    newDot.style.top = y   'px';
    newDot.style.left = x   'px';
    // Add the new element to the end of the body:
    document.body.appendChild(newDot);
  }