I'm solving HTML and Javascript practice questions for beginners.
Have the user enter three numbers and create a web page that automatically multiplies them.
(Use HTML form instead of Javascript alert or prompt)
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>JavaScript</title>
</head>
<body>
<label for="first">The first number:</label>
<input type="number" id="first" name="first_number"/>
<label for="second">The second number:</label>
<input type="number" id="second" name="second_number"/>
<label for="third">The third number:</label>
<input type="number" id="third" name="third_number"/>
<script>
let first = document.getElementById("first");
let second = document.getElementById("second");
let third = document.getElementById("third");
letans=first*second*third;
console.log("The answer is:"+ans);
</script>
</body>
</html>
A page appears prompting you to enter three numbers.
My image is that if you type in three numbers, you'll see the multiplied answers below.However, the answer is not displayed, and you can only enter three numbers.
The console tag of the Developer tool shows TheThe answer is:NaN 」.As soon as this code is activated, an unentered number is recognized as NaN, so I think the answer is also displayed as NaN.
When three numbers are entered, it is desirable to recognize them and start calculating.What modifications are needed to achieve this behavior?
What modifications do I need to make to display the answers on the page instead of the console tab of the Developer tool?
When three numbers are entered, it is desirable to recognize them and start calculating them.What modifications are needed to achieve this behavior?
What modifications do I need to make to display the answers on the page instead of the console tab of the Developer tool?
If we can solve these two problems, I think we can solve this problem.I would appreciate it if you could let me know if there are any other misunderstandings or issues.
*Code is used to create code and display it on Google Chrome.Both versions are up to date.The operating system is Windows 11.
(Additional)
The practice questions were given by the instructor of the course I am currently learning, and there are no specific URLs or books.Now, let's learn HTML first, Javascript next, and then use the two together.First, there is a page created using functions such as alert, and the question is, "Can you make the same in form?"
The first page I created was just a body with the following description.
<script>
let x = parseInt(prompt("I will multiply three numbers. What is the first number?"));
letty=parseInt(prompt("What is the second number?"));
letz = parseInt( prompt("What is the third number?"));
letans=x*y*z;
alert("The answer is:"+ans);
</script>
As soon as this code is activated, an unentered number is recognized as NaN, so I think the answer is also displayed as NaN.
The let first=document.getElementById("first"; code replaces the first variable with the input box itself rather than an unentered number.
You can substitute a number for a variable by rewriting it to let first=document.getElementById("first").value;.
3 When three numbers are entered, it is desirable to recognize them and start calculating them.What modifications are needed to achieve this behavior?
By making a correction to call the function that starts the calculation when a number is entered in the input box, or the value of the input box has changed, the calculation starts in the desired order.
If your text contains a description of the onchange event, see it.
DeWhat kind of modifications do I need to make to display the answers on the web page instead of the console tag on the Developer tool?
You must place controls on the web page to display your answers.
For example, place the control <input type="number" id="answer" name="answer_number"/> and
Write document.getElementById("answer").value=123; in javascript to see 123 in the control.
© 2024 OneMinuteCode. All rights reserved.