关于onclick的domhtmljavascript_Javascript_Html

关于onclick的domhtmljavascript

javascript html

关于onclick的domhtmljavascript,javascript,html,Javascript,Html,我想先在左侧生成五个图像IMG，然后删除它的最后一个子项，并将其余的复制到右侧。如果用户单击左侧的额外img，则清除所有并在左侧生成更多510 img，然后将9复制到右侧，依此类推。如果用户点击了错误的位置，提醒游戏结束。以下是我的代码： img{ 位置：绝对位置； } div{ 位置：绝对位置；宽度：500px；高度：500px； } 右侧{左侧：500px；左边框：1px纯黑； } var numberOfFaces=5；函数生成{ var theLeftSide=document

我想先在左侧生成五个图像IMG，然后删除它的最后一个子项，并将其余的复制到右侧。如果用户单击左侧的额外img，则清除所有并在左侧生成更多510 img，然后将9复制到右侧，依此类推。如果用户点击了错误的位置，提醒游戏结束。以下是我的代码：

img{ 位置：绝对位置； } div{ 位置：绝对位置；宽度：500px；高度：500px； } 右侧{左侧：500px；左边框：1px纯黑； } var numberOfFaces=5；函数生成{ var theLeftSide=document.getElementByIdleftSide；对于var i=0；i

这可能是打字错误

var theBody = document.getElementsByTagName("body")[0];

您的代码：var theBody=document.getElementByTagNamebody[0]

我建议使用一个好的html编辑器。我用Jetbrain phpStorm修复了错误，但可能存在更好的错误。

这可能是键入错误

var theBody = document.getElementsByTagName("body")[0];

您的代码：var theBody=document.getElementByTagNamebody[0]

我建议使用一个好的html编辑器。我用Jetbrain phpStorm修复了错误，但可能存在更好的错误。

Bellow是一个对我有效的修改版本。请注意，在此版本中，我添加了所有子项上的事件，而不是整个文档体上的事件。我不知道，但对我来说，不在用户点击空白处结束游戏感觉更准确

<html>
<head>
<style>
    img{
        position: absolute;
    }
    div{
        position: absolute;
        width: 500px;
        height: 500px;
    }
    #rightSide { left: 500px; 
                border-left: 1px solid black;
    }

</style>
<script>
     var numberOfFaces = 5;

     var theBody; 
     var theLeftSide; 
     var theRightSide;

    function generateFaces(){

        theBody = document.getElementsByTagName("body")[0];
        theLeftSide = document.getElementById("leftSide");
        theRightSide = document.getElementById("rightSide");

        for (var i = 0; i < numberOfFaces; i++){
            var img = document.createElement("img");
            img.src = "smile.png";

            var randomTop = Math.random() * 400;
            var randomLeft = Math.random() * 400;
            img.style.top = randomTop + "px";
            img.style.left = randomLeft + "px";
            if(theLeftSide != null)
                theLeftSide.appendChild(img);
            else
                {
                    alert("Game Over");
                    return;
                }
        }

        var leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        document.getElementById("rightSide").appendChild(leftSideImages);

        addEvents();

    }

    function addEvents(){
        for(var i=0; i < theLeftSide.childNodes.length; i++){
                theLeftSide.childNodes[i].onclick = nextLevel;
            } 
    }

    function removeEvents(){
        for(var i=0; i < theLeftSide.childNodes.length; i++){
                theLeftSide.childNodes[i].onclick = null;
            } 

    }

     function nextLevel(event){
        if(this == theLeftSide.lastChild){
            event.stopPropagation();
            theLeftSide.innerHTML = "";
            theRightSide.innerHTML = "";
            numberOfFaces += 5;
            generateFaces();
        }
        else
        {
            alert("Game Over");
            removeEvents();
        }
    }

    window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>

</html>

贝娄是一个修改版本，为我工作。请注意，在此版本中，我添加了所有子项上的事件，而不是整个文档体上的事件。我不知道，但对我来说，不在用户点击空白处结束游戏感觉更准确

<html>
<head>
<style>
    img{
        position: absolute;
    }
    div{
        position: absolute;
        width: 500px;
        height: 500px;
    }
    #rightSide { left: 500px; 
                border-left: 1px solid black;
    }

</style>
<script>
     var numberOfFaces = 5;

     var theBody; 
     var theLeftSide; 
     var theRightSide;

    function generateFaces(){

        theBody = document.getElementsByTagName("body")[0];
        theLeftSide = document.getElementById("leftSide");
        theRightSide = document.getElementById("rightSide");

        for (var i = 0; i < numberOfFaces; i++){
            var img = document.createElement("img");
            img.src = "smile.png";

            var randomTop = Math.random() * 400;
            var randomLeft = Math.random() * 400;
            img.style.top = randomTop + "px";
            img.style.left = randomLeft + "px";
            if(theLeftSide != null)
                theLeftSide.appendChild(img);
            else
                {
                    alert("Game Over");
                    return;
                }
        }

        var leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        document.getElementById("rightSide").appendChild(leftSideImages);

        addEvents();

    }

    function addEvents(){
        for(var i=0; i < theLeftSide.childNodes.length; i++){
                theLeftSide.childNodes[i].onclick = nextLevel;
            } 
    }

    function removeEvents(){
        for(var i=0; i < theLeftSide.childNodes.length; i++){
                theLeftSide.childNodes[i].onclick = null;
            } 

    }

     function nextLevel(event){
        if(this == theLeftSide.lastChild){
            event.stopPropagation();
            theLeftSide.innerHTML = "";
            theRightSide.innerHTML = "";
            numberOfFaces += 5;
            generateFaces();
        }
        else
        {
            alert("Game Over");
            removeEvents();
        }
    }

    window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>

</html>

谢谢，现在当我点击body时，游戏结束了，但是如果我点击右边的额外img，它只是删除了所有img，并且没有在两边生成新的5个img，问题是什么？谢谢。在调用body.removeChildtheBody.firstChild之后，没有，因此leftSide=document.getElementByIdleftSide发生错误。你应该在while和removeChild中使用左侧而不是主体。谢谢，现在当我单击主体时，游戏结束了，但是如果我单击正确的额外img，它只是删除了所有img，而不是在两侧生成新的5个img，问题是什么？谢谢。在调用body.removeChildtheBody.firstChild之后，没有，因此leftSide=document.getElementByIdleftSide发生错误。在while和removeChild中，应该使用左侧而不是主体。