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
You need to get the value inside the click function.
let x1 = document.getElementById("x1")
let x2 = document.getElementById("x2")
word = function(){
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>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>usually NaN will occur when you trying to do mathematical operations number with string or string with number. please debug and check is your code doing that?