CODEWITHSUNDEEP
javascript
RayzioJax
RayzioJax

Reputation: 5

JS output is NaN

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

Upvotes: 0

Views: 72

Answers (2)

Mina
Mina

Reputation: 17039

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>

Upvotes: 1

aca
aca

Reputation: 1121

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>

Upvotes: 0

Related Questions