Home>

javascript - when the calculation starts again, an error occurs and stops

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>
javascript
  • Answer # 1

    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

    

    
FizzNum:

    

    
BuzzNum:

  • 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 thep # pelement ("Please enter an integer value") outside the event handler. How about you?

    MDN getElementById () "Return value" As explained innull, 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 # ptooriginal position.

Related articles