javascript-onclick事件未运行，代码序列不正确_Javascript_Javascript Events

javascript-onclick事件未运行，代码序列不正确

javascript

javascript-onclick事件未运行，代码序列不正确,javascript,javascript-events,Javascript,Javascript Events,下面的代码运行到警报状态（“单击左侧的额外图像”），然后单击添加到左侧div的额外图像时，它不会执行任何操作。单击额外图像（id=“extraImage”）后，我希望JS将“extraImage”元素的颜色更改为红色。此外，我需要更改代码的执行顺序，并在添加图片后运行警报（“单击左侧的额外图像”）。非常感谢您的任何想法 <html> <head> </head> <body> <div id="conta

下面的代码运行到警报状态（“单击左侧的额外图像”），然后单击添加到左侧div的额外图像时，它不会执行任何操作。单击额外图像（id=“extraImage”）后，我希望JS将“extraImage”元素的颜色更改为红色。此外，我需要更改代码的执行顺序，并在添加图片后运行警报（“单击左侧的额外图像”）。非常感谢您的任何想法

<html>
    <head>    </head>
    <body>
        <div id="containerLeft">
        </div>
        <div id="containerRight">
        </div>

        <script>
            var i = 1
            var pocetSmilikov = prompt("enter number of smiley faces");
            alert("i will add" + pocetSmilikov);
            while (i <= pocetSmilikov)
            {
                insert();
                i++;
            }

            insertExtraToLeft();

            function insert() {
                var imgDestination = document.getElementById("containerRight");
                var imgAdded = document.createElement("img");
                imgAdded.src = "smiley.png";
                imgDestination.appendChild(imgAdded);
                var left = Math.floor((Math.random() * 50) + 1) + "px";
                var top = Math.floor((Math.random() * 50) + 1) + "px";
                var imagestyle = imgAdded.style;
                imagestyle.position = "relative";
                imagestyle.top = top;
                imagestyle.left = left;

                var the_node = document.getElementById("containerRight").lastChild;
                var the_clone = the_node.cloneNode(true);
                document.getElementById("containerLeft").appendChild(the_clone);
            }


            function insertExtraToLeft() {
                var imgDestinationExtra = document.getElementById("containerLeft");
                var imgAddedExtra = document.createElement("img");
                imgAddedExtra.src = "smiley.png";
                imgAddedExtra.id = "extraImage"
                imgDestinationExtra.appendChild(imgAddedExtra);
                var left = Math.floor((Math.random() * 50) + 1) + "px";
                var top = Math.floor((Math.random() * 50) + 1) + "px";
                var imagestyle = imgAddedExtra.style;
                imagestyle.position = "relative";
                imagestyle.top = top;
                imagestyle.left = left;
            }

            alert("click on extra image on the left");

            extraImage.onclick = extraImgFound();


            function extraImgFound() {
                document.getElementById("extraImage").style.color = "red";
            }
        </script>
    </body>
</html>


变量i=1
var pocetSmilikov=提示（“输入笑脸数”）；
警报（“我将添加”+pocetSmilikov）；
而（iextraImage
未在任何位置定义。在insertExtraToLeft（）
函数中添加imgAddedExtra.onclick=extraImgFound（）；

尝试：
extraImage.onclick=extraImgFound；
除非函数本身返回要绑定到处理程序的函数，否则不要调用函数（使用（））。我删除了括号并重新运行，但当我单击由代码添加的额外图像时，仍然没有发生任何事情…extraImage未定义？您解决了问题吗？
function insertExtraToLeft()
{
    var imgDestinationExtra = document.getElementById("containerLeft");
    var imgAddedExtra = document.createElement("img");
    imgAddedExtra.src = "smiley.png";
    imgAddedExtra.id ="extraImage"
    imgDestinationExtra.appendChild(imgAddedExtra);

    imgAddedExtra.onclick = extraImgFound();

    var left = Math.floor((Math.random() * 50) + 1)+"px";
    var top = Math.floor((Math.random() * 50) + 1)+"px";
    var imagestyle = imgAddedExtra.style;
    imagestyle.position = "relative";
    imagestyle.top = top;
    imagestyle.left = left;
}