0
This 'Generate Square' function creates a red-colored square-shaped div. What I’m trying to do is change the color of the squares when I click on it. (I don’t know how to pass the generated element as a parameter in the function, I need help in this as well.)
Document Square Generate
</div>
<script>
function gerarQuadrado() {
var boxElement = document.createElement('div');
boxElement.style.height = '100px';
boxElement.style.width = '100px';
boxElement.style.backgroundColor = '#f00';
boxElement.style.margin = '10px';
boxElement.setAttribute('class', 'box');
boxElement.setAttribute('onclick', 'mudarCor(self)');
var divElement = document.querySelector('div#app');
divElement.appendChild(boxElement);
}
function mudarCor(box) {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
this.box.style.backgroundColor = color;
}
</script>