Trying to Convert Label that is number to int - javascript

I've been trying to convert a label to an int to do an equation. I haven't been able to use ConvertToInt32() or ParseInt(). I've been getting back NaN each time. Please help! Here's my code:
<div id="width"> <strong>Roll Width: </strong><label id="lblRollWidth" type="number">25</label></div>
</asp:Panel>
</div>
</div>
<input type="text" name="input1" id="input1" value="">
<input type="text" name="input2" id="input2" value="">
Calculate
<input type="text" name="output" id="output" value="">
<script>
function calc(){
var textValue1 = document.getElementById('input1').value;
var textValue2 = document.getElementById('input2').value;
var textValue3 = document.getElementById('lblRollWidth').value;
document.getElementById('output').value = textValue1 * textValue2 * textValue3;
}
</script>

change :
var textValue3 = document.getElementById('lblRollWidth').value;
to
var textValue3 = +document.getElementById('lblRollWidth').innerText;
because it is a label, therefore to get its value you have to use .innerText.
Also, not mandatory, but recommendended, change:
var textValue1 = document.getElementById('input1').value;
var textValue2 = document.getElementById('input2').value;
to:
var textValue1 = +document.getElementById('input1').value;
var textValue2 = +document.getElementById('input2').value;
So that they will be casted as numbers.
Fiddle:
http://jsfiddle.net/m1brLkqx/
Also, as a side note, NaN is being thrown because of the label, the rest was working.

Related

Displaying the sum of two Javascript Functions

The output in the result field is showing NaN for the grandTotal function in the following JavaScript and HTML codes. Please assist to identify the error.
function firstSum(){
subPay=()=>{
let comPay = document.getElementById('totPay').value;
if (comPay > 215000){return (comPay - 215000)*0.25;}
else {return comPay*0.15;}
}
document.getElementById('result1').value = subPay();
}
groPay=()=>{
groEstimate=()=>{
let comPay = document.getElementById('totPay').value;
if (comPay > 220000){return (comPay - 220000)*0.33;}
else {return comPay*0.16;}
}
document.getElementById('result2').value = groEstimate();
}
function grandTotal(){
var allPay;
allPay = firstSum() + groPay();
document.getElementById('result').value = allPay;
}
<form>
<input id="totPay" type="number" placeholder = "groPymt">
<input type = "button" onclick = "grandTotal()" value = "Submit">
<div><input type="text" class="totsum" id="result1"></div>
<div><input type="text" class="totsum" id="result2"></div>
<div>Result: <input type="text" id="result"></div><br><br>
</form>
You should either return the values at the end of firstSum and groPay or change grandTotal to something like
function grandTotal(){
firstSum(); groPay();
const fs = document.getElementById('result1').value;
const gp = document.getElementById('result2').value;
document.getElementById('result').value = fs + gp;
}

How to calculating time difference

I'm trying to make a program where i put in to different times and get the difference in minute after clicking the "calculate" button. I'm not sure if my approach is correct, there may be some typo's.
I'v tried to make the different input values to number but it seems like there is another underlying problem which I can't see.
var hour1=document.getElementById("hour1");
var min1=document.getElementById("min1");
var hour2=document.getElementById("hour2");
var min2=document.getElementById("min2");
function calc(){
var minutt1=Number(hour1)*60+Number(min1);
var minutt2=Number(hour2)*60+Number(min2);
var resultat=0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML="Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min1">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
I expect getting a number which represents the time difference in minutes, but the actual output is "NaN".
You need to get the value of hour1, min1, hour2, and min2. You also don't have an element min2:
var hour1=document.getElementById("hour1").value;
var min1=document.getElementById("min1").value;
var hour2=document.getElementById("hour2").value;
var min2=document.getElementById("min2").value;
What your code was trying to do was multiply and subtract HTML elements (never a good idea).
var hour1 = document.getElementById("hour1").value;
var min1 = document.getElementById("min1").value;
var hour2 = document.getElementById("hour2").value;
var min2 = document.getElementById("min2").value;
function calc() {
var minutt1 = Number(hour1) * 60 + Number(min1);
var minutt2 = Number(hour2) * 60 + Number(min2);
var resultat = 0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML = "Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
Other answers are close, but you need to get the value of the inputs after you click the button
var hour1 = document.getElementById("hour1");
var min1 = document.getElementById("min1");
var hour2 = document.getElementById("hour2");
var min2 = document.getElementById("min2");
window.calc = function () {
var minutt1 = parseInt(hour1.value) * 60 + parseInt(min1.value);
var minutt2 = parseInt(hour2.value) * 60 + parseInt(min2.value);
var resultat = minutt1 - minutt2;
document.getElementById("result").innerHTML = "Time differance is:" + resultat;
console.log({minutt1:minutt1,minutt2:minutt2,resultat:resultat,
hour1:hour1,min1:min1,
hour2:hour2,min2:min2
})
};
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>

Javascript displaying but not calulating [duplicate]

I am adding two numbers, but I don't get a correct value.
For example, doing 1 + 2 returns 12 and not 3
What am I doing wrong in this code?
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
They are actually strings, not numbers. The easiest way to produce a number from a string is to prepend it with +:
var x = +y + +z;
I just use Number():
var i=2;
var j=3;
var k = Number(i) + Number(j); // 5
You need to use javaScript's parseInt() method to turn the strings back into numbers. Right now they are strings so adding two strings concatenates them, which is why you're getting "12".
Use parseInt(...) but make sure you specify a radix value; otherwise you will run into several bugs (if the string begins with "0", the radix is octal/8 etc.).
var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);
alert(x + y);
Hope this helps!
The following may be useful in general terms.
First, HTML form fields are limited to text. That applies especially to text boxes, even if you have taken pains to ensure that the value looks like a number.
Second, JavaScript, for better or worse, has overloaded the + operator with two meanings: it adds numbers, and it concatenates strings. It has a preference for concatenation, so even an expression like 3+'4' will be treated as concatenation.
Third, JavaScript will attempt to change types dynamically if it can, and if it needs to. For example '2'*'3' will change both types to numbers, since you can’t multiply strings. If one of them is incompatible, you will get NaN, Not a Number.
Your problem occurs because the data coming from the form is regarded as a string, and the + will therefore concatenate rather than add.
When reading supposedly numeric data from a form, you should always push it through parseInt() or parseFloat(), depending on whether you want an integer or a decimal.
Note that neither function truly converts a string to a number. Instead, it will parse the string from left to right until it gets to an invalid numeric character or to the end and convert what has been accepted. In the case of parseFloat, that includes one decimal point, but not two.
Anything after the valid number is simply ignored. They both fail if the string doesn’t even start off as a number. Then you will get NaN.
A good general purpose technique for numbers from forms is something like this:
var data=parseInt(form.elements['data'].value); // or parseFloat
If you’re prepared to coalesce an invalid string to 0, you can use:
var data=parseInt(form.elements['data'].value) || 0;
Just add a simple type casting method as the input is taken in text. Use the following:
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
This won't sum up the number; instead it will concatenate it:
var x = y + z;
You need to do:
var x = (y)+(z);
You must use parseInt in order to specify the operation on numbers. Example:
var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
Simple
var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3
This code sums both the variables! Put it into your function
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`
<head>
<script type="text/javascript">
function addition()
{
var a = parseInt(form.input1.value);
var b = parseInt(form.input2.value);
var c = a+b
document.write(c);
}
</script>
</head>
<body>
<form name="form" method="GET">
<input type="text" name="input1" value=20><br>
<input type="text" name="input2" value=10><br>
<input type="button" value="ADD" onclick="addition()">
</form>
</body>
</html>
Or you could simply initialize
var x = 0; ( you should use let x = 0;)
This way it will add not concatenate.
If Nothing works then only try this. This maybe isn't Right way of doing it but it worked for me when all the above failed.
var1 - (- var2)
You are missing the type conversion during the addition step...
var x = y + z; should be var x = parseInt(y) + parseInt(z);
<!DOCTYPE html>
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction()
{
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseInt(y) + parseInt(z);
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
<input type="text" name="num1" id="num1" onkeyup="sum()">
<input type="text" name="num2" id="num2" onkeyup="sum()">
<input type="text" name="num2" id="result">
<script>
function sum()
{
var number1 = document.getElementById('num1').value;
var number2 = document.getElementById('num2').value;
if (number1 == '') {
number1 = 0
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
else if(number2 == '')
{
number2 = 0;
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
else
{
var num3 = parseInt(number1) + parseInt(number2);
document.getElementById('result').value = num3;
}
}
</script>
It's very simple:
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<body>
<p>Add Section</p>
<label>First Number:</label>
<input id="txt1" type="text"/><br />
<label>Second Number:</label>
<input id="txt2" type="text"/><br />
<input type="button" name="Add" value="Add" onclick="addTwoNumber()"/>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}
function addTwoNumber(){
var a = document.getElementById("txt1").value;
var b = document.getElementById("txt2").value;
var x = Number(a) + Number(b);
document.getElementById("demo").innerHTML = "Add Value: " + x;
}
</script>
</body>
</html>
If we have two input fields then get the values from input fields, and then add them using JavaScript.
$('input[name="yourname"]').keyup(function(event) {
/* Act on the event */
var value1 = $(this).val();
var value2 = $('input[name="secondName"]').val();
var roundofa = +value2+ +value1;
$('input[name="total"]').val(addition);
});
This can also be achieved with a more native HTML solution by using the output element.
<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
<input type="number" id="a" name="a" value="10" /> +
<input type="number" id="b" name="b" value="50" /> =
<output name="result" for="a b">60</output>
</form>
https://jsfiddle.net/gxu1rtqL/
The output element can serve as a container element for a calculation or output of a user's action. You can also change the HTML type from number to range and keep the same code and functionality with a different UI element, as shown below.
<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
<input type="range" id="a" name="a" value="10" /> +
<input type="number" id="b" name="b" value="50" /> =
<output name="result" for="a b">60</output>
</form>
https://jsfiddle.net/gxu1rtqL/2/
You can do a precheck with regular expression wheather they are numbers as like
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
if((x.search(/[^0-9]/g) != -1)&&(y.search(/[^0-9]/g) != -1))
var x = Number(y)+ Number(z);
else
alert("invalid values....");
document.getElementById("demo").innerHTML = x;
}
Use parseFloat it will convert string to number including decimal values.
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = parseFloat(y) + parseFloat(z);
document.getElementById("demo").innerHTML = x;
}
<p>
Click the button to calculate x.
<button onclick="myFunction()">Try it</button>
</p>
<p>
Enter first number:
<input type="text" id="txt1" name="text1" value="1">
Enter second number:
<input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
You can also write :
var z = x - -y ;
And you get correct answer.
<body>
<input type="text" id="number1" name="">
<input type="text" id="number2" name="">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, y ;
x = document.getElementById('number1').value;
y = document.getElementById('number2').value;
var z = x - -y ;
document.getElementById('demo').innerHTML = z;
}
</script>
</body>
Here goes your code by parsing the variables in the function.
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Try it</button>
<br/>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = y + z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Answer
An alternative solution, just sharing :) :
var result=eval(num1)+eval(num2);
Perhaps you could use this function to add numbers:
function calculate(a, b) {
return a + b
}
console.log(calculate(5, 6))

Nn algorithm that divides a single number three times Javascript

I'm trying to create an algorithm that divides a single number three times.
I've created this code, but it for some reason it doesn't work and I've got no clue why.
Could some one give me insight into what i'm doing wrong?
HTML
<form id="frm1">
Budget: <input id="budget" type="text" name="budget" value="110"><br>
<br>
Domestic:
<input id="low" type="text" name="low" value="20">%<br>
<input id="lowresult" type="text" name="low" oninput="calculate()"><br>
Continental:
<input id="med" type="text" name="med" value="30">% <br>
<input id="medresult" type="text" name="med" oninput="calculate()"><br>
International:
<input id="high" type="text" name="high" value="50">% <br>
<input id="highresult" type="text" name="high" oninput="calculate()"><br>
<br>
</form>
Javascript
function calculate() {
var budget = document.getElementById("budget").value;
var low = document.getElementById('low').value;
var med = document.getElementById('med').value;
var high = document.getElementById('high').value;
var lowResult = document.getElementById('lowresult');
var medResult = document.getElementById('medresult');
var highResult = document.getElementById('highresult');
var lowFinalResult = (budget /100)*low;
lowResult.value = lowResult;
var medFinalResult = (budget /100)*med;
medResult.value = medResult;
var highFinalResult = (budget /100)*high;
highResult.value = highResult;
}
adjust javascript
this
var lowFinalResult = (budget /100)*low;
lowResult.value = lowFinalResult;
insetad of
var lowFinalResult = (budget /100)*low;
lowResult.value = lowResult;
full code
function calculate() {
var budget = document.getElementById("budget").value;
var low = document.getElementById('low').value;
var med = document.getElementById('med').value;
var high = document.getElementById('high').value;
var lowResult = document.getElementById('lowresult');
var medResult = document.getElementById('medresult');
var highResult = document.getElementById('highresult');
var lowFinalResult = (budget /100)*low;
lowResult.value = lowFinalResult;
var medFinalResult = (budget /100)*med;
medResult.value = medFinalResult;
var highFinalResult = (budget /100)*high;
highResult.value = highFinalResult;
}
You wrote in the comment that you're "trying to input one amount into the 'budget' input". So I'd like to add that you do that calculate() in the budget input:
<form id="frm1">
Budget: <input id="budget" type="text" name="budget"
value="110" oninput="calculate()"><br>
So the oninput attribute of the other inputs can be removed.

how can i get total of two numbers using javascript

I'm using this form script to automatically calculate totals. Now I need to get that total and print it.
Here is my code.
function myFunction()
{
var x = document.getElementById("frm1");
var txt1 =x.elements[0].value;
var txt2 =x.elements[1].value;
var total =txt1+txt2;
document.getElementById("demo").innerHTML="total is :"+total;
}
<body>
<form id="frm1">
First value : <input type="text" name="first"><br>
Second Value : <input type="text" name="second"><br>
</form>
<p id="demo"></p>
<button onclick="myFunction()"> ADD </button>
</body>
It doesn't really say, but I'm guessing you're talking about numbers, if so parse the string values as numbers before you add them up
function myFunction() {
var x = document.getElementById("frm1");
var txt1 = parseFloat( x.elements[0].value );
var txt2 = parseFloat( x.elements[1].value );
var total = txt1 + txt2;
document.getElementById("demo").innerHTML = "total is :"+total;
}
FIDDLE

Categories