Solution 1 :

This is really just an example, but it will work:

let buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function(){
       buttons[i].style.background = '#53E247';
       for (let j = 0; j < buttons.length; j++) {
           if (buttons[i].id !== buttons[j].id) {
               buttons[j].style.background = "unset";

Solution 2 :

Firstly, you didn’t add specific class for buttons, and you didn’t add forEach loop for catch whole elements. You can change code like this:

    <div><button id="1" class="changeColor"> 1</button></div>
    <div><button id="2" class="changeColor">2</button></div>
    <div><button id="3" class="changeColor">3</button></div>
    <div><button id="4" class="changeColor">4</button></div>
    <div><button id="5" class="changeColor">5</button></div>
    <div><button id="6" class="changeColor">6</button></div>
    <div><button id="7" class="changeColor">7</button></div>
    <div><button id="8" class="changeColor">8</button></div>
    <div><button id="9" class="changeColor">9</button></div>
    <input type="submit" class="submit" value="Start set color" onclick="subFunc()">

    let btn = document.querySelectorAll('.changeColor');

    function subFunc(){
        e = event || window.event;

        btn.forEach( (it,i) => {
       = '#53E247';

Solution 3 :

You can select your buttons (you don’t need ids) with :

document.querySelectorAll("form div button").forEach((e) => {});

Or you can use a class applied on buttons :

for (let e of document.getElementsByClassName("yourClass")) {}

Or you can make a single event listener by selecting the parent. In the snippet below, I add or remove the background-color by adding or removing a class :

document.getElementById("container").addEventListener("click", () => {
  if ( == "BUTTON") {
    if (document.querySelector("#container")) {
.bg-green {
  background-color: #53E247;
<div id="container">

Solution 4 :

It is generally not a good idea to use inline event handlers.

Use event delegation. The snippet uses a class for the buttons to click and classList.toggle to toggle on clicking them.

document.addEventListener(`click`, handle);

function handle(evt) {
  if ( &&
      !isNaN( && === `BUTTON` ) {
button {
  margin: 3px;
button.clicked {
  background-color: #53E247;
  <button id="1">1</button>
  <button id="2">2</button>
  <button id="3">3</button>
  <button id="4">4</button>
  <button id="5">5</button>
  <button id="6">6</button>
  <button id="7">7</button>
  <button id="8">8</button>
  <button id="9">9</button>

Problem :

I want know how can I pass id by variable is it possible or I have get every button id separately ?
Also I want to know how can implement onClick color changing one button at single time rest should have color prop of none.

const btn = document.getElementById('1');

btn.addEventListener('click', function hadleclick() { = '#53E247';
  <div><button id="1">1</button></div>
  <div><button id="2">2</button></div>
  <div><button id="3">3</button></div>
  <div><button id="4">4</button></div>
  <div><button id="5">5</button></div>
  <div><button id="6">6</button></div>
  <div><button id="7">7</button></div>
  <div><button id="8">8</button></div>
  <div><button id="9">9</button></div>
  <input type="submit" class="submit" value="Submit" onclick="subFunc()">


Comment posted by querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript

If you use a class, you should use