Question 63820 in PhpMyAdmin Question posted in
The official documentation can be found here.

Dynamically change the background of a cards – Phpmyadmin

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 class="container">
  <div class="container-fluid">

    <div class="row mt-3">
      <!-- Card -->
      <div class="SettingCard" id="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item" onclick="SetColorRed();">Red</a></li>
              <li><a class="dropdown-item" 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 class="SettingCard" id="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item" onclick="SetColorRed();">Red</a></li>
              <li><a class="dropdown-item" 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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 class="container">
  <div class="container-fluid">

    <div class="row mt-3">
      <!-- Card -->
      <div class="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>
          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item">Red</a></li>
              <li><a class="dropdown-item">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 class="SettingCard">
        <div class="dropdown col-sm">
          <a class="dsh253" href="#" role="button" id="SetColorCardBG" data-bs-toggle="dropdown" aria-expanded="false">
            BackgroundColor
          </a>

          <ul class="dropdown-menu dsh250" aria-labelledby="SetColorCardBG">
            <div class="dshcd250">
              <li><a class="dropdown-item">Red</a></li>
              <li><a class="dropdown-item">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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search