I have created a simple random color generator application. The barrier is that the button created through javascript is clicked automatically even before any click event on it. I am new to javascript Here is my whole code. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function btn(){
var cgen = document.createElement('button');
cgen.innerHTML = 'Generate';
document.body.appendChild(cgen);
cgen.style.width = '100%';
cgen.style.fontSize = '20px';
cgen.style.border = '2px solid red';
cgen.onclick = paintDivs();
// cgen.setAttribute("onclick", paintDivs());
}
function genColor(){
var randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
return randomColor;
}
function paintDivs(){
for (var i = 0; i < 500; i++) {
var fColor = genColor();
var bColor = genColor();
var div = document.createElement('div');
div.innerHTML = 'Text ' + fColor + ' Back ' + bColor;
div.style.color = fColor;
div.style.background = bColor;
div.style.width = '24%';
div.style.float = 'left';
div.style.margin = '5px';
div.style.height = '60px';
div.style.fontSize = '18px';
div.style.lineHeight = '60px';
div.style.textAlign = 'center';
div.style.borderRadius = '20px';
document.body.appendChild(div);
}
}
</script>
</head>
<body onload="btn();" style="background-color: gray;">
</body>
</html>
</html>
cgen.onclick = paintDivs();
That calls paintDivs()
immediately and sets cgen.onclick
to its return value. What you want is this:
cgen.onclick = paintDivs;
try below code . have change cgen.onclick = paintDivs(); to cgen.onclick = paintDivs;
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function btn(){
var cgen = document.createElement('button');
cgen.innerHTML = 'Generate';
document.body.appendChild(cgen);
cgen.style.width = '100%';
cgen.style.fontSize = '20px';
cgen.style.border = '2px solid red';
cgen.onclick = paintDivs;
// cgen.setAttribute("onclick", paintDivs());
}
function genColor(){
var randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);
return randomColor;
}
function paintDivs(){
for (var i = 0; i < 500; i++) {
var fColor = genColor();
var bColor = genColor();
var div = document.createElement('div');
div.innerHTML = 'Text ' + fColor + ' Back ' + bColor;
div.style.color = fColor;
div.style.background = bColor;
div.style.width = '24%';
div.style.float = 'left';
div.style.margin = '5px';
div.style.height = '60px';
div.style.fontSize = '18px';
div.style.lineHeight = '60px';
div.style.textAlign = 'center';
div.style.borderRadius = '20px';
document.body.appendChild(div);
}
}
</script>
</head>
<body onload="btn();" style="background-color: gray;">
</body>
</html>
</html>
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.