How to change background color by click with javascript?

Question

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>

score 2 · Answer 1 · answered Sep 07 '16 at 20:31

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>

Thank you! I understand now my mistake. – All in One Sep 07 '16 at 20:37 — All in One, Sep 07 '16 at 20:37

score 0 · Answer 2 · edited May 23 '17 at 12:08

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;
}

}

How to change background color by click with javascript?

2 Answers2