设置
加载时的背景颜色，然后单击时在 3 种颜色之间更改

发布于 2025-01-13 02:11:38 字数 1766 浏览 5 评论 0原文

我试图在页面加载时将 div 的背景颜色设置为蓝色。然后，我想在单击时循环显示 3 种不同的颜色（红色、黄色和绿色）并保留所选颜色。下面是我的示例代码。您可以看到，由于加载时设置为蓝色，单击时前两个不会执行任何操作。我没有在加载时将第三个 div 加载为蓝色，以显示我希望单击后行为如何执行。任何帮助表示赞赏。

    function colorload() {
    
        var element = document.getElementById("day1");
        element.style.backgroundColor = "blue";    
    
        var element = document.getElementById("day2");
        element.style.backgroundColor = "blue";    
     
    }
    
    function changeColor(e, numb) {
        var color = e.className;
        e.className = (color == 'red') ? 'amber' : 
                      (color == 'amber') ? 'green' : 
                      (color == 'green') ? 'red' : 
                      'undefined'; 
    
    }

    <style onload="colorload()">
    .red {background-color:red;}
    .amber {background-color:yellow;}
    .green {background-color:green;}
    
    
    div {
        width:200px;
        height:100px;
        margin:50px;
        text-align: center;
        vertical-align: middle;
        line-height: 90px;
        font-weight:bold;
        user-select: none;
        cursor:pointer;
        }
</style>

  
    
    <html>
        <body>
            <div class="red" id="day1" onclick="changeColor(this, 1)">One</div>
            <div class="green" id="day2" onclick="changeColor(this, 2)">Two</div>
            <div class="amber" id="day3" onclick="changeColor(this, 3)">Three</div>
        </body>    
    </html>

原文

I am trying to set the background color of a div upon page load to blue. Then I want to cycle through 3 different colors (red, yellow, and green) when clicked and have the selected color remain. Below is my sample code. You can see the first two do nothing when clicked due to setting the blue color on load. I didn't load the 3rd div to blue on load to show how I want the behavior to act once clicked. Any help is appreciated.

    function colorload() {
    
        var element = document.getElementById("day1");
        element.style.backgroundColor = "blue";    
    
        var element = document.getElementById("day2");
        element.style.backgroundColor = "blue";    
     
    }
    
    function changeColor(e, numb) {
        var color = e.className;
        e.className = (color == 'red') ? 'amber' : 
                      (color == 'amber') ? 'green' : 
                      (color == 'green') ? 'red' : 
                      'undefined'; 
    
    }

    <style onload="colorload()">
    .red {background-color:red;}
    .amber {background-color:yellow;}
    .green {background-color:green;}
    
    
    div {
        width:200px;
        height:100px;
        margin:50px;
        text-align: center;
        vertical-align: middle;
        line-height: 90px;
        font-weight:bold;
        user-select: none;
        cursor:pointer;
        }
</style>

  
    
    <html>
        <body>
            <div class="red" id="day1" onclick="changeColor(this, 1)">One</div>
            <div class="green" id="day2" onclick="changeColor(this, 2)">Two</div>
            <div class="amber" id="day3" onclick="changeColor(this, 3)">Three</div>
        </body>    
    </html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与风相奔跑 2025-01-20 02:11:38

我更新了您的 html 和 JS 代码，
我在这个例子中使用了 .style 而不是 css 类，如果您对使用类感兴趣，可以参考我的评论和 MDN 上的这个链接非常简单。

Html 文件

<html>
    <body>
        <!-- i used .btn class and data-col to play with indexes -->
        <div class="btn" id="day1" data-col="0" onclick="changeColor(event)">One</div>
        <div class="btn" id="day2" data-col="0" onclick="changeColor(event)">Two</div>
        <div class="btn" id="day3" data-col="0" onclick="changeColor(event)">Three</div>
    </body>    
</html>

Js 文件

let divs;
let colors = ['blue', 'red', 'green' , 'yellow'];

// when loading the page, we are catching all divs having the class "btn"
// to render it with Blue background
document.body.onload = function() {
    divs = document.querySelectorAll('.btn');
    divs.forEach(btn => {
       const selectedColorIndex = btn.dataset.col;
       btn.style = 'background:'+colors[selectedColorIndex];
    });
};


function changeColor(e) {
    // catch the clicked div which passed by the "event" value in the html file
    let divElement = e.target;

    // get data-col value and convert it to number with (+)
    const selectedColorIndex = +divElement.dataset.col;

    // check if we have a next color or get the red index
    const nextSelectedColor =  selectedColorIndex +1 >= colors.length?1:selectedColorIndex+1;

    // update data-col with the next new color index to conserve the iteration (loop)
    divElement.dataset.col = nextSelectedColor;

  // if you want to use classes you can access with 
  // .classList.add(..) and .classList.remove(..) OR 
  // .classList.toggle(..)
    divElement.style = 'background:'+ colors[nextSelectedColor]; // update the element background with selected color
}

您还可以重播相同的代码或更新：这里是 JSFiddle 中的完整重播代码我制作它是为了使其更容易。

i made an update to your html and JS codes,
i used in this example .style instead of css classes, if you are interested on using classes you can refer to my comments and this link on mdn it's pretty simple.

Html file

<html>
    <body>
        <!-- i used .btn class and data-col to play with indexes -->
        <div class="btn" id="day1" data-col="0" onclick="changeColor(event)">One</div>
        <div class="btn" id="day2" data-col="0" onclick="changeColor(event)">Two</div>
        <div class="btn" id="day3" data-col="0" onclick="changeColor(event)">Three</div>
    </body>    
</html>

Js file

let divs;
let colors = ['blue', 'red', 'green' , 'yellow'];

// when loading the page, we are catching all divs having the class "btn"
// to render it with Blue background
document.body.onload = function() {
    divs = document.querySelectorAll('.btn');
    divs.forEach(btn => {
       const selectedColorIndex = btn.dataset.col;
       btn.style = 'background:'+colors[selectedColorIndex];
    });
};


function changeColor(e) {
    // catch the clicked div which passed by the "event" value in the html file
    let divElement = e.target;

    // get data-col value and convert it to number with (+)
    const selectedColorIndex = +divElement.dataset.col;

    // check if we have a next color or get the red index
    const nextSelectedColor =  selectedColorIndex +1 >= colors.length?1:selectedColorIndex+1;

    // update data-col with the next new color index to conserve the iteration (loop)
    divElement.dataset.col = nextSelectedColor;

  // if you want to use classes you can access with 
  // .classList.add(..) and .classList.remove(..) OR 
  // .classList.toggle(..)
    divElement.style = 'background:'+ colors[nextSelectedColor]; // update the element background with selected color
}

You can also replay the same codes or update: it here is the full replayed code in JSFiddle which i made to make it more easy.

回复收藏 0 原文

~没有更多了~