I am trying to build a calculator of sorts where you an input all but one variable and get the final variable autofilled in the form. I am trying this using a javascript function oninput for the form. However I am not sure how to achieve this. I have written a basic example of what I want below (though this does not work):
<form oninput="thermal()">
<input type="number" name="avgTemp" id="avgTemp" class="five-col">
<input type="number" name="volume" id="volume" class="five-col">
<input type="number" name="deltaTemp" id="deltaTemp" class="five-col">
<input type="number" name="Q" id="Q" class="five-col">
</form>
function thermal(){
var volume = document.getElementById("volume");
var deltaTemp= document.getElementById("deltaTemp");
value = deltaTemp;
}
function thermal(){
let avgTemp = document.getElementById("avgTemp").value;
let volume = document.getElementById("volume").value;
let deltaTemp = document.getElementById("deltaTemp").value;
let q = document.getElementById("Q") // no value here yet; we will make this our total
console.log(avgTemp, volume, deltaTemp, q)
}
Well, let's start with this. This gives you each input value individually - from here, we can implement the pertinent logic to combine input values into one input field. I will make the Q input our "total" just so you can get a picture of how combining may look.
function thermal(){
let avgTemp = document.getElementById("avgTemp").value;
let volume = document.getElementById("volume").value;
let deltaTemp = document.getElementById("deltaTemp").value;
let q = document.getElementById("Q");
let total = Number(avgTemp) + Number(volume) + Number(deltaTemp)
console.log(total)
q.value = total
}
I am not sure what you are looking for but this should give you a decent head start. Fire away if you have any questions.
If you want to play around with it, here is the codepen:
https://codepen.io/Pulse3358/pen/ExPZaVM
Related
Something that has bugged me for a while and always giving me headaches.
I have an input field with a value in numbers
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
I am picking up the value of the input field with
let charlife = document.getElementById('base-life');
I have a number with which i want to increase the value of the base-life input field. This of course changes dynamically based on other stuff but let's say it's 2
let increaseWith = 2;
in an onclick function i want to increase base-life with 2 (base-life + 2) everything it is clicked
function increase() {
charlife.value += increaseWith;
}
Now this only adds 2 to the value of the input field, makes it 202. I know that this happens when one of the numbers are actually strings. Perhaps my charlife. I tried everything and it gets worse. I tried parseInt(charlife.value) - no luck. I tried other methods but it doesn't work. And i only have this problem with input fields. When the element is just a or another simpler html element - it all works easier. Has to do with how JS parses input fields. Can someone shed some light?
let charlife = document.getElementById('base-life');
let increaseWith = 2;
function increase() {
value = parseInt(charlife.value);
value += increaseWith;
charlife.value = value;
}
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button onclick="increase()">Increase</button>
Here is the working snippet with some custom code that is according to your specifications
<input id="base-life" class="base-stats" type="number" name="base-life" value="20" readonly />
<button class="add" onclick="let increaseWith = 2;document.getElementById('base-life').value = parseInt(document.getElementById('base-life').value)+increaseWith;">add</button>
I want to get fee value with already calculated value without using onblur function.
HTML and JS Snippet:
var initialcost = document.getElementById("initialcost");
var Tfee = initialcost - (initialcost * 5)/100;
document.getElementById("fee").value = +Tfee;
<input type="text" readonly="readonly" value="1000" id="initialcost">
<input type="text" readonly="readonly" id="fee">
After autocalculating read-only value from id="initialcost" display the value in id="fee"
After trying this I get no result
Kindly help
You're attempting to calculate things using the element, not its value.
Replace
var initialcost = document.getElementById("initialcost");
with
var initialcost = parseFloat(document.getElementById("initialcost").value);
Example with automatic recalculation to boot:
var initialCostElement = document.getElementById("initialcost");
function compute() {
var initialcost = parseFloat(initialCostElement.value);
var Tfee = initialcost - (initialcost * 5)/100;
document.getElementById("fee").value = +Tfee;
}
initialCostElement.addEventListener("input", compute, false);
compute();
<input type="number" value="1000" id="initialcost">
<input type="text" readonly="readonly" id="fee">
first of all,
you are using the html element itself instead of its value in your calculation.
use:
var initialcost = document.getElementById("initialcost").value;
Moreover, I would replace the "var" type with contest in both variables since this are constants with non-changing values. The var is a more "old-fashioned" approach since "let" and "const" are newer additions to the js syntax,
Good luck!
Calculator which takes numbers written in input tag by users and then add them on clicking submit and shows result.
var numOne = document.getElementById("first");
var numTwo =
document.getElementById("second");
var submit = document.getElementById("submit");
var added = document.getElementById("answer");
submit.addEventListner( function(){
var one = numOne.value;
var two = numTwo.value;
added.innerHTML = one + two;
})
Please tell me the mistake
html
<input type="number" id="a">
<input type="number" id="b">
<input type="submit" id="submit">
<h1 id="answer"></h1>
Javascript
var submit = document.querySelector('#submit');
var answer = document.querySelector('#answer');
submit.addEventListener('click', () => {
var a = document.querySelector('#a').value;
var b = document.querySelector('#b').value;
answer.textContent = Number(a) + Number(b);
})
This is pretty straightforward but can be expanded upon to validate input properly and do other calculations.
Firstly, if you take a look at the html, you can see two number input fields and one submit button. Note that I have given them all IDs so that we can select them in our JS file. I have also provided an empty h1 element in which we will display the answer of our calculation.
In the JS file we are just listening for a click event on the submit button at which point, we capture the values entered into your input fields and add them together after coercing their type to numbers.
Finally, we return the sum of these values to the DOM as the textContent of the h1 element with id="answer"
I have built a table with custom inputs numbers with jeditable. The Input type is gone once you put the value
I need to find a JavaScript Real Time Calculation which automatically makes the amount of my values.
I have found 2 interesting examples very suitable for my case but there is the possibility to achieve it the same without using the form and inputs?
First example
Second example
Yes, it is. As you know a div element can be accessed by document.getElementById('div_id') and its value can be accessed by document.getElementById('div_id').value.
So take out the form and insert an id for the div's that you need and access the value and then find the sum and then set the value as the sum to another div. Here is the code
<script>
function calculateBMI() {
var wtStr =document.getElementById('w').value;
if (!wtStr)
wtStr = '0';
var htStr = document.getElementById('h').value;
if (!htStr)
htStr = '0';
var weight = parseFloat(wtStr);
var height = parseFloat(htStr);
document.getElementById("r").value = weight + height;
}
</script>
<input id = "w" type="Text" name="weight" size="4" onkeyup="calculateBMI()"> Weight (in Kilos)
<input id = "h" type="Text" name="height" size="4" onkeyup="calculateBMI()"> Height (in Centimeters)<br>
<input id = "r" type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
and if you don't want input you can use textarea.
I have a simple HTML form that asks a user to input their name, SKU, quantity, and comments. This is for a simple inventory request system.
<html>
<body>
<form id="myForm" method="post">
<input type="submit">
<br>Name: <input type="text" name="form[name]">
<br>SKU: <input type="text" name="form[SKU1]">
<br>Quantity: <input type="text" name="form[quantity1]">
<br>Comment: <input type="text" name="form[comment1]">
</form>
Add item
<script>
var num = 2; //The first option to be added is number 2
function addOption() {
var theForm = document.getElementById("myForm");
var newOption = document.createElement("input");
newOption.name = "form[SKU"+num+"]"; // form[varX]
newOption.type = "text";
theForm.appendChild(newOption); //How can I add a newline here?
optionNumber++;
}
</script>
</body>
</html>
Currently I can only get it working where it will add a single form value. I would like to recreate the entire myForm except for the name field with a single click.
Your post is very old, so presumably you've found an answer by now. However, there are some things amiss with your code.
In the JavaScript code you have
var num = 2;
This is the number that is incremented to keep track of how many "line-items" you will have on the form. In the function addOption(), though, instead of incrementing num you have
optionNumber++;
You never use optionNumber anywhere else. Your code works once, when you add the first item, but since you increment the wrong variable, you are effectively always adding option 2.
Oh, and adding the newline: you need to append a <br> element.