JavaScript; 背景颜色更改并使用相同的输入更改回

Question

I made this code, but it wont work. 我做了这段代码，但它行不通。 Would be nice if some one can help me. 如果有人可以帮助我会很好。 :) :)

I've tried many things already, but it always didn't worked. 我已经尝试了很多事情，但始终没有奏效。

I want it to be so that you press the button and the background gets light, when you press it again it goes back to the origin. 我希望它是这样，以便您按下按钮并且背景变亮，再次按下时它又回到原点。

<html>
<head>
    <title>test</title>
    <style>
    .darkerBG {
        background: #282828;
    }
    .lighterBG {
        background: white;
    }
    </style>
</head>
<body class="darkerBG" id="bdbackground">

<script language="javascript" type="text/javascript">
function changeColor() 
{
    var bdBackground = document.getElementById('bdbackground').class;

    if (document.getElementById('bdbackground').class == 'darkerBG')
    {
        document.getElementById('bdbackground').class == 'lighterBG';
    } else if (document.getElementById('bdbackground').class == 'lighterBG')
    {
        document.getElementById('bdbackground').class = 'darkerBG';
    }
}
</script>

<input type="button" class="button" value="test" onclick="changeColor()">

</body>
</html>

Answer 1

You must use className rather than class . 您必须使用className而不是class 。 class is not a property on a DOM element . class不是DOM元素的属性。

Answer 2

You need to modify the className property on the element rather than class . 您需要修改元素而不是class的className属性。

For example: 例如：

document.getElementById('bdbackground').className = 'darkerBG';

Answer 3

In JavaScript, the correct property is .className instead of .class . 在JavaScript中，正确的属性是.className而不是.class 。 You also have an erroneous == in your assignment of document.getElementById('bdbackground').class == 'lighterBG'; 您在分配document.getElementById('bdbackground').class == 'lighterBG';也有错误的== document.getElementById('bdbackground').class == 'lighterBG';

