Currently, there is a problem that "Calculation starts again after being executed once and an error occurs and stops. If it is not updated, the calculation does not start."
When the calculation starts again after executing once, the error "Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
removeChild has been activated once, so the word
(please enter an integer value) has already been deleted, and removeChild cannot delete
the second time, I interpreted it as an error.
I tried and tried whether to use continue, but it seems to be different. I would be grateful if you could give me a hint.
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>FizzBuzz issue</title>
</head>
<body>
<p>
FizzNum:<input type = "text" value = "" placeholder = "Please enter an integer value">
</p>
<p>
BuzzNum:<input type = "text" value = "" placeholder = "Please enter an integer value">
</p>
<button>Execute</button>
<p>[Output]</p>
<p>Please enter an integer value</p>
<script>
'use strict';
{
const fizzForm = document.getElementById ('fizzInput');
const buzzForm = document.getElementById ('buzzInput');
const p = document.getElementById ('p');
const btn = document.getElementById ('btn');
btn.addEventListener ('click', function () {
document.body.removeChild (p);
const fizzNum = parseFloat (fizzForm.value);
const buzzNum = parseFloat (buzzForm.value);
if (Number.isInteger (fizzNum)&&Number.isInteger (buzzNum))
{
const result = document.getElementById ('result');
result.innerHTML = "";
for (let number = 1;number<= 100;number ++) {
console.log (Number.isInteger (fizzNum));
console.log (Number.isInteger (buzzNum));
if (number% fizzNum === 0&&number% buzzNum === 0)
{
const p = document.createElement ('p');
p.textContent = ("FizzBuzz" + "" + number);
result.appendChild (p);
} else if (number% fizzNum === 0) {
const p = document.createElement ('p');
p.textContent = ("Fizz" + "" + number);
result.appendChild (p);
} else if (number% buzzNum === 0) {
const p = document.createElement ('p');
p.textContent = ("Buzz" + "" + number);
result.appendChild (p);
}
}
} else {
document.body.appendChild (p);
console.log (alert ('Error message' Please enter an integer value ''));
}
});
}
</script>
</body>
</html>
-
Answer # 1
-
Answer # 2
removeChild has been activated once, so the word
(please enter an integer value) has already been deleted, and removeChild cannot delete
the second time, I interpreted it as an error.
The correct interpretation.
In the code in question, you get the
p # p
element ("Please enter an integer value") outside the event handler. How about you?MDN getElementById () "Return value" As explained in
null
, if it can not be obtained, it can be separated.const fizzForm = document.getElementById ('fizzInput'); const buzzForm = document.getElementById ('buzzInput'); // const p = document.getElementById ('p'); const btn = document.getElementById ('btn'); btn.addEventListener ('click', function () { const p = document.getElementById ('p');// Here getElementById () if (p) document.body.removeChild (p);// error avoidance / * omitted * / }
Added)
Using MDN insertBefore (), you should be able to dynamically generate and add the same elementp # p
tooriginal position.
Related articles
- javascript - i want to eliminate error 404
- javascript - about roulette creation error
- javascript - i got the error these relative modules were not found while using vue router
- javascript - i want to use the js code published on another site, but i get an error
- error when performing numerical calculation with python
- javascript age calculation
- javascript - i'm making tetris with js, but i don't know how to resolve the error
- javascript - resolve react error "'map' of undefined"
- javascript - i want to issue an error message if the checkbox is not checked
- javascript - if the error continues in express, cannot set headers after they are sent to the client
- [javascript] an error is displayed on the console when writing with an immediate function
- javascript - js error is displayed
- javascript - how to eliminate can not find'fb' error
- javascript - about the error "cannot read property'indexof' of null"
- javascript - in express, i get an error saying cannot set headers after they are sent to the client
- javascript - i get a module not found error when building a react environment
- javascript - [ubuntu] error when installing visual studio code
- javascript - jquery ajax communication 404 error
- javascript - cannot save due to syntax error
- javascript - i want to output the profit calculation result using mathfloor
Exist by default
"
Enter an integer value
" is deleted when btn is clicked?Once deleted, an error occurs because it tries to delete a nonexistent node the second time sample
I tried to summarize the common parts