Change color of a div using JS

Question

I am trying to make a div element change background color when selecting the color of my input using Js. I’m not getting anybody to help me ?

<style>
    .corExemplo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-bottom: 30px;
        float: left;
    }
</style>

<script>
    function trocaCor(){
        var cor = getElementById("corum").value;
        document.getElementById("boxum").style.backgroundColor = cor;
    }
</script>

<div id="boxum" class="corExemplo">Teste</div>

<form action="#" style="clear: both;">
    <label for="corum">Cor 1</label>
    <input type="color" id="corum" onchange="trocaCor();">
</form>

Answer 1

Only the document. prefixing getElementById("corum").value;

See below the code working:

function trocaCor(){
   var cor = document.getElementById("corum").value;
   document.getElementById("boxum").style.backgroundColor = cor;
}

    .corExemplo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-bottom: 30px;
        float: left;
    }

<div id="boxum" class="corExemplo">Teste</div>

<form action="#" style="clear: both;">
    <label for="corum">Cor 1</label>
    <input type="color" id="corum" onchange="trocaCor();">
</form>

Answer 2

To allan’s response works perfectly. I’ll just add an example with the addeventlistener for knowledge purposes.

You can use the Element.addEventListener() to "wait for an event" and change the color.

For your example I would consider something unnecessary, but as I said it is starting in the world of JavaScript now, I think it would be something very interesting for you to see.

Your example using this method would look like this:

var cor = document.getElementById("corum");

cor.addEventListener("change", function() {
    document.getElementById("boxum").style.backgroundColor = cor.value;
}, false);

.corExemplo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 30px;
  float: left;
}

<div id="boxum" class="corExemplo">Teste</div>

<form action="#" style="clear: both;">
    <label for="corum">Cor 1</label>
    <input type="color" id="corum">
</form>

That way, I add the event change() at the input for addEventListener(), and not directly on input.