Question

removeChild和函数调用无效。我看了所有其他问题，但无法弄清楚原因。这是我的代码......

var gameContainer = document.getElementById("game-container");

function startGame() {
	var startButton = document.getElementById("start-button");
	gameContainer.removeChild(startButton);						//button disappears
            
	var logo = document.createElement("IMG");
	logo.src = "http://img.qj.net/uploads/articles_module/2048/poke_2Dlogo.gif";
	gameContainer.appendChild(logo);
	logo.id="logo";										//logo appears
	var sublogo = document.createElement("P");
	var sublogoText = document.createTextNode("Yellow Diamond Version");
	sublogo.appendChild(sublogoText);
	gameContainer.appendChild(sublogo);
	sublogo.id="sub-logo";
	var sublogoImg = document.createElement("IMG");
	sublogoImg.src = "https://41.media.tumblr.com/6f25c533c98bfc58790eba699862437d/tumblr_inline_o0nqr4s49p1sp23ws_540.png"
	gameContainer.appendChild(sublogoImg);
	sublogoImg.id = "sub-logo-img";

	setTimeout(preLogoFade,3000);
	function preLogoFade() {
		var logoOpacity = .9;
		var logoInterval = setInterval(function(){LogoFade()},100);
			function LogoFade() {
				logo.style.opacity=logoOpacity;
				sublogo.style.opacity=logoOpacity;
				sublogoImg.style.opacity=logoOpacity;
				logoOpacity-=.1;
				if(logoOpacity==0){
					gameContainer.removeChild(logo);
					gameContainer.removeChild(sublogo);
					gameContainer.removeChild(sublogoImg);
					professorOpen();
				}
			}										//LogoFade Function End
	}												//preLogoFade Function End
}													//startGame Function End

function professorOpen() {
	clearInterval(logoInterval);
	gameContainer.style.backgroundImage = "url(http://vignette2.wikia.nocookie.net/steven-universe/images/9/90/Yellow_Diamond_by_Lenhi.png/revision/latest?cb=20160109203916)";
}

body {
	background-color:black;
}
#game-container{
	width:800px; height:700px;
	border:1px solid white;
	margin:0 auto;
	background-image:none;
	background-size:cover;
	background-repeat:no-repeat;
}
#start-button{
	width:100px; height:40px;
	position:relative; top:330px; left:350px;
	background-color:red;
	border:1px solid white; border-bottom-width:2px; border-top-width:0px;
	font-size:125%;
}
#start-button:hover{
	color:white;
}
#logo{
	width:100%; height:300px;
	position:relative;
	z-index:3;
}
#sub-logo{
	text-shadow: 1px 0 5px white, -1px 0 5px white, 0 1px 5px white, 0 -1px 5px white;
	color:#FEFF00;
	text-align:center;
	font-size:50px;
	position:relative; bottom:70px; left:15px;
	z-index:2;
}
#sub-logo-img{
	width:550px; height:405px;
	margin:auto;
	position:relative; left:140px; bottom:170px;
	z-index:1;
}

<!DOCTYPE html>
<html lang="en-US">
<head>
	<title>Game</title>
	<link rel="stylesheet" href="index/style.css">
</head>

<body>
	<div id="game-container">
		<button id="start-button" onclick="startGame()">Start</button>
	</div>
	<script src="index/src.js"></script>
</body>
</html>

虽然元素消失（由于不透明度），但它们不会被删除，并且setInterval永远不会结束。请帮忙!!!

Answer 1

有一个我无法识别的问题。 logoOpacity在我的机器上永远不会等于零。我改变了＆＃39; ==＆＃39;到＆lt; =这似乎有效。

你的下一个问题是即使在子节点消失后SetInterval也没有停止。 logoInterval超出了openProfessor函数中的Scope。您必须在logoFade中将其设为全局或包含openprofessor函数。

要查看此问题，请添加一些警报（logoOpacity）; （不要忘记增加你的间隔时间，或者你不能阻止它......不要说我这样做了......但我不会说我也没有。））

以下是我发现工作的变化。

var gameContainer = document.getElementById("game-container");
var logoInterval;
function startGame() {
...
            logoOpacity -= .1;
            if (logoOpacity < .1) {
                gameContainer.removeChild(logo);
                gameContainer.removeChild(sublogo);
                gameContainer.removeChild(sublogoImg);
                professorOpen();
            }
        }                                       //LogoFade Function End
    }                                               //preLogoFade Function End
}                                                   //startGame Function End

function professorOpen() {
    alert("openProfessor");
    clearInterval(logoInterval);
    var BodyID = document.getElementById("BodyID")
    BodyID.style.backgroundImage="url(http://vignette2.wikia.nocookie.net/steven-universe/images/9/90/Yellow_Diamond_by_Lenhi.png/revision/latest?cb=20160109203916)";


}

Answer 2

有一些问题。

1）logoOpacity永远不会为0.如果您记录输出，您将看到：

.8
0.7000000000000001
0.6000000000000001
0.5000000000000001
0.40000000000000013
0.30000000000000016
0.20000000000000015
0.10000000000000014
1.3877787807814457e-16

你可以看到它真的，真的，非常接近于0，但并不完全。这不是特别直观，它与计算机存储浮点数的方式有关，如果您感兴趣，请参阅here。

2）logoInterval是函数的本地，因此professOpen无法“看到”变量。您可以清除间隔内部的间隔，无需将其推送到其他功能。

这样的事情：

var gameContainer = document.getElementById("game-container");

function startGame() {
    var startButton = document.getElementById("start-button");
    gameContainer.removeChild(startButton); //button disappears

    var logo = document.createElement("IMG");
    logo.src = "http://img.qj.net/uploads/articles_module/2048/poke_2Dlogo.gif";
    gameContainer.appendChild(logo);
    logo.id = "logo"; //logo appears
    var sublogo = document.createElement("P");
    var sublogoText = document.createTextNode("Yellow Diamond Version");
    sublogo.appendChild(sublogoText);
    gameContainer.appendChild(sublogo);
    sublogo.id = "sub-logo";
    var sublogoImg = document.createElement("IMG");
    sublogoImg.src = "https://41.media.tumblr.com/6f25c533c98bfc58790eba699862437d/tumblr_inline_o0nqr4s49p1sp23ws_540.png"
    gameContainer.appendChild(sublogoImg);
    sublogoImg.id = "sub-logo-img";

    setTimeout(preLogoFade, 3000);

    function preLogoFade() {
        var logoOpacity = 90;
        var logoInterval = setInterval(function() {
            LogoFade()
        }, 100);

        function LogoFade() {
            var styleOpac = logoOpacity / 100;
            logo.style.opacity = styleOpac;
            sublogo.style.opacity = styleOpac;
            sublogoImg.style.opacity = styleOpac;
            logoOpacity -= 10;
            if (logoOpacity == 0) {
                gameContainer.removeChild(logo);
                gameContainer.removeChild(sublogo);
                gameContainer.removeChild(sublogoImg);
                clearInterval(logoInterval);
                professorOpen();
            }
        } //LogoFade Function End
    } //preLogoFade Function End
} //startGame Function End

function professorOpen() {
    gameContainer.style.backgroundImage = "url(http://vignette2.wikia.nocookie.net/steven-universe/images/9/90/Yellow_Diamond_by_Lenhi.png/revision/latest?cb=20160109203916)";
}
startGame();

removeChild不工作，但没有错误

2 个答案: