change the background color of each individual button with js

Question

I want to create 31 buttons with the option to change the background color of each individual button. The problem is when I try to change the color of button 2, it changes the color of button 1.

What i am trying to do is in the picture Cross.

function myFunctionRed()
  {
    document.getElementById("myBtn").style.background = "green";
  }
  function myFunctionGreen()
  {
    document.getElementById("myBtn").style.background = "yellow";
  }
  function myFunctionBlue()
  {
    document.getElementById("myBtn").style.background = "red";
  }
// Get the modal
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function()
{
  modal.style.display = "block";
}
btn2.onclick = function()
{
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function()
{
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event)
{
  if (event.target == modal)
  {
    modal.style.display = "none";
  }
}

body
{
  font-family: Arial, Helvetica, sans-serif;
}
.modal
{
  display:none;
  background:#efefef;
  border:1px solid black;
  width:240px; height:100px;
}
.close
{
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus
{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
#myBtn, #myBtn2
{
  background-color:gray;
  border: 0.5px solid black;
  color: white;
  width:30px;
  height:30px;
  border-radius: 10%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
#demo1
{
  background-color:green;
  border: none;
  color: white;
  width:60px;
  height:60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
#demo2
{
  background-color:yellow;
  border: none;
  color: white;
  width:60px;
  height:60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
#demo3
{
  background-color:red;
  border: none;
  color: white;
  width:60px;
  height:60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

  <button id="myBtn">1</button>
  <button id="myBtn2">2</button>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <button id="demo1" onclick="myFunctionRed()">Red</button>
      <button id="demo2" onclick="myFunctionGreen()">Green</button>
      <button id="demo3" onclick="myFunctionBlue()">Blue</button>
    </div>
  </div>

Answer 1

All of your handler functions are looking for element with id myBtn which is the first button. You will need to get the dom event inside of the clickhandler, resolve the targetElement and then set the style on that element.

See this question: JavaScript - onClick to get the ID of the clicked button

Also see these docs: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Answer 2

it changes the color of button 1

This is because you are explicitly mentioning to button 1 id only. Instead of id go with class and then use querySelectorAll. Add event listener to the buttons & from that get the target means get the button which was clicked.

Create single function to change the color & pass the color as parameter of the function.

var modal = document.getElementById("myModal");
let targetBtn;
document.querySelectorAll('.myBtn').forEach((item) => {
  item.addEventListener('click', (e) => {
    modal.classList.toggle('hide');
    targetBtn = e.target;

  })
})

function myFunction(color) {
  if (targetBtn) {
    targetBtn.style.background = color;
  }
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  display: block;
  background: #efefef;
  border: 1px solid black;
  width: 240px;
  height: 100px;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.myBtn {
  background-color: gray;
  border: 0.5px solid black;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 10%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#demo1 {
  background-color: red;
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#demo2 {
  background-color: green;
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

#demo3 {
  background-color: blue;
  border: none;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.hide {
  display: none;
}

<button class="myBtn">1</button>
<button class="myBtn">2</button>
<div id="myModal" class="modal hide">
  <div class="modal-content">
    <span class="close">&times;</span>
    <button id="demo1" onclick="myFunction('red')">Red</button>
    <button id="demo2" onclick="myFunction('green')">Green</button>
    <button id="demo3" onclick="myFunction('blue')">Blue</button>
  </div>
</div>

Answer 3

Hi try to use my code :

// variable to track which button is activated
var activeButton = null;

function myFunctionRed() {
  document.getElementById(activeButton).style.background = "green";
}
function myFunctionGreen() {
  document.getElementById(activeButton).style.background = "yellow";
}
function myFunctionBlue() {
  document.getElementById(activeButton).style.background = "red";
}
// Get the modal
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
  // will make sure to return the color to gray
  btn2.style.backgroundColor = "gray";
  // set the value to myBtn
  activeButton = "myBtn";
};
btn2.onclick = function() {
  modal.style.display = "block";
  // will make sure to return the color to gray
  btn.style.backgroundColor = "gray";
  // set the value to myBtn2
  activeButton = "myBtn2";
};
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};