#1 : JavaScript addition of two numbers using input boxes and displaying the result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Addition of Two Numbers</title>
</head>
<body>
<h2>Addition of Two Numbers (Method 2)</h2>
<label for="num1">Enter first number: </label>
<input type="number" id="num1"><br><br>
<label for="num2">Enter second number: </label>
<input type="number" id="num2"><br><br>
<button onclick="addNumbers()">Add Numbers</button>
<div id="result"></div>
<script>
function addNumbers() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").innerText = "The result of the addition is: " + result;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: black; color: whitesmoke;">
<input type="number" name="" id="num1">
<input type="number" name="" id="num2">
<button type="button" id="btn" onclick="addition()">Submit</button>
<h1 id="result"></h1>
</body>
</html>
<script>
function addition()
{
// let a=parseInt(document.querySelector("#num1").value);
// let b=parseInt(document.getElementById("num2").value);
let sm=document.querySelector("#result");
let a=document.querySelector('#num1');
let b=document.getElementById('num2');
console.log(typeof a);
console.log(typeof b);
a=parseFloat(a.value);
b=parseFloat(b.value);
console.log(typeof a);
console.log(typeof b);
let sum=a+b;
console.log(sum);
// let sum=a+b;
sm.innerHTML=sum;
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="number" name="" id="num1">
<input type="number" name="" id="num2">
<button type="button" id="btn">add</button>
<h1 id="result"></h1>
</body>
</html>
<script>
let element=document.querySelector('#btn');
element.addEventListener('click',addition);
function addition()
{
let a=document.querySelector("#num1");
a=parseFloat(a.value);
// a=a.value;
console.log(typeof a)
let b=document.querySelector("#num2");
b=parseFloat(b.value);
// b=b.value;
console.log(a);
console.log(b);
let sum=a+b;
let result=document.querySelector("#result");
result.innerHTML=sum;
result.textContent=sum;
}
</script>
Addition of two numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Addition of Two Numbers</h1>
<label for="num1">Enter Number 1: </label>
<input type="number" id="num1"><br><br>
<label for="num2">Enter Number 2: </label>
<input type="number" id="num2"><br><br>
<button id="calculateBtn">Calculate Sum</button>
<p id="result"></p>
<!-- <script src="main.js"></script> -->
</body>
</html>
<script>
// Get references to the HTML elements
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const calculateBtn = document.getElementById('calculateBtn');
const resultElement = document.getElementById('result');
// Function to calculate and display the sum
function calculateSum() {
const num1 = parseFloat(num1Input.value);
const num2 = parseFloat(num2Input.value);
if (isNaN(num1) || isNaN(num2)) {
resultElement.textContent = 'Please enter valid numbers.';
} else {
const sum = num1 + num2;
resultElement.textContent = `Sum: ${sum}`;
}
}
// Attach a click event listener to the button
calculateBtn.addEventListener('click', calculateSum);
</script>