Pure Js (3 input calculated in real time)? - javascript

Build a basic calculator.
<html>
<body>
<input class="numb1" type=number name="secondBox" value="">
<input class="numb2" type=number name="secondBox" value="">
<input class="numb3" type=number name="thirdBox" value="" readonly>
</body>
</html>

<html><input type='number' id='one' placeholder='00' onblur='calculate()'>
/
<input type='number' id='two' placeholder='00' oninput='calculate()'>
<input type='number' id='result' placeholder='Result' disabled>
<script>
function calculate(){
var one = document.querySelector('#one').value;
var two = document.querySelector('#two').value;
var result = document.querySelector('#result');
result.value = Math.floor(one/two);
}
</script>
</html>

Here is a working example:
var evN1 = document.getElementById("no1Box");
evN1.addEventListener("input", calculate, false);
var evN2 = document.getElementById("no2Box");
evN2.addEventListener("input", calculate, false);
function calculate() {
var n1 = document.getElementById("no1Box").value;
var n2 = document.getElementById("no2Box").value;
var r = n1/n2;
document.getElementById("result").innerHTML = "Result: " + r;
}
body {padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;}
div {margin:15px;}
label {display:block;}
input {border:solid 1px #888;font-size:20px;border-radius:5px;padding:2px;outline:none;}
.myInput {box-shadow:0 0 4px green;}
<!DOCTYPE html>
<html>
<body>
<label for="input">Input 1</label>
<input class="myInput" id="no1Box" type=number name="firstBox" value="">
<label for="input">Input 2</label>
<input class="myInput" id="no2Box" type=number name="secondBox" value="">
<p id="result"/>
</body>
</html>
Through document.getElementById("no1Box"); you take the element with the uniquie id that you set on html see more about getElementById here and by using .value you get the value that you introduced in your input.
After taking the element var evN2 = document.getElementById("no2Box"); add a listener to him evN2.addEventListener("input", calculate, false); and tell what function should execute when the input is changed. more examples for eventListener here
If you have questions, feel free to ask.

Related

My results of calculation appear on a different page

I need to create code which automatticaly calculates the circumference when the length and width are entered in two different boxes.
I managed to do so, but I want the answer to appear underneath the "calculate" button, but the answer will make the button and boxes disappear. Could someone tell me what I need to change?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<form>
Width:<br>
<input id="Width" type="text" name="Width">
<br>Length<br>
<input id="Length" type="text" name="Length">
<br><br>
<input type="button" value="Calculate circumference" onclick="doMath()">
</form>
<script>
function doMath() {
var Width1 = document.getElementById('Width').value;
var Length1 = document.getElementById('Length').value;
var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
document.write(Circ);
}
</script>
</body>
</html>
Do not use document.write function. The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML. Create a paragraph tag and give an id and place your result in that paragraph.
<!DOCTYPE html>
<html>
<body>
<form>
Width:<br>
<input id="Width" type="text" name="Width">
<br>Length<br>
<input id="Length" type="text" name="Length">
<br><br>
<input type="button" value="Calculate circumference" onclick="doMath()">
<p id="result">
</p>
</form>
<script>
function doMath() {
var Width1 = document.getElementById('Width').value;
var Length1 = document.getElementById('Length').value;
var Circ = parseInt(Width1) + parseInt(Width1) + parseInt(Length1) + parseInt(Length1);
//document.write(Circ);
document.getElementById("result").textContent = Circ;
}
</script>
</body>
</html>
Try adding a black paragraph to the html and then use document.getElementById("").innerHTML to change the text inside of it.

How to Add Two Input Values And Show In The Third Input Box ?? with simple JavaScript like this help me where i was wrong [duplicate]

This question already has answers here:
Add two textbox values and display the sum in a third textbox automatically
(8 answers)
Closed 3 years ago.
1)I want to add the values of two input boxes and show it in the third input. It shows an error
2)Error: Uncaught TypeError: Cannot read property 'value' of null
at sum (js.php:21)
at HTMLButtonElement.onclick (js.php:12)
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function sum() {
var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
var sum = val1 + val1;
document.getElementById('total').value = sum;
}
</script>
</head>
<body>
<input type="text" name="val1"><br><br>
<input type="text" name="val2"><br><br>
<input disabled name="total" value=""><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
</body>
</html>
I expected the sum of two inputs but it shows nothing.
You should have the attribute id for the controls which you are referencing in your code with getElementById(). You also have to convert the string value to number to perform the arithmetic operation:
function sum(){
var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
var sum = Number(val1) + Number(val2);
document.getElementById('total').value = sum;
}
<input type="text" name="val1" id="val1"><br><br>
<input type="text" name="val2" id="val2"><br><br>
<input name="total" id="total" value=""><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
You are using HTML DOM getElementById() Method, so you should assign an Id to your input total in order to resolve the issue:
<input type="hidden" name="total" id="total" value="">
You should add Id to your input. You use getElementById, but your input doesn't have any id, so it will retourn null.
<input type="text" name="val1" id="val1"><br><br>
<input type="text" name="val2" id="id="val2"><br><br>
<input type="hidden" name="total" value="" id="total"><br><br>
You can do with click on button to sum of two input value OR with use of onblur events also
<script type="text/javascript">
function sum(){
var val_1 = document.getElementById('val1').value;
var val_2 = document.getElementById('val2').value;
var sum = Number(val_1) + Number(val_2);
document.getElementById('total').value = sum;
}
</script>
<input type="text" id="val1" onblur="sum()"><br><br>
<input type="text" id="val2" onblur="sum()"><br><br>
<input id="total" value=""><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
You should use id attribute to get the input value which you are referencing in your code with getElementById().
and You also have to convert the string value to number to perform the arithmetic operation because when we get value from inputs it will a string value
for convert string to number you can use + sign like in code
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function sum(){
var val1 = +document.getElementById('val1').value;
var val2 = +document.getElementById('val2').value;
document.getElementById('total').value = val1+val2;
}
</script>
</head>
<body>
<input type="text" name="val1" id="val1"><br><br>
<input type="text" name="val2" id="val2"><br><br>
<input type="hidden" name="total" id="total" value=""><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
</body>
</html>
document.getElementsByName returns a NodeList of elements so it doesn't have property .value.
This is getElementsByName snippet.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function sum() {
var val1 = document.getElementsByName('val1')[0].value;
var val2 = document.getElementsByName('val2')[0].value;
var sum = parseInt(val1) + parseInt(val2); // by default it appends a string. Hence, parseInt to parse string to integer
document.getElementsByName('total')[0].value = sum;
console.log(document.getElementsByName('total')[0].value);
}
</script>
</head>
<body>
<input type="text" name="val1"><br><br>
<input type="text" name="val2"><br><br>
<input type="hidden" name="total" value=""><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
</body>
</html>
This is getElementById snippet
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function sum() {
var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
var sum = parseInt(val1) + parseInt(val1); // by default it appends a string. Hence, parseInt to parse string to integer
document.getElementById('total').value = sum;
console.log(document.getElementById('total').value);
}
</script>
</head>
<body>
<input type="text" name="val1" id="val1"><br><br>
<input type="text" name="val2" id="val2"><br><br>
<input type="hidden" name="total" value="" id="total"><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
</body>
</html>
Try This
<script>
function sum(){
var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
var sum = +val1 + +val2;
document.getElementById('total').value = sum;
}
</script>
<body>
<input type="text" name="val1" id="val1"><br><br>
<input type="text" name="val2" id="val2"><br><br>
<input type="hidden" name="total" id="total" value=""><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
</body>
OR Fetch through name
<script>
function sum(){
var val1 = document.getElementsByName('val1')[0].value;
var val2 = document.getElementsByName('val2')[0].value;
var sum = +val1 + +val2;
document.getElementsByName('total')[0].value = sum;
}
</script>
<body>
<input type="text" name="val1" ><br><br>
<input type="text" name="val2" ><br><br>
<input type="hidden" name="total" value=""><br><br>
<button type="button" onclick="sum()" name="btn">Add</button>
</body>

