removeChild не работает, но нет ошибки

-1

removeChild и вызов функции не работают. Я просмотрел все другие вопросы, но не могу понять, почему. Вот мой код ...removeChild не работает, но нет ошибки

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

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

 
\t setTimeout(preLogoFade,3000); 
 
\t function preLogoFade() { 
 
\t \t var logoOpacity = .9; 
 
\t \t var logoInterval = setInterval(function(){LogoFade()},100); 
 
\t \t \t function LogoFade() { 
 
\t \t \t \t logo.style.opacity=logoOpacity; 
 
\t \t \t \t sublogo.style.opacity=logoOpacity; 
 
\t \t \t \t sublogoImg.style.opacity=logoOpacity; 
 
\t \t \t \t logoOpacity-=.1; 
 
\t \t \t \t if(logoOpacity==0){ 
 
\t \t \t \t \t gameContainer.removeChild(logo); 
 
\t \t \t \t \t gameContainer.removeChild(sublogo); 
 
\t \t \t \t \t gameContainer.removeChild(sublogoImg); 
 
\t \t \t \t \t professorOpen(); 
 
\t \t \t \t } 
 
\t \t \t } \t \t \t \t \t \t \t \t \t \t //LogoFade Function End 
 
\t } \t \t \t \t \t \t \t \t \t \t \t \t //preLogoFade Function End 
 
} \t \t \t \t \t \t \t \t \t \t \t \t \t //startGame Function End 
 

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

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

<!DOCTYPE html> 
 
<html lang="en-US"> 
 
<head> 
 
\t <title>Game</title> 
 
\t <link rel="stylesheet" href="index/style.css"> 
 
</head> 
 

 
<body> 
 
\t <div id="game-container"> 
 
\t \t <button id="start-button" onclick="startGame()">Start</button> 
 
\t </div> 
 
\t <script src="index/src.js"></script> 
 
</body> 
 
</html>

Хотя элементы исчезают (из-за непрозрачности), они не удаляются, а setInterval никогда не заканчивается. Помоги пожалуйста!!!

источник

2016-01-23 Blue Diamond

'logoInterval' объявляется в другой области видимости функции. Вам нужно будет объявить его во внешней области. – Xufox

Не могли бы вы сначала свести его к минимальному рабочему примеру, т. Е. Фрагменту кода, чтобы этого было достаточно, чтобы воспроизвести проблему без всех ненужных структур, стилей и т. Д. Вероятно, вы также можете помочь найти ошибку, если вы хотя бы попытаетесь воспроизвести ее в небольшой автономной среде. – Marandil

Я считаю, что это столько, сколько я могу удалить. Это было много. Сожалею. –

Есть несколько проблем.

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();

источник

2016-01-23 02:21:45

Будет ли это препятствовать использованию метода ProfessorOpen (потому что setInterval закончится)? Вот почему я переехал clearInterval. Я прав, или я очень неправ? –

'professOpen' никогда не вызывался из-за проблемы равенства непрозрачности. Как только это исправлено, 'professOpen' никогда не сможет очистить интервал, потому что у него нет доступа к' logoInterval'. –

Я не был уверен, что clearInterval остановит вызов функции из когда-либо, но это сработало, поэтому, спасибо! –

Существует проблема, которую я не могу определить. logoOpacity никогда не равен нулю на моей машине. Я изменил '==' на < = и это, казалось, сработало.

Ваша следующая проблема заключается в том, что SetInterval не останавливается даже после исчезновения дочерних узлов. logoInterval выходит из области действия функции openProfessor. Вы либо должны сделать его глобальным, либо включить функцию openprofessor в logoFade.

Чтобы увидеть эту проблему, добавьте несколько предупреждений (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)"; 


}

источник

2016-01-23 02:06:57 user2197169

Когда я это сделал, функция ProfessorOpen() DID начала работать! Спасибо! К сожалению, фоновое изображение не появилось. Inspect Element сказал мне, что не может найти переменную «логотип» в removeChild() или «logoInterval» в clearInterval(), которую я сортирую, потому что var имеет другую функцию. Но, как я уже говорил выше, когда я создал глобальную «logoInterval», исчезновение перестало работать. Но, спасибо за помощь !! –

Нет проблем, я сделал так мало js, это было забавно играть с. Было довольно странно .8-.1 = .70000000001 – user2197169

Оповещение о непрозрачности научило меня чему-то важному.Когда я вычитал 1, страница вычитала что-то поближе к .99999999999. Мне кажется, что это смешно, но хорошо знать. Спасибо за помощь. Теперь мне нужно только изменить logoInterval. –

removeChild не работает, но нет ошибки

ответ

Смежные вопросы