I was doing some of my practical exam codeing.
Below is one of them:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>program 6</title>
</head>
<body>
<form >
<label for="first_number">Enter the First Number:</label>
<input type="number" id="first_number">
<br>
<br>
<label for="second_number">Enter the Second Number:</label>
<input type="number" id="second_number">
<p>Press the button according to your requirement</p>
<button type="submit" id="add">Sum</button>
<button type="submit" id="Multiply">Multiply</button>
<p id="result"></p>
</form>
<script>
document.getElementById("add").addEventListener("click",(e)=>{
var a = document.getElementById("first_number").value;
a = Number(a);
var b = document.getElementById("second_number").value;
b = Number(b);
console.log(typeof a);
var c = a+b;
document.getElementById("result").innerHTML = "The sum of " + a + " and " + b + " is " + c;
e.preventDefault();
})
document.getElementById("Multiply").addEventListener("click",(e)=>{
var a = document.getElementById("first_number").value;
a = Number(a);
var b = document.getElementById("second_number").value;
b = Number(b);
console.log(typeof a);
var c = a*b;
document.getElementById("result").innerHTML = "The sum of " + a + " and " + b + " is " + c;
e.preventDefault();
})
</script>
</body>
</html>
DEMO:
document.getElementById("add").addEventListener("click", (e) => {
var a = document.getElementById("first_number").value;
a = Number(a);
var b = document.getElementById("second_number").value;
b = Number(b);
console.log(typeof a);
var c = a + b;
document.getElementById("result").innerHTML = "The sum of " + a + " and " + b + " is " + c;
e.preventDefault();
})
document.getElementById("Multiply").addEventListener("click", (e) => {
var a = document.getElementById("first_number").value;
a = Number(a);
var b = document.getElementById("second_number").value;
b = Number(b);
console.log(typeof a);
var c = a * b;
document.getElementById("result").innerHTML = "The sum of " + a + " and " + b + " is " + c;
e.preventDefault();
})<form>
<label for="first_number">Enter the First Number:</label>
<input type="number" id="first_number">
<br>
<br>
<label for="second_number">Enter the Second Number:</label>
<input type="number" id="second_number">
<p>Press the button according to your requirement</p>
<button type="submit" id="add">Sum</button>
<button type="submit" id="Multiply">Multiply</button>
<p id="result"></p>
</form>My question is as you can see I have taken the input type as number
<input type="number" id="first_number">
then also when I take the input from the user using
var a = document.getElementById("first_number").value;
a = Number(a);
why the datatype here is string?