HTML-Javascript Input-Calculation-Output

I need just want to add some textboxes/form to input data from a user through HTML and take them into variables in a script that will run a calculation and then output the answer to the calculation. I have some code but its not working properly. It seems that when the submit button is clicked, the function isn't called. Any help would be great: here's the code.
<form id="frm1" action="form_action.asp">
Initial Displacement: <input type="number" name="x"><br>
Initial Velocity: <input type="number" name="v"><br>
Acceleration: <input type="number" name="a"><br>
Time Passed: <input type="number" name="t"><br>
<input type="button" onclick="calc()" value="Submit"/>
</form>
<script>
function calc()
{
var b=document.getElementById("frm1");
document.write(b.element[0].value+b.element[1].value*b.element[2].value+(1/2)*b.element[3].value*b.element[2].value*b.element[2].value);
}
</script>
https://jsfiddle.net/zytyf16q/#&togetherjs=qABKDyLpK2
There is a mistype in your code on the submit button. Your submit button should look like:
<!DOCTYPE html>
<html>
<body>
Initial Displacement:
<input type="number" id="x" name="x">
<br> Initial Velocity:
<input type="number" id="v" name="v">
<br> Acceleration:
<input type="number" id="a" name="a">
<br> Time Passed:
<input type="number" id="t" name="t">
<br>
<input type="button" onclick="calc('x','v','a','t')" value="Submit">
</body>
<script>
function calc(x, v, a, t) {
var Displace = parseInt(document.getElementById(x).value)
var Velocity = parseInt(document.getElementById(v).value)
var Acceleration = parseInt(document.getElementById(a).value)
var Time = parseInt(document.getElementById(t).value)
var calculations = Displace + (Velocity * Acceleration) + ((1 / 2) * Time * Acceleration * Time);
alert(calculations)
}
</script>
</html>
I added id's to the inputs, and then used document.getElementById to select them and save them to a variable with their respective name. Then I carried out the calculation.
<form id="frm1" action="form_action.asp">
Initial Displacement: <input type="number" name="x" id="x"><br>
Initial Velocity: <input type="number" name="v" id="v"><br>
Acceleration: <input type="number" name="a" id="a"><br>
Time Passed: <input type="number" name="t" id="t"><br>
<input type="button" onclick="calc()" value="Submit"/>
</form>
<script>
function calc()
{
var x = document.getElementById('x').value
var v = document.getElementById('v').value
var a = document.getElementById('a').value
var t = document.getElementById('t').value
document.write(x+v*a+(1/2)*t*a*a);
}
</script>

