如何使用按钮更改div的背景

Question

我有代码：

<?php
$link = mysqli_connect("localhost", "name", "password", "database");
$query = mysqli_query($link, "SELECT name, city, subject FROM user");

while($result = mysqli_fetch_assoc($query)) {
    $output = '<div class="block" style="background: grey">
          <form method="post">
          <p>Name: '.$result['name'].'</p>
          <p>Subject: '.$result['subject'].'</p>
          <p>City: '.$result['city'].'</p>
          <input type="button" name="grey" value="grey">
          <input type="button" name="red" value="red">
          </form>
          </div>';

    echo $output;
}
?>

如何使用按钮<input type="button" name="grey" value="grey"> 和<input type="button" name="red" value="red"> 更改<div class="block"> 的背景颜色？我试图这样做，但没有任何帮助。谁知道？ P.S.：没关系，用什么（PHP还是JS）。

Answer 1

为此，您可以使用 javascript。我建议在单击按钮时更改 div 的类并在 css 中添加好的规则，或者只是更改元素的样式属性。但是 css 在这里是为了 taht 并且使用类和 css 来做到这一点更干净。您还必须为按钮添加一个 ID，例如 #red 或 #blue 以类为例：

const div = document.querySelector('.block');
const btnRed = document.querySelector('#red');
const btnBlue = document.querySelector('#blue');
    
// Get the click on the button
btnRed.addEventListener('click', () => {
    // Change classes
    div.classList.add('red');
    div.classList.remove('blue');
    // If you don't want to use classes, change the background property
    div.style.backgroundColor = "red";
})

蓝色按钮则相反

如果你有多个 div，我认为你可以这样做：

const div = document.querySelectorAll('.block');
const btnRed = document.querySelector('#red');
const btnBlue = document.querySelector('#blue');
    
// Get the click on the button
btnRed.addEventListener('click', () => {
div.forEach(item => {
    // Change classes
    item.classList.add('red');
    item.classList.remove('blue');
    // If you don't want to use classes, change the background property
    item.style.backgroundColor = "red";
})
})