Alternatively, consider using .classList.contains(...) . 或者，考虑使用.classList.contains(...) 。

 <html> <head> <title>test</title> <style> .darkerBG { background: #282828; } .lighterBG { background: white; } </style> </head> <body class="darkerBG" id="bdbackground"> <script language="javascript" type="text/javascript"> function changeColor() { var myElement = document.getElementById('bdbackground'); if (myElement.className == 'darkerBG') { myElement.className = 'lighterBG'; } else if (myElement.className == 'lighterBG') { myElement.className = 'darkerBG'; } } </script> <input type="button" class="button" value="test" onclick="changeColor()"> </body> </html>

Answer 4

I have created a working solution for what you are trying to achieve. 我为您要实现的目标创建了一个可行的解决方案。 I created a JSBin with the solution and improved your code slightly: http://jsbin.com/botasehoci/1/edit?html,css,js,output 我使用该解决方案创建了一个JSBin，并稍微改进了您的代码： http ://jsbin.com/botasehoci/1/edit?html,css,js, output

(Edit, just noticed Quantastical answered with pretty much all the issues I brought up in the time it took me to to post this answer :/ ) （编辑，只是注意到Quantastical回答了我花了很多时间才提出的所有问题：/）

The main issues were that: 主要问题是：

You needed to include the ID bdbackground on the button element. 您需要在按钮元素上包含ID bdbackground 。
You needed to include the initial class name on the button element ("lighterBG") 您需要在按钮元素上包含初始类名称（“ lighterBG”）
The correct way to reference the value of the class attribute is using className not class 引用class属性值的正确方法是使用className而不是class
For the first condition in the if statement, you used an comparison instead of an assignment operator ( ie x == a instead of x = a ) 对于if语句中的第一个条件，您使用了比较而不是赋值运算符（即x == a而不是x = a ）

This is the updated JS: 这是更新的JS：

function changeColor() {
    var button = document.getElementById('bdbackground');
    var buttonClass = button.className;

    if (buttonClass === 'darkerBG') {
        button.className = 'lighterBG';
    } else if (buttonClass === 'lighterBG') {
        button.className = 'darkerBG';
    }
}

This is the updated HTML for the button element: 这是button元素的更新的HTML：

 <input id="bdbackground" type="button" class="lighterBG" value="test" onclick="changeColor()">

Answer 5

.classList() .classList（）

Use .classList.add() and .classList.remove() to toggle classes. 使用.classList.add()和.classList.remove()切换类。 You could use .classList.toggle() but in certain circumstances the toggled states will get discombobulated if there is more than one toggler used at the same time. 您可以使用.classList.toggle()但是在某些情况下，如果同时使用多个切换器，切换状态将变得混乱。

Basic Flow 基本流程

When the function changeColor() is called: 调用函数changeColor() ：

Get a reference to the body with getElementById() 使用getElementById()获取对正文的引用
Find out if the body has a class called .darkerBG by using .classList.contains() 通过使用.classList.contains()来查找主体是否具有名为.darkerBG的类
If it does have .darkerBG as a class: 如果确实有.darkerBG作为类：
- Remove the class and ... 删除课程并...
- add the class .lighterBG 添加类.lighterBG
Otherwise: 除此以外：
- Remove the class .lighterBG and ... 删除类.lighterBG并...
- add the class .darkerBG 添加类.darkerBG

SNIPPET SNIPPET

 function changeColor() { var bG = document.getElementById('bdbackground'); if (bG.classList.contains('darkerBG')) { bG.classList.remove('darkerBG'); bG.classList.add('lighterBG'); } else { bG.classList.add('darkerBG'); bG.classList.remove('lighterBG'); } }

 .darkerBG { background: rgba(20, 10, 20, .6); transition: all 2s; } .lighterBG { background: rgba(200, 100, 200, .6); transition: all 2s; }

 <html> <head> <title>test</title> </head> <body class="darkerBG" id="bdbackground"> <input type="button" class="button" value="test" onclick="changeColor()"> </body> </html>

Answer 6

Instead of using class you can use className or classList with add() / remove() or toggle() . 除了使用class还可以将className或classList与add() / remove()或toggle() 。

To check if class exists or not, you can get element attribute (class) by getAttribute('class') , then search in it using indexOf() by your class string. 要检查类是否存在，可以通过getAttribute('class')获得元素属性（类getAttribute('class') ，然后使用类字符串的indexOf()对其进行搜索。

For best practice try to avoid inline events and use addEventListener instead. 为了最佳实践，请尝试避免内联事件，而应使用addEventListener 。

https://jsfiddle.net/5m5ck1fk https://jsfiddle.net/5m5ck1fk

 //btn = document.querySelector('.button'); var btn = document.getElementsByClassName('button')[0], bdBackground = document.getElementById('bdbackground'); btn.addEventListener('click', function () { changeColor(); }); function changeColor() { if (bdBackground.getAttribute('class').indexOf('darkerBG') != -1) { bdBackground.classList.remove('darkerBG'); bdBackground.classList.add('lighterBG'); } else if (bdBackground.getAttribute('class').indexOf('lighterBG') != -1) { bdBackground.classList.remove('lighterBG'); bdBackground.classList.add('darkerBG'); } }

 .darkerBG { background: #282828; } .lighterBG { background: white; }

 <body class="darkerBG" id="bdbackground"> <input type="button" class="button" value="test"> </body>

JavaScript; 背景颜色更改并使用相同的输入更改回

问题描述

6 个解决方案

解决方案1
3 2016-06-13 22:16:53

解决方案2
2 2016-06-13 22:14:47

解决方案3
1 已采纳 2016-06-13 22:13:09

解决方案4
1 2016-06-13 22:36:34

解决方案5
1 2016-06-13 22:45:50

Basic Flow 基本流程

SNIPPET SNIPPET

解决方案6
0

JavaScript; 背景颜色更改并使用相同的输入更改回

问题描述

6 个解决方案

解决方案1 3 2016-06-13 22:16:53

解决方案2 2 2016-06-13 22:14:47

解决方案3 1 已采纳 2016-06-13 22:13:09

解决方案4 1 2016-06-13 22:36:34

解决方案5 1 2016-06-13 22:45:50

Basic Flow 基本流程

SNIPPET SNIPPET

解决方案6 0

解决方案1
3 2016-06-13 22:16:53

解决方案2
2 2016-06-13 22:14:47

解决方案3
1 已采纳 2016-06-13 22:13:09

解决方案4
1 2016-06-13 22:36:34

解决方案5
1 2016-06-13 22:45:50

解决方案6
0