Can someone help me with this? I’m new with javascript.
let x1 = parseInt(document.getElementById("x1").value)
let x2 = parseInt(document.getElementById("x2").value)
word = function(){
let c = x1+x2
document.getElementById("res").innerHTML=c
}<!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>Calculator</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1 class="text-4xl">Calculator</h1><br>
<div>
<form action="GET">
<label for="x1">Input 1</label><br>
<input type="text" id="x1" placeholder="1-10.."
class="border-2 border-black"><br>
<label for="x2">Input 2</label><br>
<input type="text" id="x2" placeholder="1-10.."
class="border-2 border-black"><br>
</form>
<button type="button" id="btn"
class="rounded-lg bg-gray-500 p-1 px-2 my-2 text-white
hover:bg-gray-600"
onclick="word()">Test</button>
<p id="res"></p>
</div>
<script src="../js/config.js"></script>
</body>
</html>So i want to sum x1 with x2, but the output is NaN.
Here is the code in html look like
html page
>Solution :
Just putting the value inside your function.
let x1 = document.getElementById("x1")
let x2 = document.getElementById("x2")
word = function(){
console.log(x1.value);
let c = parseInt(x1.value)+ parseInt(x2.value)
document.getElementById("res").innerHTML= +c
}<!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>Calculator</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1 class="text-4xl">Calculator</h1><br>
<div>
<form action="GET">
<label for="x1">Input 1</label><br>
<input type="text" id="x1" placeholder="1-10.."
class="border-2 border-black"><br>
<label for="x2">Input 2</label><br>
<input type="text" id="x2" placeholder="1-10.."
class="border-2 border-black"><br>
</form>
<button type="button" id="btn"
class="rounded-lg bg-gray-500 p-1 px-2 my-2 text-white
hover:bg-gray-600"
onclick="word()">Test</button>
<p id="res"></p>
</div>
<script src="../js/config.js"></script>
</body>
</html>