时间戳

首页 > 解决方案 > 单击时如何使按钮更改颜色（html，CSS，JavaScript）

javascript - 单击时如何使按钮更改颜色（html，CSS，JavaScript）

问题描述

我设置了 3 个按钮，想知道如何让它们在点击时改变颜色。“是”应该是绿色的“否”应该是红色的“也许”也应该是红色的。

<!DOCTYPE html>

<html lang="en">
<head>
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap"
    rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>Trivia!</title>

  <script></script>

</head>
<body>

<div class="jumbotron">
  <h1>Trivia!</h1>
</div>

<div class="container">

  <div class="section">
    <h2>Part 1: Multiple Choice</h2>
    <hr>

    <h3>Do you love me?
      <h3>

        <button id="q1button">Yes</button>
        <button id="q2button">No</button>
        <button id="q3button">Maybe</button>

  </div>

</div>
</body>
</html>

标签： javascripthtmlcssbuttoncolors

解决方案

你可以使用javascript来做到这一点。我认为这样的事情适合你。

<!DOCTYPE html>
<html>

<body>

    <div class="jumbotron">
        <h1>Trivia!</h1>
    </div>

    <div class="container">

        <div class="section">
            <h2>Part 1: Multiple Choice</h2>
            <hr>

            <h3>Do you love me?<h3>
                
            <button id="q1button" onclick="this.style.background = 'green'">Yes</button>
            <button id="q2button" onclick="this.style.background = 'red'">No</button>
            <button id="q3button" onclick="this.style.background = 'red'">Maybe</button>

        </div>

    </div>
</body>
</html>

编辑：

解决所有这些问题。

<!DOCTYPE html>
<html>

<body>
    <div class="jumbotron">
        <h1>Trivia!</h1>
    </div>
    <div class="container">
        <div class="section">
            <h2>Part 1: Multiple Choice</h2>
            <hr>
            <h3>Do you love me?<h3>
            <button id="q1button" onclick="changeBg(this);">Yes</button>
            <button id="q2button" onclick="changeBg(this);">No</button>
            <button id="q3button" onclick="changeBg(this);">Maybe</button>
        </div>
    </div>
    <script>
        function changeBg(button){
            if(button.id == "q1button"){
                button.style.background = "green";
                document.getElementById("q2button").style.background = "transparent";
                document.getElementById("q3button").style.background = "transparent";
            }
            else if(button.id == "q2button"){
                button.style.background = "red";
                document.getElementById("q1button").style.background = "transparent";
                document.getElementById("q3button").style.background = "transparent";
            }
            if(button.id == "q3button"){
                button.style.background = "red";
                document.getElementById("q1button").style.background = "transparent";
                document.getElementById("q2button").style.background = "transparent";
            }
        }
    </script>
</body>
</html>

推荐阅读