Hello guys so im new to js and i'm trying to make a simple programme that caculate delta but the problem is that i always the value of delta 0 but when i set a static value to delta like an int it show the value correct where is the probleme and thanks
var first = document.getElementById("Cofession1"),
second = document.getElementById("Cofession2"),
third = document.getElementById("Cofession3"),
displayMessage = document.getElementById("solution"),
a = first.value,
b = second.value,
c = third.value,
btnClick = document.getElementById("calculateButton");
btnClick.onclick = function () {
var delta = b*5;
displayMessage.innerHTML = "delta = " + delta;
}
and this is the html
<input type="text" name="" id="Cofession1" placeholder="The value of a">
<input type="text" name="" id="Cofession2" placeholder="The value of b">
<input type="text" name="" id="Cofession3" placeholder="The value of c">
<button id="calculateButton">Calculate</button>
<div id="solution"></div>
The values of a, b, and c do not update automatically: you will need to assign them within the onclick method so that they reflect the value at the time the button is clicked. Otherwise they will always be an empty string since they are only evaluated at runtime.
Also, I do not recommend assigning directly to onclick, but use the more modern addEventListener instead.
var first = document.getElementById("Cofession1");
var second = document.getElementById("Cofession2");
var third = document.getElementById("Cofession3");
var displayMessage = document.getElementById("solution");
btnClick = document.getElementById("calculateButton");
btnClick.addEventListener('click', function() {
// Assign values in the event handler
var a = first.value;
var b = second.value;
var c = third.value;
var delta = b * 5;
displayMessage.innerHTML = "delta = " + delta;
});
<input type="text" name="" id="Cofession1" placeholder="The value of a">
<input type="text" name="" id="Cofession2" placeholder="The value of b">
<input type="text" name="" id="Cofession3" placeholder="The value of c">
<button id="calculateButton">Calculate</button>
<div id="solution"></div>
Related
How can I add an value to an input type.
I'm currently working on a converter for meter to kilometer, to mile, ...
I've created different input types in my HTML Code and took the value of them in JS, which worked completely fine, and I prevented the page from reloading after I click submit. Now I want to reassign the new, calculated value (kilometer.value = meter / 1000), but this doesn't work.
It works completely fine, when I'm putting an console.log after the variable meter and the first variable kilometer. It logs the correct number - the reassignment just doesn't work.
JavaScript:
const calculateMeter = () => {
let meter = document.getElementById("meter").value;
let kilometer = document.getElementById("kilometer").value;
kilometer.value = meter / 1000;
}
HTML:
<form id="calculator" onsubmit="calculateMeter(); return false">
<label for="kilometer">Kilometer:</label>
<input type="number" id="kilometer"><br>
<label for="meter">Meter:</label>
<input type="number" id="meter"><br>
value of <input> is always a string, but in case of numerical input types, like type="number", or type="range", you can get the number directly using valueAsNumber:
const calculateMeter = () => {
let kilometer = document.getElementById("kilometer").valueAsNumber;
document.getElementById("meter").value = kilometer * 1000;
}
const calculateKilometer = () => {
let meter = document.getElementById("meter").valueAsNumber;
document.getElementById("kilometer").value = meter / 1000;
}
<label for="kilometer">Kilometer:</label>
<input type="number" id="kilometer" oninput="calculateMeter()"><br>
<label for="meter">Meter:</label>
<input type="number" id="meter" oninput="calculateKilometer()"><br>
Did you mean something like, that?
let meterInp = document.getElementById("meter");
let kilometerInp = document.getElementById("kilometer");
meterInp.addEventListener("change", ()=>{
kilometerInp.value = (+meterInp.value)/1000;
});
kilometerInp.addEventListener("change", ()=>{
meterInp.value = (+kilometerInp.value)*1000;
});
<form id="calculator" onsubmit="calculateMeter(); return false">
<label for="kilometer">Kilometer:</label>
<input type="number" id="kilometer" step="0.00001"><br>
<label for="meter">Meter:</label>
<input type="number" step="0.01" id="meter"><br>
</form>
The (+) converts string to number.
for e.g. (+meterInp.value)/1000
You should convert meter to intiger
const calculateMeter = () => {
let meter = document.getElementById("meter").value;
let kilometer = document.getElementById("kilometer").value;
kilometer.value = Number(meter) / 1000;
}
I'm not sure why my code isn't multiplying the two numbers when I change them. Once I enter a number in the Multiplier field, the onchange function continues adding values and if its a null value, it enters "NaN"
<body>
<h1>Mutiply</h1>
<p>Multiplicand: <input type="text" id="multiplicand" value="0" onchange="multiply()"></p>
<p>Multiplier: <input type="text"/ id="multiplier" value="0" onchange="multiply()"></p> <br>
<div>
<p><span id="showMulipicand">0</span>
×
<span id="showMultiplier">0</span> = <span id="showProduct">0</span></p>
</div>
<script src="multiply.js"></script>
multiply() {
var multiplicand = document.getElementById('multiplicand').value;
var multiplier = document.getElementById('multiplier').value;
var showProduct = parseInt(multiplicand) * parseInt(multiplier);
var p = document.getElementById('showProduct');
p.innerHTML += showProduct;
}
You are appending the result to the content of your p tag.
If you just want to show the result, you have to override the innerHTML instead of appending to it.
p.innerHTML = showProduct;
Also, if you want to update the result as you type, use the oninput event instead of onchange which will only trigger when you leave the <input> field.
If you also want to update the multiplier and multiplicand fields, just do the same as for the product:
document.getElementById('showMulipicand').innerHTML = multiplicand;
To avoid NaN problems, when you read the multiplier/multiplicand from the <input>, do a logical or with 0, this way, if the field is blank, its value will be 0.
You should also change the <input> type from text to number.
Here is the code for showing the multiplication result:
function multiply() {
const multiplicand = document.getElementById('multiplicand').value || 0;
const multiplier = document.getElementById('multiplier').value || 0;
const product = parseInt(multiplicand) * parseInt(multiplier);
document.getElementById('showMulipicand').innerHTML = multiplicand;
document.getElementById('showMultiplier').innerHTML = multiplier;
document.getElementById('showProduct').innerHTML = product;
}
<h1>Mutiply</h1>
<p>Multiplicand: <input type="number" id="multiplicand" value="0" oninput="multiply()"></p>
<p>Multiplier: <input type="number" id="multiplier" value="0" oninput="multiply()"></p>
<p>
<span id="showMulipicand">0</span> ×
<span id="showMultiplier">0</span> = <span id="showProduct">0</span>
</p>
I am creating a simple equation solver that involves division. I have two text boxes, One for "Mass" and one for "Element". I want to create a variable "H" and set it equal to 1, that way when the user types in "2" in the mass box and "H" in the element box, the output will say "1".
Here is my HTML
<div id="GramsToMolesContainer"><div id="GramMolesText">
<font size=3>Grams To Moles</font></div>
<form>
Grams : <input type="text" id="GramsChoice" /><br>
Element : <input type="text" id="ElementChoice" /><br>
<input type="button" onClick="GramstoMoles()" Value="Convert" />
</form>
<p>Molar Mass : <br>
<span id = "resultMolarMass"></span>
</p>
</div>
Here is my Javascript:
function GramstoMoles()
{
var H = 1;
GramsState = document.getElementById("GramsChoice").value;
ElementState =
document.getElementById("ElementChoice").value;
document.getElementById("resultMolarMass").innerHTML
= GramsState / ElementState;
}
you will need to create a dictionary.
this is how your function should look. every time that you want to add an element - create a new key-value pair.
function GramstoMoles()
{
var elements = {h:1, he:2};
GramsState = document.getElementById("GramsChoice").value;
ElementState =
document.getElementById("ElementChoice").value;
document.getElementById("resultMolarMass").innerHTML
= parseInt(GramsState) / elements[ElementState];
}
Check this working snippet of your code!
If you wan to set H as an inital value of some box, do
var ElementState = document.getElementById("ElementChoice").value = H; before you call the function.
function GramstoMoles (){
var H = 1;
var GramsState = document.getElementById("GramsChoice").value;
var ElementState = document.getElementById("ElementChoice").value;
document.getElementById("resultMolarMass").innerHTML = GramsState / ElementState;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="GramsToMolesContainer"><div id="GramMolesText">
<font size=3>Grams To Moles</font></div>
<form>
Grams : <input type="text" id="GramsChoice" /><br>
Element : <input type="text" id="ElementChoice" /><br>
<input type="button" onClick="GramstoMoles()" Value="Convert" />
</form>
<p>Molar Mass : <br>
<span id = "resultMolarMass"></span>
</p>
</div>
When you get the var element and var grams ,
var elements = ['H','He','Li','Be',...];
var atomicmasses = [1,4,6,9,.....];
var molarmass = molarmasses[elements.indexOf(element)];
var mole = grams/molarmass;
I'm trying to get the values from the inputs in my form with JavaScript. But whenever I hit submit, I either get nothing, 0 or undefined. Mostly undefined. It doesn't seem to get any of the values.
Here's the code
<form id="ecoCalculator">
<div class="form-group">
<label for="k0">Start Kapital</label>
<input type="number" name="k0" class="form-control" id="k0">
</div>
<div class="form-group">
<label for="kn">Slut Kapital</label>
<input type="number" name="kn" class="form-control" id="kn">
</div>
<div class="form-group">
<label for="x">Rente</label>
<input type="number" name="x" class="form-control" id="x">
</div>
<div class="form-group">
<label for="n">Terminer</label>
<input type="number" name="n" class="form-control" id="n">
</div>
<div class="ecoButtons">
<input type="button" value="Udregn" class="btn btn-default" onclick="k0Eco()">
<input type="reset" value="Ryd" class="btn btn-default">
</div>
</form>
<div class="ecoResult">
<p id="ecoResult">Resultat</p>
</div>
</div>
<script type="text/javascript">
// Public Variables
var k0 = document.getElementById('k0').value();
var kn = document.getElementById('kn').value();
var x = document.getElementById('x').value();
var n = document.getElementById('n').value();
// Calculation of Initial Capital
function k0Eco() {
// Calculation
var k0Value = kn / (1 + x) ^ n;
// Show Result
document.getElementById("ecoResult").innerHTML = k0;
}
I've looked around at different questions but haven't found a solution to this yet.
I've tried to change the names of the inputs, having the function only display a single value, but still no result.
Thanks
value isn't a function, it's a property. Change
var k0 = document.getElementById('k0').value()
to
var k0 = document.getElementById('k0').value
Your script also runs on page load, so nothing is filled yet. You need to put the whole thing in a submit handler:
document.getElementById('ecoCalculator').addEventListener('submit', function(e) {
e.preventDefault();
// your code here
});
Now remove the inline js from the button and make it type submit:
<input type="submit" value="Udregn" class="btn btn-default" />
And remove the function in your js
var k0 = document.getElementById('k0').value;
var kn = document.getElementById('kn').value;
var x = document.getElementById('x').value;
var n = document.getElementById('n').value;
// Calculation
var k0Value = kn / (1 + x) ^ n;
// Show Result
document.getElementById("ecoResult").innerHTML = k0Value;
Here's a working fiddle
you need to parse the input value in int. for eg.
// Public Variables
var k0 = parseInt(document.getElementById('k0').value);
var kn = parseInt(document.getElementById('kn').value);
var x = parseIntdocument.getElementById('x').value);
var n = parseIntdocument.getElementById('n').value);
Use value instead of value(). It is a property not a function.
Put your variables inside your function. When page loads you variables
are getting the value of the inputs and there is nothing there.
function k0Eco() {
var k0 = document.getElementById('k0').value;
var kn = document.getElementById('kn').value;
var x = document.getElementById('x').value;
var n = document.getElementById('n').value;
var k0Value = kn / (1 + x) ^ n;
document.getElementById("ecoResult").innerHTML = k0Value;
}
Put you javascript code inside <head> tag or at least before the button. When you try to fire onclick() event, your function is not created yet.
Ok, say I have a checkbox such as this:
<input type="checkbox" value="1" class="discount_select" name="select[101132]">
...and 3 text fields like this:
<input type="text" name="start[101132]">
<input type="text" name="end[101132]">
<input type="text" name="discount[101132]">
I am running some code right now that will update the text field values if the checkbox is checked, however I'm not sure if or how you can target the correct fields as they all have different ID's.
So I basically have this code to loop through the checked boxes, but not sure how to make updates to the correct text fields:
// Get values
var discount = $('#apply_discount').val();
var start = $('#apply_start_date').val();
var end = $('#apply_end_date').val();
$('.discount_select:checked').each(function() {
// How can I target the correct fields/ID's here?
});
Try
// Get values
var discount = $('#apply_discount').val();
var start = $('#apply_start_date').val();
var end = $('#apply_end_date').val();
$('.discount_select:checked').each(function() {
var num = this.name.substring(7, this.name.length - 1);
$('input[name="start[' + num + ']"]').val(start)
$('input[name="end[' + num + ']"]').val(end)
$('input[name="discount[' + num + ']"]').val(discount)
});
Change the name and ids of your fields to make it simpler
<input type="checkbox" value="1" class="discount_select" id="101132" name="select_101132">
<input type="text" name="start_101132">
<input type="text" name="end_101132">
<input type="text" name="discount_101132">
Then:
var discount = $('#apply_discount').val();
var start = $('#apply_start_date').val();
var end = $('#apply_end_date').val();
$('.discount_select:checked').each(function() {
var select_id = this.attr("id");
$('[name=start_'+select_id+']').val(start);
$('[name=end_'+select_id+']').val(end);
$('[name=discount_'+select_id+']').val(discount);
});