Home>

javascript - i don't know how to start removechild

I will ask you a question.

Goals

As shown above, when you press the execution button, I want to delete the element of

"Enter an integer value".
I wrote the code but it doesn't work.

After investigating,
[If i click the [Execute] button, element deletion "removeChild" is activated. →

Delete "Enter integer value" element]
I arrived that Med would be better, but I can't go further.

<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 btn = document.getElementById ('btn');
    btn.addEventListener ('click', function () {
      const p = document.getElementById ('p');
      document.body.removeChild (p);
      const fizzNum = parseFloat (fizzForm.value);
      const buzzNum = parseFloat (buzzForm.value);
      if (Number.isInteger (fizzNum)&&Number.isInteger (buzzNum))
      {
        } else {
          console.log (alert ('Error message' Please enter an integer value ''));
        }
    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);
      }
  }
  });
}
  </script>
</body>
</html>
Code

Fix the above code.
Changed

to and added id.

As a result, the following error occurred.

index.html: 33 at HTMLButtonElement. 
Code

There are many people who have encountered similar problems like the URL below, but it is difficult to resolve because the cases are different.
https://www.tutorialfor.com/go.php?id=132537

<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>
   Please enter an integer value 
  <script>
  'use strict';
  {
  const fizzForm = document.getElementById ('fizzInput');
  const buzzForm = document.getElementById ('buzzInput');
  const div = document.getElementById ('div');
  const btn = document.getElementById ('btn');
    btn.addEventListener ('click', function () {

      document.body.removeChild (div);
      const fizzNum = parseFloat (fizzForm.value);
      const buzzNum = parseFloat (buzzForm.value);
      if (Number.isInteger (fizzNum)&&Number.isInteger (buzzNum))
      {
        } else {
          console.log (alert ('Error message' Please enter an integer value ''));
        }
    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);
      }
  }
  });
}
  </script>
</body>
</html>
Code
javascript
  • Answer # 1

      

    I want to delete the "Enter integer value" element

    The DOM element (P) you want to delete has not been acquired.
    HTML has

    ...

    and id attribute butid = "value"and no attribute value is given .

    Because this is a "hint" to be displayed first, the attribute value of the id attribute is "hint".

    Please enter an integer value
    const p = document.getElementById ("hint");
      

    Because the case is different

    1) Acquire the DOM element and 2) Delete it from the parent element. The procedure is exactly the same.

    Check out the differences between the

    frequently usedmethods that retrieve DOM elements.

    Element.getElementById ()... Get one element/id attribute value

    Element.getElementsByTagName ()... get multiple elements/element name

    Element.getElementsByClassName ()... get multiple elements/class

    Element.querySelector ()... get one element/selector

    Element.querySelectorAll ()... get multiple elements/selector

    To get a DOM element withgetElementById (),id attribute value is required.

  • Answer # 2

    The code below looks for an element with the IDp, but there is no such element in the presented HTML.

    const p = document.getElementById ('p');

Related articles