如何通过单击使用javascript更改背景颜色？答案

【问题标题】：How to change background color by click with javascript?如何通过单击使用javascript更改背景颜色？
【发布时间】：2017-01-15 15:34:27
【问题描述】：

我只是编程新手，这是我第一次尝试学习新东西。我不知道我的代码有什么问题，因为它不想工作。我只需要通过单击 div 来更改背景颜色。如果您在“功能”之前删除第一行代码，它会起作用，但仅在加载页面时才有效。

document.getElementById("trying").onclick = function(){
				var someText = document.getElementById("textArea").value;
				document.getElementById("randomText").innerHTML = someText;
			}
				document.getElementById("mainBox").onclick =
				function getRandomColor() {
                
                var letters = '0123456789ABCDEF'.split('');
    
                var color = '#';
    
                for (var i = 0; i < 6; i++ ) {
        
                    color += letters[Math.floor(Math.random() * 16)];
    
                }
    
                return color;

            }
			 document.getElementById("mainBox").style.backgroundColor = getRandomColor();

.mainBox {
				width: 400px;
				height:350px;
				background-color:pink;
				margin-right:auto;
				margin-left:auto;
			}
			#textArea {
				margin-left:100px;
			}

<div id="mainBox" class="mainBox">
				<p id="randomText" align="center">U know who you are?</p>
					<input type="text" id="textArea">
					<button id="trying">Try it!</button>
				</div>

【问题讨论】：

标签： javascript

【解决方案1】：

您设置 onClick 处理程序的方式错误。

document.getElementById("trying").onclick = function(){
    var someText = document.getElementById("textArea").value;
    document.getElementById("randomText").innerHTML = someText;
}

function getRandomColor() {                
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    
    for (var i = 0; i < 6; i++ ) {    
        color += letters[Math.floor(Math.random() * 16)];
    }
    
    return color;
}

document.getElementById("mainBox").onclick = function() {
  document.getElementById("mainBox").style.backgroundColor = getRandomColor();
}

.mainBox {
				width: 400px;
				height:350px;
				background-color:pink;
				margin-right:auto;
				margin-left:auto;
			}
			#textArea {
				margin-left:100px;
			}

<div id="mainBox" class="mainBox">
				<p id="randomText" align="center">U know who you are?</p>
					<input type="text" id="textArea">
					<button id="trying">Try it!</button>
				</div>

【讨论】：

谢谢！我现在明白我的错误了。

【解决方案2】：

我注意到您将所有代码放在一个单独的位置。如果您不遵守封装，您可能会遇到很多麻烦。分离你的代码和事情对你来说会容易得多。你只是错过了一个括号，也试着让你的答案更清楚一点，以避免被否决；）。另外，我们必须修复您的代码，以免单词消失，我会让您自己解决。

Simple way to understand Encapsulation and Abstraction

http://codepen.io/psikosen/pen/RGPkAv

html
<div id="mainBox" class="mainBox">
                <p id="randomText" align="center">U know who you are?</p>
                    <input type="text" id="textArea">
                    <button id="trying">Try it!</button>
                </div>
css
 .mainBox {
                width: 400px;
                height:350px;
                background-color:pink;
                margin-right:auto;
                margin-left:auto;
            }
            #textArea {
                margin-left:100px;
            }


Js
document.getElementById("trying").onclick = function(){
    var someText = document.getElementById("textArea").value;
    document.getElementById("randomText").innerHTML = someText;
}
document.getElementById("mainBox").onclick = function() {
  document.getElementById("mainBox").style.backgroundColor = getRandomColor();

function getRandomColor(){

    var letters = '0123456789ABCDEF'.split('');

                var color = '#';

                for (var i = 0; i < 6; i++ ) {

                    color += letters[Math.floor(Math.random() * 16)];

                }

                return color;
}

}

【讨论】：