How can I assign a number for a variable by using getElementById method in JavaScript-CodePudding

I am having trouble assigning a number from a text input which type is "text" (I know I can use number type but this is requested) to calculate the value and set that value to another text input

This is what my HTML file look like:

<!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"> 
    <script src="./ind.js"></script> 
    <title>Document</title> 
</head>

<body>
    Input: <input id="txtInput" type="text"> 
    <input onclick="showResult()" type="button" value="Show Result"> <br> <br> 
    The number after adding 10 is: 
    <input id="result" type="text"> 
</body>

</html>

How it looks like

And my JavaScript code:

var input = document.getElementById("txtInput").value;
var result = document.getElementById("result").value;

function showResult(){
    result.value = input   10;
}

I tried casting the assigned value with Number() method like this:

var input = Number(document.getElementById("txtInput").value);
var result = document.getElementById("result").value;

function showResult(){
    result.value = input   10;
}

But it didn't work out.

What am I doing wrong, I'm new to JS and StackOverFlow, also my English is bad, please guide me.

CodePudding user response：

The problem was that the variables were outside the function, and to cast the input to number you can use the parseInt() or parseFloat() functions.

function showResult(){
        var input = document.getElementById("txtInput").value;
    var result = document.getElementById("result");
    result.value = parseInt(input)   10
}

CodePudding user response：

You’re accessing the value twice. If you remove .value from the result-variable, the code should work :)

CodePudding user response：

you should declare variables inside function but you are declaring it outside function. when you invoke function txtInput value is 0.

function showResult(){
    var in_put = Number(document.getElementById("txtInput").value);
    var result = document.getElementById("result");
    result.value = in_put   10;
}

Input: <input id="txtInput" type="text"> 
    <input onclick="showResult()" type="button" value="Show Result"> <br> <br> 
    The number after adding 10 is: 
    <input id="result" type="text">

CodePudding user response：

You are correct about converting text value into number with Number(). However, you are assigning values to input and result variables and not the elements. So when you call showResult function you are working with previous values.

What you need to do is store the elements in these variables and in showResult work with current values instead

var input = document.getElementById("txtInput");
var result = document.getElementById("result");

function showResult(){
    result.value = Number(input.value)   10;
}

    Input: <input id="txtInput" type="text"> 
    <input onclick="showResult()" type="button" value="Show Result"> <br> <br> 
    The number after adding 10 is: 
    <input id="result" type="text">

Also, depending on the application, you might want to consider using parseFloat().

CodePudding user response：

A more straightforward way of doing this in one-liner is to pass the addition to the function and assign it to the result itself. The problem here is not declaring the variables inside the function but you are declaring them outside the function. when you invoke the function txtInput value is always 0.

Please find the attached working code below:

var result = document.getElementById("result");

function showResult(){
   result.value = Number(document.getElementById("txtInput").value) 10;
   
}

<!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"> 
    <script src="./ind.js"></script> 
    <title>Document</title> 
</head>

<body>
    Input: <input id="txtInput" type="text"> 
    <input onclick="showResult()" type="button" value="Show Result"> <br> <br> 
    The number after adding 10 is: 
    <input id="result" type="text"> 
</body>

</html>

CodePudding user response：

function showResult(){
    var input = document.getElementById("txtInput");
    var result = document.getElementById("result");
    var sum = parseFloat(input.value)   10;
    result.value= sum;
}

<!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"> 
    <script src="./ind.js"></script> 
    <title>Document</title> 
</head>

<body>
    Input: <input id="txtInput" type="text"> 
    <input onclick="showResult()" type="button" value="Show Result"> <br> <br> 
    The number after adding 10 is: 
    <input id="result" type="text"> 
</body>

</html>

1- you should access the HTML element each time you run your showResult() function, because the value from your first input can be changed for a new calculation and you need to get that new value everytime. If you do it outside it will do it only once and the value will be empty for both elements.

2- get the DOM element not just the value. If you store the value inside a variable then you will get the value indeed but you won't be able to assign your sum result to your input element unless you get the element again after your calculations which is pointless since you can just do it once.

3- parseFloat or parseInt to convert the string value you get from your input into a number and get the expected result, otherwise if you for example type 10 and press the button you will get 1010 instead of 20 since the value that it will get from input will be a string not a number, it will concatenate both values