Develop Reference

Javascript button not working with function

I can't figure out why this function is not working. Assignment instructions call for the javascript function code to be in it's own javascript file.
Here is the html
<h2>BMI Calculator</h2>
<form>
<input type="text" id="weight" value="0" />
<label for="weight">Weight in pounds</label>
<input type="text" id="height" value="0" />
<label for="height">Height in inches</label>
<input type="text" id="Result" value="0" />
<label for="Result"> BMI Result </label>
<input type="submit" id="submit" value="Calculate BMI" />
</form>
Here is the function based on that form. It's supposed to calculate the bmi.
function calcBMI() {
var weight = parseInt(document.getElementByID("weight").value);
var height = parseInt(document.getElementByID("height").value);
var result = (weight * 703) / (height * height);
var textbox = document.getElementById('Result').value;
textbox.value = result;
}
document.getElementById("submit").addEventListener("click", calcBMI, false);

3 things:
getElementById must be in camel case. Not with capital D's at the end
Reference to textbox should be just var textbox = document.getElementById('Result') and not with .value at the end.
Button's type should be button otherwise the form is being posted.
Your working example:
function calcBMI() {
var weight = parseInt(document.getElementById("weight").value);
var height = parseInt(document.getElementById("height").value);
var result = (weight * 703) / (height * height);
var textbox = document.getElementById('Result');
textbox.value = result;
}
document.getElementById("submit").addEventListener("click", calcBMI, false);
<h2>BMI Calculator</h2>
<form>
<input type="text" id="weight" value="0" />
<label for="weight">Weight in pounds</label>
<input type="text" id="height" value="0" />
<label for="height">Height in inches</label>
<input type="text" id="Result" value="0" />
<label for="Result"> BMI Result </label>
<input type="button" id="submit" value="Calculate BMI" />
</form>

1.
At a glance it seems as though you are not preventing the default browser behaviour, you need to use event.preventDefault() to prevent the form submitting.
function [...](e) {
e.preventDefault();
[...]
}
2.
Ensure you DOM has loaded before manipulation begins by loading the JavaScript below the HTML or you can make use of the DOMContentLoaded event.
3.
A sanity check, ensure that the script has been loaded using the <script></script> tags. If it is an external file, use the src property, if it is just code, wrap it in the aforementioned tags.
4.
You need to change the usage of getElementById you have used getElementByID instead of the lowercase d in Id.
5.
When you are doing textbox.value = result; what you are actually doing is textbox.value.value = result; as you have referenced it as .value originally.
Finally,
Make use of the console as it'll have saved you from asking here as the errors are thrown in them.

There are few problems with your function:
You have a typo in document.getElementByID, it should be document.getElementById
You have to pass an event object into your function, and invoke preventDefault, so that your form won't be submitted to the server
the line:
var textbox = document.getElementById('Result').value;
it should be
var textbox = document.getElementById('Result');
So overall, your function should look like:
function calcBMI(e) {
e.preventDefault();
var weight = parseInt(document.getElementById("weight").value);
var height = parseInt(document.getElementById("height").value);
var result = (weight * 703) / (height * height);
var textbox = document.getElementById('Result');
textbox.value = result;
}

Use on click event, change your getElementByID to getElementById and change the type to button and not submit. Submit would post it but what you need is to call the function.
<input type="button" id="submit" value="Calculate BMI" onclick="calcBMI()"/>
In your javascript change
var textbox = document.getElementById('Result').value
To
var textbox = document.getElementById('Result').value = result;
And remove
textbox.value = result;

You made a mistake here in weight and heightIt should be in camel case only.
document.getElementById("your id")
and also why not you check in console what error it shows

JavaScript keyup and onload to calculate a field total

I am calculating two text inputs using JavaScript. It works with keyup. Ie when typing, the balance calculates in realtime. However, I want the total to calculate and display not only on keyup, but onload as well, so for when I load the page, that it calculates the fields already.
This is my current working javascript code for keyup only
<script type="text/javascript">
$(document).on("keyup", function() {
var sum = 0;
$(".totalCal").each(function(){
sum += +$(this).val();
});
$("#total").val(sum);
document.getElementById('grandTotal').innerHTML = sum.toFixed(2);
});
</script>

https://jsfiddle.net/L2s5yoth/
HTML:
<input type="text" value="0" class="totalCal"><br />
<input type="text" value="1" class="totalCal"><br />
<input type="text" value="2" class="totalCal"><br />
<input type="text" value="3" class="totalCal"><br />
<div id="total">0</div>
jQuery:
$(document).ready(calculate);
$(document).on("keyup", calculate);
function calculate() {
var sum = 0;
$(".totalCal").each(function(){
sum += +$(this).val();
});
$("#total").html(sum);
}

I think that something like this would be work
<script type="text/javascript">
$(document).ready(calculate());
$(document).on("keyup", calculate());
function calculate() {
var sum = 0;
$(".totalCal").each(function(){
sum += +$(this).val();
});
$("#total").val(sum);
document.getElementById('grandTotal').innerHTML = sum.toFixed(2);
});
}
</script>

Adding 2 Numbers following onChange in form - Javascript

I want to do something very simple!!
I have a form... I want to enter 2 numbers and have a box that updates with the sum of the two numbers I've inputted.
Unfortunately - the code I'm using seems to see the values as text and just puts them next to each other... so 5+1 becomes 51...
Here is the code:
`
function av(avSelect)
{
var one=avSelect.form.one.value;
var two=avSelect.form.two.value;
var avvy=one+two;
avSelect.form.avvy.value=avvy;
}
</script>
<form name="5">
<br>
Adding<input type="number" id="avvy" value="">
Put a number in:<input type="number" id="one" OnChange="av(this)">
Put a number in:<input type="number" id="two" OnChange="av(this)">
</form>`

