Develop Reference

Trying to do a simple calculation with a button

For a project, I'm trying to make a type of calculator. Where I'm having trouble with is changing my button value to what I want the calculation output to be
here is a small portion of my html because it's a big table but I'm trying to make a button like this one for all of them...
<td><span>2</span></td>
<td><input type="text" id="round[2][score]" ></td>
<td><input type="text" id="round[2][rating]" ></td>
<td><input type="text" id="round[2][slope]" ></td>
<td><input type="button" onclick="calculate1()" id="round[2][handicap]" Value="Press"></td>
</tr>
here is the function I made for the calculations:
function calculate1()
{
round2score = document.getElementById('round[2][score]').value;
round2rating = document.getElementById('round[2][rating]').value;
round2slope = document.getElementById('round[2][slope]').value;
document.getElementById("round[2][handicap]").innerHTML = round2score - round2rating;
}
again, my goal is to change the "press" to the calculated value.

Instead of using InnerHTML, to set the button value use the following:
document.getElementById("round[2][handicap]").value = String(round2score - round2rating);
This will set the value of the button, which is the text displayed.

Javascript innerHTML change not working

I hate to come here with what is seemingly a simple issue to solve but I'm stumped, and have tried multiple solutions.
I have a checkboxes, so that when clicked they will run a function that will change the total price of the cart however I can't even get a simple innerHTML change on the textbox that will display the total price with the onclick event.
HTML/php:
<?php
....
....
echo "<span class='chosen'><input type='checkbox' name='event[]'
value='{$event['eventID']}' title='{$event['eventPrice']}'
onclick='price_calc(this.title, this)'/></span>"
?>
<div id="checkCost">
<h2>Total cost</h2>
Total <input type="text" name="total" id="total" size="10" readonly="readonly" />
</div>
....
....
<script src="bookingJS.js"></script>
</body>
As you can see the elements are all loaded into the DOM before the javascript runs.
JS:
function price_calc(price, chkbx) {
document.getElementById('total').innerHTML = 'Hello';
alert(document.getElementById('total').innerHTML);
}
Thank you for any tips in advance.

"total" is a field.So, try document.getElementById('total').value
innerHTML is for non field elements like span,div etc..

To set a input[type=text] value, you use .value not innerHTML:
function price_calc(price, chkbx) {
document.getElementById('total').value = 'Hello';
alert(document.getElementById('total').value);
}

try this:
document.getElementById('total').value="Hello";
alert(document.getElementById('total').value);

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>

How to write into a table with Javascript?

<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
document.getElementByID("plank").innerHTML = xp/30;
}
</Script>
So here is my code, and my problem is that I seem to be unable to write over data in a table with the id's planl, oakPlank, teakPlank, and mahoganyPlank. I am thinking that I may be making an obvious mistake to someone who has done this sort of thing before, but I can't seem to catch it. Any help is much appreciated, and here is a snippet of my table, if it helps:
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
EDIT: I didn't realize that this may be pertinent, my bad. This is the form I used to get input, which after putting an alert in to see if it could retrieve the XP, it functioned correctly:
<form name="experience" id="experience_frm" action="#">
Experience: <input type="text" name="XP" id="txt_XP"/>
<input type="submit" value="Go" onclick="getExperience();"/>
</form>

You have used the wrong document method. Javascript is case sensitive. You used:
document.getElementByID
for getting the id="plank" element. But you need to use:
document.getElementById
Notice the d (last character) change.
With this change, a simple example works for me:
http://jsfiddle.net/wqZAq/

Try This
<Script>
function getExperience()
{
var xp = document.getElementById('txt_XP').value;
var newxp = parseInt(xp);
var div = newxp/30;
document.getElementById("plank").innerHTML = div;
}
</Script>
<table>
<tr>
<td>Plank</td>
<td id="plankXP">30</td>
<td id="plank">0</td>
</tr>
</table>
<input type="text" id="txt_XP" name="txt_XP" />
<input type="button" onclick="getExperience();" />

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/