Question

下面的代码运行到警报（＆＃34;单击左侧的额外图像＆＃34;）然后单击添加到左侧div的额外图像时不执行任何操作。点击额外的图像（id =＆＃34; extraImage＆＃34;）我希望JS改变＆＃34; extraImage＆＃34;的颜色。元素为红色。此外，我需要更改执行代码的顺序并运行警报（＆＃34;单击左侧的额外图像＆＃34;）添加图片后。任何想法都非常感激。

<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>

Answer 1

extraImage未在任何地方定义。在imgAddedExtra.onclick = extraImgFound();功能中添加insertExtraToLeft()。

尝试：

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;
}

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

1 个答案: