I am just new in programming and that's my first attempt to learn something new. I can't get what is wrong with my code, because it doesn't want to work. All I need is to change the bg-color just by clicking on the div. It works if you remove 1st line of code until "function", but only on onload the page.
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>
The way you were setting the onClick handler was wrong.
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>
I notice you have all your code in one place separate it. If you don't adhere to encapsulation you can get into a lot of trouble. Separate your code and things will be much easier for you. You were just missing a bracket, also try to form your answers a little bit clearer to avoid getting down voted ;). Also, we you have to fix your code so that the words don't disappear, i'll let you figure that out on your own.
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.