javascript按钮没有'；不要等待被点击_Javascript_Html_Css

javascript按钮没有'；不要等待被点击

javascript html css

javascript按钮没有'；不要等待被点击,javascript,html,css,Javascript,Html,Css,我创建了一个简单的随机颜色生成器应用程序。障碍在于，通过javascript创建的按钮即使在发生任何单击事件之前也会被自动单击。我是javascript新手这是我的全部代码。提前谢谢 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function btn(){

我创建了一个简单的随机颜色生成器应用程序。障碍在于，通过javascript创建的按钮即使在发生任何单击事件之前也会被自动单击。我是javascript新手这是我的全部代码。提前谢谢

<!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 &nbsp;&nbsp;&nbsp;' + fColor + '&nbsp;&nbsp;&nbsp; Back &nbsp;&nbsp;&nbsp;' + 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>


函数btn（）{
var cgen=document.createElement（'button'）；
cgen.innerHTML='Generate'；
文件.body.appendChild（cgen）；
cgen.style.width='100%'；
cgen.style.fontSize='20px'；
cgen.style.border='2px纯红'；
cgen.onclick=paintDivs（）；
//setAttribute（“onclick”，paintDivs（））；
}
函数genColor（）{
var randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）；
返回随机颜色；
}
函数paintDivs（）{
对于（变量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=b颜色；
div.style.width='24%'；
div.style.float='左'；
div.style.margin='5px'；
div.style.height='60px'；
div.style.fontSize='18px'；
div.style.lineHeight='60px'；
div.style.textAlign='center'；
div.style.borderRadius='20px'；
文件.正文.附件（div）；
}
}

它立即调用

paintDivs（）

，并将

cgen.onclick

设置为其返回值。你想要的是：

cgen.onclick = paintDivs;

它立即调用

paintDivs（）

，并将

cgen.onclick

设置为其返回值。你想要的是：

cgen.onclick = paintDivs;

试试下面的代码。更改cgen.onclick=paintDivs（）；到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 &nbsp;&nbsp;&nbsp;' + fColor + '&nbsp;&nbsp;&nbsp; Back &nbsp;&nbsp;&nbsp;' + 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>


函数btn（）{
var cgen=document.createElement（'button'）；
cgen.innerHTML='Generate'；
文件.body.appendChild（cgen）；
cgen.style.width='100%'；
cgen.style.fontSize='20px'；
cgen.style.border='2px纯红'；
cgen.onclick=paintDivs；
//setAttribute（“onclick”，paintDivs（））；
}
函数genColor（）{
var randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）；
返回随机颜色；
}
函数paintDivs（）{
对于（变量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=b颜色；
div.style.width='24%'；
div.style.float='左'；
div.style.margin='5px'；
div.style.height='60px'；
div.style.fontSize='18px'；
div.style.lineHeight='60px'；
div.style.textAlign='center'；
div.style.borderRadius='20px'；
文件.正文.附件（div）；
}
}

尝试下面的代码。更改cgen.onclick=paintDivs（）；到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 &nbsp;&nbsp;&nbsp;' + fColor + '&nbsp;&nbsp;&nbsp; Back &nbsp;&nbsp;&nbsp;' + 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>


函数btn（）{
var cgen=document.createElement（'button'）；
cgen.innerHTML='Generate'；
文件.body.appendChild（cgen）；
cgen.style.width='100%'；
cgen.style.fontSize='20px'；
cgen.style.border='2px纯红'；
cgen.onclick=paintDivs；
//setAttribute（“onclick”，paintDivs（））；
}
函数genColor（）{
var randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）；
返回随机颜色；
}
函数paintDivs（）{
对于（变量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=b颜色；
div.style.width='24%'；
div.style.float='左'；
div.style.margin='5px'；
div.style.height='60px'；
div.style.fontSize='18px'；
div.style.lineHeight='60px'；
div.style.textAlign='center'；
div.style.borderRadius='20px'；
文件.正文.附件（div）；
}
}

@Felix Robinchik如果您需要答案，请始终接受答案谢谢you@Mark里德，对不起，兄弟。我出去了。为什么不呢？“我当时正在接受你的回答，但我在11分钟内无法接受。这不是我在催促你，@Felix Robinchik，但谢谢你。”@Felix Robinchik请始终接受您想要的答案谢谢you@Mark里德，对不起，兄弟。我出去了。为什么不呢？“我当时正在接受你的回答，但我在11分钟内无法接受。这不是我在催促你，@Felix Robinchik，但谢谢你。”