#javascript #dom
#javascript #dom
Вопрос:
Ну, я не совсем понимаю, это функции или поток моей программы. Я запрашиваю простой API для практики, который извлекает долготу и широту ISS.Я хотел делать это каждую секунду, вот почему я использовал setInterval()
. Теперь я хочу, чтобы при поступлении следующих данных текущие автоматически удалялись / исчезали и отображались только те, которые отображаются, поэтому я попытался использовать remove () и removeChild(), но они не удаляют элемент, и новые данные продолжают появляться один под другим. Вот javascript:
const url = "https://api.wheretheiss.at/v1/satellites/25544";
const box = document.getElementById('div');
function setup(){
let request = new XMLHttpRequest();
request.onload = gotData;
request.open('GET',url);
request.send();
}
setInterval(setup,1000);
function gotData(){
data = JSON.parse(this.responseText);
const box_lat = document.createElement('H2');
const box_long = document.createElement('H2');
box_lat.innerText = "Latitude: " data.latitude;
box_long.innerText = "Longitude: " data.longitude;
document.body.appendChild(box);
if(box.hasChildNodes()){
box.removeChild(box_lat);
box.removeChild(box_long);
}else{
box.appendChild(box_lat);
box.appendChild(box_long);
}
}
Это выдает следующую ошибку:—
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at XMLHttpRequest.gotData (http://127.0.0.1:3000/Projects/CSS_JS/JavaScript/iss.js:30:9)
Я также пытался использовать box.childNodes.length > 0
в if
условии, но все равно получил тот же результат.
Использование document.body.removeChild(box)
для удаления элемента complete box никогда не показывает этот элемент div!
Все, что я хочу, это чтобы данные обновлялись автоматически без повторения!
Комментарии:
1. In
box.removeChild(box_lat)
box_lat
ссылается на элемент, который вы только что создали (const box_lat = document.createElement('H2');
) . Этот элемент еще не был добавлен как дочерний. Если вы хотите обратиться кbox
текущим дочерним элементам, вы можете выполнить итерациюbox.children
.
Ответ №1:
box.removeChild(box_lat);
Вы пытаетесь удалить box_lat
из box
.
const box_lat = document.createElement('H2');
но вы только что создали box_lat
несколько строк раньше и нигде не добавили их.
Похоже, вы пытаетесь получить доступ к box_lat
переменной из предыдущего вызова функции … но это другая переменная с другим значением, и у вас нет к ней доступа здесь.
Вам нужно найти элементы, которые вы действительно хотите удалить, например:
box.querySelector("h2").remove()