I'm currently writing a JS code to calculate a running total of numeric inputs. The problem I have is that for my actual project I can't change the HTML directly as it is generated from a scripting programme. I can however manipulate it with JS.
so far I've got a div to add which can show the sum of the inputs. But this only works if the inputs have an onKeyUp() attribute. This isn't true for the generated HTML so I need to write a JS script which adds it in. This is what I've done so far:
<html>
<head>
<script>
//try to set an onKeyUp attribute to the elements.
var number1 = document.getElementById("_Q0_Q0_Q0");
number1.onkeyup = function(){ return summer()};
var number2 = document.getElementById("_Q0_Q0_Q1");
number2.onkeyup = function(){ return summer()};
var number3 = document.getElementById("_Q0_Q0_Q2");
number3.onkeyup = function(){ return summer()};
function summer() {
var count = 0; //start with nothing
var num1 = (parseFloat(document.getElementById("_Q0_Q0_Q0").value)) || 0; //if there aren't any numbers, add nothing
var num2 = (parseFloat(document.getElementById("_Q0_Q0_Q1").value)) || 0;
var num3 = (parseFloat(document.getElementById("_Q0_Q0_Q2").value)) || 0;
count = num1+num2+num3; //sum them up
if (!document.getElementById("output")) { //check to see if there is a div with the output already, if not create one.
var newDiv = document.createElement('div');
newDiv.setAttribute('id', 'output');
var gutterDiv = document.getElementById("right_gutter")
gutterDiv.appendChild(newDiv);
};
document.getElementById("output").innerHTML = "Your running total = "+count
}; //show output
</script>
</head>
<body>
<input type="text" id="_Q0_Q0_Q0" name="number" />
<input type="text" id="_Q0_Q0_Q1" name="number" />
<input type="text" id="_Q0_Q0_Q2" name="number" />
<div id='right_gutter'>
<button type="button" onclick="summer()">Clicking here adds your input to the "count" variable</button> //two purposes of this. 1) Acts as a placeholder for where the output should end up. 2) Shows that the summing function works.
</div>
<br>
</body>
</html>
I'm currently writing a JS code to calculate a running total of numeric inputs. The problem I have is that for my actual project I can't change the HTML directly as it is generated from a scripting programme. I can however manipulate it with JS.
so far I've got a div to add which can show the sum of the inputs. But this only works if the inputs have an onKeyUp() attribute. This isn't true for the generated HTML so I need to write a JS script which adds it in. This is what I've done so far:
<html>
<head>
<script>
//try to set an onKeyUp attribute to the elements.
var number1 = document.getElementById("_Q0_Q0_Q0");
number1.onkeyup = function(){ return summer()};
var number2 = document.getElementById("_Q0_Q0_Q1");
number2.onkeyup = function(){ return summer()};
var number3 = document.getElementById("_Q0_Q0_Q2");
number3.onkeyup = function(){ return summer()};
function summer() {
var count = 0; //start with nothing
var num1 = (parseFloat(document.getElementById("_Q0_Q0_Q0").value)) || 0; //if there aren't any numbers, add nothing
var num2 = (parseFloat(document.getElementById("_Q0_Q0_Q1").value)) || 0;
var num3 = (parseFloat(document.getElementById("_Q0_Q0_Q2").value)) || 0;
count = num1+num2+num3; //sum them up
if (!document.getElementById("output")) { //check to see if there is a div with the output already, if not create one.
var newDiv = document.createElement('div');
newDiv.setAttribute('id', 'output');
var gutterDiv = document.getElementById("right_gutter")
gutterDiv.appendChild(newDiv);
};
document.getElementById("output").innerHTML = "Your running total = "+count
}; //show output
</script>
</head>
<body>
<input type="text" id="_Q0_Q0_Q0" name="number" />
<input type="text" id="_Q0_Q0_Q1" name="number" />
<input type="text" id="_Q0_Q0_Q2" name="number" />
<div id='right_gutter'>
<button type="button" onclick="summer()">Clicking here adds your input to the "count" variable</button> //two purposes of this. 1) Acts as a placeholder for where the output should end up. 2) Shows that the summing function works.
</div>
<br>
</body>
</html>
-
Event handlers are case sensitive, so it should be
onkeyup. – kamituel Commented Dec 16, 2013 at 16:28 -
1
HTML is case insensitive, so you might see:
<input type="text" onKeyUp="myfunc();" />but this doesn't work in JavaScript. – Halcyon Commented Dec 16, 2013 at 16:30 - Changed it to onkeyup but it still doesn't seem to work – NDevox Commented Dec 16, 2013 at 16:37
-
1
You are including the script in the head tag. It will get executed before the DOM is fully ready. Maybe you can use
window.onload? – Paul D. Commented Dec 16, 2013 at 16:39 - It's supposed to dynamically change a variable which shows the sum of the numbers the user has entered into the text boxes. The end product should check this summed value against a value given previously to see if they match. (e.g. you said you eat this many meals a week but you've told me you eat x breakfasts, y lunches and z dinners, the sum of which =/= the total) – NDevox Commented Dec 16, 2013 at 16:41
2 Answers
Reset to default 4Glad you got it working. I guess this is redundant now but I'm posting this answer in case it is useful anyway.
//Create a NodeList of all elements whose name='number':
var nums = document.getElementsByName("number");
//add the onkeyup event to all nums:
for(var n=0; n < nums.length; n++){
nums[n].onkeyup = function(){return summer()};
}
//add the click event to the button:
document.getElementById("button").onclick = function(){return summer();}
function summer() {
var count = 0;
for(var n=0; n < nums.length; n++){//iterate and sum values
count += parseFloat(nums[n].value) || 0;
}
//create the output element:
var outputDiv = document.getElementById("output") || document.createElement('div');
//if it doesnt already exist append it:
if(!document.getElementById("output")){
outputDiv.setAttribute('id', 'output');
document.getElementById("right_gutter").appendChild(outputDiv);
createdAlready=true;
}
//set the output string:
outputDiv.innerHTML = "Your running total = "+count;
}
Demo: http://jsfiddle/8BrQE/2/
Not shure if right but no need for so much code.
js
window.onload=function(){
function sum(){
result.textContent="Your running total = "+
((form.a.value*1)+(form.b.value*1)+(form.c.value*1));
}
var form=document.forms[0],result=document.getElementById('result');
form.addEventListener('keyup',sum,false);
}
html
<form><input name="a"><input name="b"><input name="c"></form>
<div id="result"></div>
example
http://jsfiddle/cyLaF/