在网页上使用 Inline Vanilla JavaScript 在点击时重复切换 Div 背景颜色

Question

*对于寻求帮助的 reader：前 4 个解决方案中的每一个都对我有用，建议的问题显示了潜力。我选择了 Hunsnul Amand 的代码，因为它允许在 JavaScript 字符串中轻松扩展颜色，并切换下面问题中提到的所有三种颜色。我喜欢这种方式，可以在以后设置额外或随机颜色的可能性。此页面上的其他三个解决方案依赖于 JavaScript 在 CSS 中制作的额外类之间切换的各种片段。 Ranjeep 和 Keith 的代码片段在非常简单明了的代码中使用了它，易于理解。 Jateen 使用 .toggle 和 +++ 元素，它们也很有用。他的代码也很容易理解。 *

感谢您查看此内容。我正在尝试做一些看似非常基本的技能，但我无法找到特定的语法或代码，这些语法或代码会导致网页在点击而不是点击时重复切换圆形 div 的背景颜色使用 Vanilla JavaScript 的按钮。我在这里对 post 尝试了太多次迭代，并通过尝试修改类似项目以满足我的需要而收到各种效果，但无法让 div 的背景颜色切换。

背景：我从一个示例项目开始，通过将背景颜色设置为“none”，您可以让具有红色背景的 div 形状的圆消失。我想将代码更改为允许循环 div 的背景颜色在红色到蓝色之间重复切换的代码，或者至少从红色到 none 然后再返回。

<!-- This document should let you toggle a circle's color between 
    red and blue using vanilla JavaScript, HTML, and CSS. 
    The circle is an HTML div shaped and colored in CSS, 
    and given the toggle function that changes the div's color 
    in JavaScript.
    Biggest need: A JavaScript toggle funciton that alternates 
    the color of a div when the user clicks on the div.-->

Mini Challenge: Disappearing Circles
minichallenge.html!
<!doctype html>
<html>
    <head>
        <title>Learning Javascript</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            #circle {
                width:200px;
                height:200px;
                border-radius:100px;
                background-color:red;
}
        </style>
    </head>
    <body>

        <div id="circle"></div>

        <script type="text/javascript">
           /*original JavaScript Project*/ 
           document.getElementById("circle").onclick=function() {
                        document.getElementById("circle").style.display="none";
                } 
            /* New JS: Purpose: A JavaScript toggle funciton that alternates 
    the color of a div when the user clicks on the div.-
            
            var userClick = document.getElementById("circle").onclick=function() {
            var noDiv = document.getElementById("circle").style.display="blue";
            var redDiv = document.getElementById("circle").style.display="red";
            
            -Pseudocode-: 
            if userClick 
                noDiv
            else redDiv; */
        </script>
   
    </body>
</html>

再次感谢。

Answer 1

您可以在 css 中创建一个 .bg-none class。然后 toggle 即 class 元素的 onclick。我已经更新了代码，请检查

<style>
 .bg-none{
  background-color: transparent !important;
}
</style>

<script>
 document.getElementById("circle").onclick=function() {
                        document.getElementById("circle").classList.toggle("bg-none");
                } 
</script>

Answer 2

这里使用CSS，classList切换方式是最简单的

例如

document.getElementById("circle").onclick=function() {
  document.getElementById("circle").classList.toggle('toggle');
}

#circle {
  width:200px;
  height:200px;
  border-radius:100px;
  background-color:red;
}

#circle.toggle {
  background-color:blue;
}

<div id="circle"></div>

Answer 3

我已将您的背景颜色 CSS 移动到 2 个新的类，当您单击 div 时会切换。我希望这能解决您的问题。

<!doctype html>
<html>
    <head>
        <title>Learning Javascript</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            #circle {
                width:200px;
                height:200px;
                border-radius:100px;
            }
            .bg-red {
                background-color: red;
            }
            .bg-blue {
                background-color: blue;
            }
        </style>
    </head>
    <body>

        <div id="circle" class="bg-red"></div>

        <script type="text/javascript">
           const circleDiv = document.getElementById("circle");
           circleDiv.addEventListener('click', () => {
              circleDiv.classList.toggle('bg-red');
              circleDiv.classList.toggle('bg-blue');
            });
        </script>
   
    </body>
</html>

Answer 4

这是众多解决方案中的一种。在你的脚本中试试这个。

  let i = 0;
  const colors = ["blue", "red", "transparent"];

  document.getElementById("circle").onclick = function () {
    document.getElementById("circle").style.backgroundColor = colors[i];
    i++;
    if (i == colors.length) i = 0;
  };

通过这种方式，您可以向颜色数组中添加任意数量的颜色，并且它会起作用。

在网页上使用 Inline Vanilla JavaScript 在点击时重复切换 Div 背景颜色

Repeatedly Toggle Div Background Color On Click Using Inline Vanilla JavaScript on a Webpage

javascript

toggle

background-color