Calculate values of textboxes automatically using jQuery

I want to calculate the value of the 1st 2 text boxes without a command button
Example i have 3 text boxes.
The first 2, where the numbers will be inputed and the last 1 will be the sum or product and so on.
Now i want it to auto compute.
For example i have inputed values 2 and 3 on the 1st 2 text boxes then automatically the sum or product or whatever result will be displayed on the 3rd text box.
How am i able to do this? Thanks
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#textone').val());
texttwo = parseFloat($('#texttwo').val());
var result = textone + texttwo;
$('#result').val(result.toFixed(2));
});
</script>
</head>
<body>
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">
</body>
</head>
You can achieve this by using jQuery.
Include jQuery in your project by putting this in your <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Then, at the end of the file:
<script>
$('#texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#textone').val());
texttwo = parseFloat($('#texttwo').val());
var result = textone + texttwo;
$('#result').val(result.toFixed(2));
});
</script>
This will give you the result when ever you change the value of the second box.
You will need to do this, too:
Change
<input type=text name=value1>
<input type=text name=value2>
<input type=text name=result>
to:
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">
EDIT
This is my entire file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="value1" id="textone">
<input type="text" name="value2" id="texttwo">
<input type="text" name="result" id="result">
<script>
$('#texttwo').keyup(function(){
var textone;
var texttwo;
textone = parseFloat($('#textone').val());
texttwo = parseFloat($('#texttwo').val());
var result = textone + texttwo;
$('#result').val(result.toFixed(2));
});
</script>

Simple Gallon Calculator

I'm attempting to build a simple web form that takes 3 number inputs and outputs one number based on this formula: (a*b*c)/271).
This is the code I have but nothing is displayed in the output.
Clearly I have almost no clue what I'm doing.
I appreciate all help:
<body>
<img id="logo"src="images/a&l.png" alt="A&L Cesspool"/>
<h1>Grease Trap Gallon Calculator<h2>
<form name=calculator">
<input label="length" type="number" id="a">
<input label="width" type="number" id="b">
<input label="height" type="number" id="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6" >
</form>
<script language="JavaScript" type="text/javascript">
<!--
function gallons() {
var LENGTH = document.calculator.a.value;
var WIDTH = document.calculator.b.value;
var HEIGHT = document.calculator.c.value;
var Total =(LENGTH*WIDTH*HEIGHT)/271;
document.calculator.OUTPUT.value = Total;
}
// -->
</script>
document.forms.calculator. There's no such thing as document.calculator. Also, form elements need name attributes to refer to them in form context, not IDs.
In other news
You have unclosed quotes
You have irregular naming conventions (OUTPUT, a, Total)
You have irregular quotes policy (sometimes you have, sometimes you don't).
So basically
<form name="calculator">
<input label="length" type="number" name="a">
<input label="width" type="number" name="b">
<input label="height" type="number" name="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6">
</form>
function gallons() {
var LENGTH = document.forms.calculator.a.value;
var WIDTH = document.forms.calculator.b.value;
var HEIGHT = document.forms.calculator.c.value;
var Total = (LENGTH * WIDTH * HEIGHT) / 271;
document.forms.calculator.OUTPUT.value = Total;
}
Please grab a proper tutorial from MDN or some similar good source, and start reading.
Your call to document.calculator is not finding the element because its looking by id
change your form definition and it will work
<form name="calculator" id="calculator">

Categories