#javascript #html
#javascript #HTML
Вопрос:
** Я пытаюсь решить проблему здесь, поэтому могу я спросить, может ли быть ошибка, которую я допустил, потому что она продолжает говорить
ОБНАРУЖЕНА ОШИБКА
`Uncaught TypeError: Cannot read property 'remove' of null at eeset (script.js:13) at `HTMLButtonElement.onclick (index2.html:20) eeset @ script.js:13 onclick @ index2.html:20 ** newbie here
Подробности здесь :
function ageInDays() {
var birthYear =prompt('What year were you born.... Good Friend?');
var agemoto = (2018 - birthYear) * 365;
var h1 = document.createElement('h1');
var textAnswer = document.createTextNode('You are ' agemoto ' days old');
h1.setAttribute('id', 'agemoto');
h1.appendChild(textAnswer);
document.getElementById('flex-box-result').appendChild(h1);
}
function eeset() {
document.getElementById('ageInDays').remove();
}
.container-1 {
border: 1px solid black;
}
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.flex-box-container-1 div{
display: flex;
padding: 10px;
border: 1px solid black;
align-items: center;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="static/style.css">
<title>Javasript on Steroids</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick="ageInDays()">Click me</button>
</div>
<div>
<button class="btn btn-danger" onclick="eeset()">Reset</button>
</div>
</div>
<div class="flex-box-container-1">
<div id="flex-box-result"></div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Я высоко ценю любую помощь, чтобы поблагодарить вас!!
Комментарии:
1. Нет объекта DOM с идентификатором
ageInDays
.2. Добро пожаловать в SO. Пожалуйста, отредактируйте вопрос, чтобы включить ориентировочный заголовок, относящийся к вашей проблеме.
3. В вашем html нет элемента с идентификатором «ageInDays». Поэтому
getElementById('ageInDays')
возвращаетnull
иnull.remove();
выдает ошибку.4. Вам следует изменить заголовок вашего вопроса для большей четкости и наглядности.
Ответ №1:
Вы вызываете
document.getElementById('ageInDays').remove()
Но нет HTML-элемента с таким идентификатором. Я думаю, вы хотели получить этот
<button class="btn btn-primary" onclick="ageInDays()">Click me</button>
В этом случае вам нужно добавить атрибут ID, например
<button id="ageInDays" class="btn btn-primary" onclick="ageInDays()">Click me</button>
Тогда должен работать тот же js
Ответ №2:
Вы можете просто использовать querySelectorAll
метод для удаления всех ваших agemoto
идентификаторов attribute
при нажатии на reset
кнопку
Поскольку вы загружаете идентификатор agemoto
динамически, нам нужно убедиться, что мы удаляем все результаты, соответствующие этому идентификатору.
Для этого нам нужно использовать forEach
метод querySelectorAll
для удаления вызываемых элементов из DOM.
function eeset() {
document.querySelectorAll('#agemoto').forEach(e =>
e.parentNode.removeChild(e)); //Remove All results
}
Живая демонстрация
function ageInDays() {
var birthYear = prompt('What year were you born.... Good Friend?');
var agemoto = (2018 - birthYear) * 365;
var h1 = document.createElement('h1');
var textAnswer = document.createTextNode('You are ' agemoto ' days old');
h1.setAttribute('id', 'agemoto');
h1.appendChild(textAnswer);
document.getElementById('flex-box-result').appendChild(h1);
}
function eeset() {
document.querySelectorAll('#agemoto').forEach(e => e.parentNode.removeChild(e));
}
.container-1 {
border: 1px solid black;
}
.flex-box-container-1 {
display: flex;
border: 1px solid black;
padding: 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.flex-box-container-1 div {
display: flex;
padding: 10px;
border: 1px solid black;
align-items: center;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="static/style.css">
<title>Javasript on Steroids</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick="ageInDays()">Click me</button>
</div>
<div>
<button class="btn btn-danger" onclick="eeset()">Reset</button>
</div>
</div>
<div class="flex-box-container-1">
<div id="flex-box-result"></div>
</div>
</div>
</body>
</html>
Ответ №3:
У каждого элемента, который вы пытаетесь удалить в eeset(), должен быть идентификатор ‘ageInDays’
Итак, предполагая, что атрибут h1 set должен был быть ‘ageInDays’ вместо ‘ageMoto’