Try
var one = parseFloat(avSelect.form.one.value);
var two = parseFloat(avSelect.form.two.value);

var one = parseInt(avSelect.form.one.value);
var two = parseInt(avSelect.form.two.value);
var avvy = one+two;
avSelect.form.avvy.value=avvy;

I've juste made the solution for you:
http://jsfiddle.net/c2dJt/
For the Jquery:
$(document).ready(function(){
$(document).on('change', '.change', function(){
var number = parseFloat($('#one').val()) + parseFloat($('#two').val());
$('#avvy').val(number);
});
});
Fot the HTML:
<form name="5">
Adding<input type="number" id="avvy" value="">
Put a number in:<input type="number" id="one" class="change">
Put a number in:<input type="number" id="two" class="change">
</form>

It is added as a string and not as an integer. The parseInt() function parses a string and returns an integer. This should fix the issue
<script type="text/javascript">
function av(avSelect) {
var one=avSelect.form.one.value;
var two=avSelect.form.two.value;
var avvy=parseInt(one)+parseInt(two);
avSelect.form.avvy.value=avvy;
}
</script>

calculate division of fields dynamically using Jquery or Javascript

I'm "trying" to figure out how to calculate a division between to fields dynamically to display in another field, the thing is, all examples I've seen are sums, and those used something like this: $('#field').each(function(){....});.
I can't do that because there's no way of know which is the dividend and which is the divisor. I tried using "bind", to try to attach the function to the field. It didn't work.
Also tried putting "onChange="CalcularSaldo()" on the input field; no luck, but mainly because i'm pretty sure my function is wrong:
<script type="text/javascript">
$(document).ready(function() {
function calcularSaldo() {
var costo = document.getElementById("costo_ad").value;
var vida = document.getElementById("vida_util").value;
document.getElementById("saldo_dep").value = costo / vida;
}
});</script>
Inputs:
<label for="costo_ad">Costo de Adquisicion</label>
<input name="costo_ad" type="text" id="costo_ad" class="round default-width-input" />
<label for="vida_util">Vida Util</label>
<input name="vida_util" type="text" id="vida_util" class="round default-width-input" />
<label for="saldo_dep">Saldo a Depreciar</label>
<input name="saldo_dep" type="text" id="saldo_dep" class="round default-width-input" disabled />
and the function should be something like this:
saldo_dep = costo_ad / vida_util

suppose we have the following fields
<input type="number" id="field1">
<input type="number" id="field2">
<span id="label"></span>
so, you'd want to attach the jquery function to some action on the fields, like after the user finishes entering text in either of the boxes
$("#field1, #field2").keyup( function(){
var n1 = $("#field1").val();
var n2 = $("#field2").val();
var result = n2/n1;
$("#label").text(result);
});
Example is in jsFiddle... http://jsfiddle.net/A3qat/5/

Javascript Form Update Onclick

I am making an html form that will allow the user to submit numbers. Instead of having the user enter numbers, I simply want them to be able to click a button to increase or decrease the number in the text input. The following important pieces of code does this exactly how I want:
Javascript:
<script type="text/javascript">
function increase (form) {
var val = form.h1.value;
val++;
form.h1.value = val;
}
function decrease (form) {
var val = form.h1.value;
val--;
form.h1.value = val;
}
</script>
HTML
<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(this.form)" value="+">
<input type="button" onclick="decrease(this.form)" value="-">
My problem is that I want to be able to use the 'increase' and 'decrease' functions for any of the other textboxes (such as h2, h3, etc.). I tried to change the code by adding a second parameter, id, and using it to determine which form element to update. It will not work though. Any help figuring out where I went wrong would be appreciated!
Javascript
<script type="text/javascript">
function increase (form, id) {
var val = form.id.value;
val++;
form.id.value = val;
}
function decrease (form, id) {
var val = form.id.value;
val--;
form.id.value = val;
}
</script>
HTML
<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(this.form, h1)" value="+">
<input type="button" onclick="decrease(this.form, h1)" value="-">

Try
function increase (form, id) {
var val = form[id].value;
val++;
form[id].value = val;
}
and
<input type="button" onclick="increase(this.form, 'h1')" value="+">
<input type="button" onclick="decrease(this.form, 'h1')" value="-">
A form works as a dictionary where you can address its fields by name. You do this by using square brackets. The name of the field is a string, so that's why you have to pass 'h1' instead of of just h1.

Try making these changes:
In your form pass a string of the ID instead of a variable.
<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(this.form, 'h1')" value="+">
<input type="button" onclick="decrease(this.form, 'h1')" value="-">
And in your JavaScript, change the way you are referencing the field int he form.
<script type="text/javascript">
function increase (form, id) {
var val = form[id].value;
val++;
form.id.value = val;
}
function decrease (form, id) {
var val = form[id].value;
val--;
form.id.value = val;
}
</script>

Instead of passing two parameters, you can directly pass the textbox element whose value needs to be changed. Try below changes.
<input type="textbox" name="h1" size="3">
<input type="button" onclick="increase(document.h1)" value="+">
<input type="button" onclick="decrease(document.h1)" value="-">
And your javascript functions will be like below.
<script type="text/javascript">
function increase (element) {
element.value = element.value++;
}
function decrease (element) {
element.value = element.value--;
}
</script>