Dynamically change the background of a cards-CodePudding

I don't know JavaScript, but I want to use the function to change the background color of several cards.

function SetColorRed() {
  document.getElementById("SettingCard").style.background = "red";
}
function SetColorBlue() {
  document.getElementById("SettingCard").style.background = "blue";
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <div >

    <div >
      <!-- Card -->
      <div  id="SettingCard">
        <div >
          <a  href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul  aria-labelledby="SetColorCardBG">
            <div >
              <li><a  onclick="SetColorRed();">Red</a></li>
              <li><a  onclick="SetColorBlue();">Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end card -->
      <!-- ---------------------------------------------------------- -->
      <!-- Card -->
      <div  id="SettingCard">
        <div >
          <a  href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul  aria-labelledby="SetColorCardBG">
            <div >
              <li><a  onclick="SetColorRed();">Red</a></li>
              <li><a  onclick="SetColorBlue();">Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end Card -->
    </div>
  </div>
</div>

I add the cards from phpMyAdmin, and I want each card to have the function of changing the background color, with the BackgroundColor button, the background color changes only to the first card, Is there a way for a javascript code to work for all the cards as I presented in the code above?

CodePudding user response：

You need another selector than ID since IDs need to be unique

Here is a delegated version

window.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.container').addEventListener('click', function(e) {
    const tgt = e.target.closest('a');
    if (tgt && tgt.matches('.dropdown-item')) { 
      tgt.closest('.SettingCard').style.background = tgt.textContent.trim().toLowerCase()
    }
  })
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >
  <div >

    <div >
      <!-- Card -->
      <div >
        <div >
          <a  href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>
          <ul  aria-labelledby="SetColorCardBG">
            <div >
              <li><a >Red</a></li>
              <li><a >Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end card -->
      <!-- ---------------------------------------------------------- -->
      <!-- Card -->
      <div >
        <div >
          <a  href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul  aria-labelledby="SetColorCardBG">
            <div >
              <li><a >Red</a></li>
              <li><a >Blue</a></li>
            </div>
          </ul>
        </div>
        <h4><b>02 / Einteilung MA Arbeitsgruppe / Wohnung</b></h4>
        <p>Einteilung der gleichen MA-Arbeitsgruppen in die gleichen <i>Wohnungen</i> / Häuser 2022-06- 27 in Arbeit</p>
      </div>
      <!-- end Card -->
    </div>
  </div>
</div>

CodePudding user response：

All card ID's need to be unique, therefore you could change your javascript to this:

function SetColorRed(index) {
  document.getElementById("SettingCard-"   index).style.background = "red";
}
function SetColorBlue(index) {
  document.getElementById("SettingCard-"   index).style.background = "blue";
}

Then when you are pulling the cards from the database, add a index to them in the id which increases per card so the ids for each card would now be: id="SettingCard-1" id="SettingCard-2" etc

When you then call your functions, you would pass in that same index on the card: onclick="SetColorBlue(index);"

Let me know if you need any further clarification.