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
-
Answer # 1
-
Answer # 2
The code below looks for an element with the ID
p
, but there is no such element in the presented HTML.const p = document.getElementById ('p');
Related articles
- javascript - i don't know how to get the json data for an array
- javascript - i don't know how to get rakuten api json data
- i don't know how to input c ++
- python - i don't know how to use wait_for_motion () and wait_for_no_motion ()
- [vba] i don't know how to log in automatically from the next time [keep login]
- reactjs - [react] i don't know how to pass arguments
- python - i don't know how to do css select in bs4
- html - i don't know how to specify an element
- android - i don't know how to edit onpressed
- i don't know how to keep the data in c ++: std :: stack
- python - i don't know how to put out the sum of the matrix
- i don't know how to move the icon in android home app development
- javascript - i want to know how to identify a user with a web application
- javascript - i don't know the value of this
- i don't know how to use raycast in unity
- python - i don't know how to define a function
- python - i don't know how to enter the list
- python - i don't know how to deal with the error
- xcode - i don't know how to pass a value when tabbing
- php - i don't know how to get the characters from sql at the end at the login home page
The DOM element (
P
) you want to delete has not been acquired.HTML has
and id attribute but...
id = "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".
1) Acquire the DOM element and 2) Delete it from the parent element. The procedure is exactly the same.
Check out the differences between thefrequently usedmethods that retrieve DOM elements.
Element.getElementById ()
... Get one element/id attribute valueElement.getElementsByTagName ()
... get multiple elements/element nameElement.getElementsByClassName ()
... get multiple elements/classElement.querySelector ()
... get one element/selectorElement.querySelectorAll ()
... get multiple elements/selectorTo get a DOM element with
getElementById ()
,id attribute value is required.