I'm having issues displaying the math problems I have created in javascript. I'm not sure if I'm missing something or if I need to take something out. I would appreciate any help or input on this matter it's got me stumped.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Math Worksheet</title>
<script type="text/javascript">
var mathProblem = new Array();
// writing the problem 10 times
function writeProblem() {
var num1 = new Array();
var num2 = new Array();
for (var i = 0; i < 10; i++) {
num1 = (Math.floor(Math.random() * 50) + 1);
num2 = (Math.floor(Math.random() * 50) + 1);
document.getElementById("t" + i).innerHTML = num1;
document.getElementById("b" + i).innerHTML = "+" + num2;
mathProblem[i] = num1 + num2;
document.forms["prob" + i]["a" + i].value = "";
}
}
</script>
</head>
<body onload="writeProblem()">
<table border="0" cellspacing="50" id="frm1" width="800">
<tr>
<td width="50">
<label id="t1"></label><br>
<label id="b1"></label><br>
<hr>
<form name="prob1">
<input name="a1" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t2"></label><br>
<label id="b2"></label><br>
<hr>
<form name="prob2">
<input name="a2" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t3"></label><br>
<label id="b3"></label><br>
<hr>
<form name="prob3">
<input name="a3" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t4"></label><br>
<label id="b4"></label><br>
<hr>
<form name="prob4">
<input name="a4" size="3" type="text">
</form>
</td>
<td width="50">
<label id="t5"></label><br>
<label id="b5"></label><br>
<hr>
<form name="prob5">
<input name="a5" size="3" type="text">
</form>
</td>
</tr>
<tr>
<td>
<label id="t6"></label><br>
<label id="b6"></label><br>
<hr>
<form name="prob6">
<input name="a6" size="3" type="text">
</form>
</td>
<td>
<label id="t7"></label><br>
<label id="b7"></label><br>
<hr>
<form name="prob7">
<input name="a7" size="3" type="text">
</form>
</td>
<td>
<label id="t8"></label><br>
<label id="b8"></label><br>
<hr>
<form name="prob8">
<input name="a8" size="3" type="text">
</form>
</td>
<td>
<label id="t9"></label><br>
<label id="b9"></label><br>
<hr>
<form name="prob9">
<input name="a9" size="3" type="text">
</form>
</td>
<td>
<label id="t10"></label><br>
<label id="b10"></label><br>
<hr>
<form name="prob10">
<input name="a10" size="3" type="text">
</form>
</td>
</tr>
</table>
</body>
</html>
I noticed you are starting from i=0; and getElementById("t"+i) bu there is no element with id t0.Hope that helps
Just check the for loop. I have fix the problem.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Math Worksheet</title>
<script type="text/javascript">
var mathProblem = new Array();
// writing the problem 10 times
function writeProblem(){
var num1 = new Array();
var num2 = new Array();
for (var i=1; i<11; i++){
num1 = (Math.floor(Math.random()*50)+1);
num2 = (Math.floor(Math.random()*50)+1);
document.getElementById("t"+i).innerHTML = num1;
document.getElementById("b"+i).innerHTML = "+" + num2;
mathProblem[i] = num1 + num2;
document.forms["prob"+i]["a"+i].value = "";
}
}
</script>
</head>
<body onload="writeProblem()">
<table id="frm1" width="800" border="0" cellspacing="50">
<tr>
<td width="50"><label id="t1"></label><br /><label id="b1"></label><br /><hr /><form name="prob1"><input type="text" size="3" name="a1"></form></td>
<td width="50"><label id="t2"></label><br /><label id="b2"></label><br /><hr /><form name="prob2"><input type="text" size="3" name="a2"></form></td>
<td width="50"><label id="t3"></label><br /><label id="b3"></label><br /><hr /><form name="prob3"><input type="text" size="3" name="a3"></form></td>
<td width="50"><label id="t4"></label><br /><label id="b4"></label><br /><hr /><form name="prob4"><input type="text" size="3" name="a4"></form></td>
<td width="50"><label id="t5"></label><br /><label id="b5"></label><br /><hr /><form name="prob5"><input type="text" size="3" name="a5"></form></td>
</tr>
<tr>
<td><label id="t6"></label><br /><label id="b6"></label><br /><hr /><form name="prob6"><input type="text" size="3" name="a6"></form></td>
<td><label id="t7"></label><br /><label id="b7"></label><br /><hr /><form name="prob7"><input type="text" size="3" name="a7"></form></td>
<td><label id="t8"></label><br /><label id="b8"></label><br /><hr /><form name="prob8"><input type="text" size="3" name="a8"></form></td>
<td><label id="t9"></label><br /><label id="b9"></label><br /><hr /><form name="prob9"><input type="text" size="3" name="a9"></form></td>
<td><label id="t10"></label><br /><label id="b10"></label><br /><hr /><form name="prob10"><input type="text" size="3" name="a10"></form></td>
</tr>
</table>
</body>
</html>
You ids begin with t0/b0, so you have to change the index start from 1:
for (var i=1; i<=10; i++){
The DEMO.
Related
Why i dont get the javascript value after calculation in input tag of my htm given
`id=""result"`
while i get this in span id and using document.write(num);
<?php include ('header.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Calculator </title>
</head>
<body>
<form>
<table>
<tr>
<td>
<label style="padding-top: 5px" >Enter Your Per KG Price : </label>
</td>
<td style="padding-left:15px;">
<input type="tex" id="perkg" placeholder="Enter Per KG Price">
</td>
</tr>
<tr>
<td>
<label style="padding-top: 10px" >Enter Your Price : </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="required" placeholder="Desired Amount">
</td>
</tr>
<tr>
<td>
<input type="button" onClick="multiply()" Value="Multiply" />
</td>
</tr>
<td>
<label style="padding-top: 10px" > Weight Given To Customer In Grams </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="result" value="" placeholder="In Grams">
</td>
</tr>
</table>
<input type="button" onClick="divideBy()" Value="Divide" />
<p>The Result is : <br>
<span id = "results"></span>
</p>
</form>
<script type="text/javascript">
function multiply()
{
var num1 = document.getElementById("perkg").value;
var num2 = document.getElementById("required").value;
var num = (1000/num1) * num2;
document.getElementById("result").innerHTML = num;
//document.write(num); its working
}
</script>
</body>
</html>
To update input value attribute use value property instead of innerHTML
document.getElementById("result").value = num;
I have code like this.
<input type="text" name="1" class = "inp<?=$p?> ">
<input type="text" name="2" class = "inp<?=$p?> ">
<input type="text" name="3" class = "inp<?=$p?> ">
<input type="text" name="4" class = "sum<?=$p?> ">
Here the jquery code
$('.inp0').keyup(function(){
var sum = 0;
var ave = 0;
$('.inp0').each(function(){
sum += +$(this).val();
});
ave = sum/3;
$('.sum0').val(ave.toFixed(2));
});
and it work properly but just for 1 row of input form.
if i do loop to my jquery code like
for(x=0;x<5;x++)
{*jquery code here*}
and change jquery selector to $('.inp'+x), only 5th row that can work but not for row 1 to 4.
can someone help me ? thanks before
Try something like this:
$('[class^="inp"]').keyup(function(){
var sum = 0;
var ave = 0;
var index = $(this).attr('class').split('p')[1];
$('.inp'+index).each(function(){
sum += $(this).val();
});
ave = sum/3;
$('.sum'+index).val(ave.toFixed(2));
});
You can group the elemnets by attributes and use that to select the elements like
$('.inp').keyup(function() {
var sum = 0;
var ave = 0;
var grp = $(this).data('grp');
$('.inp[data-grp="' + grp + '"]').each(function() {
sum += +$(this).val() || 0;
});
ave = sum / 3;
$('.sum[data-grp="' + grp + '"]').val(ave.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="1" data-grp="0" class="inp">
<input type="text" name="2" data-grp="0" class="inp">
<input type="text" name="3" data-grp="0" class="inp">
<input type="text" name="4" data-grp="0" class="sum">
<br />
<input type="text" name="1" data-grp="1" class="inp">
<input type="text" name="2" data-grp="1" class="inp">
<input type="text" name="3" data-grp="1" class="inp">
<input type="text" name="4" data-grp="1" class="sum">
<br />
<input type="text" name="1" data-grp="2" class="inp">
<input type="text" name="2" data-grp="2" class="inp">
<input type="text" name="3" data-grp="2" class="inp">
<input type="text" name="4" data-grp="2" class="sum">
<br />
Another way
$('.inp').keyup(function() {
var sum = 0;
var ave = 0;
var $tr = $(this).closest('tr');
$tr.find('.inp').each(function() {
sum += +$(this).val() || 0;
});
ave = sum / 3;
$tr.find('.sum').val(ave.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="1" class="inp">
</td>
<td>
<input type="text" name="2" class="inp">
</td>
<td>
<input type="text" name="3" class="inp">
</td>
<td>
<input type="text" name="4" class="sum">
</td>
</tr>
<tr>
<td>
<input type="text" name="1" class="inp">
</td>
<td>
<input type="text" name="2" class="inp">
</td>
<td>
<input type="text" name="3" class="inp">
</td>
<td>
<input type="text" name="4" class="sum">
</td>
</tr>
<tr>
<td>
<input type="text" name="1" class="inp">
</td>
<td>
<input type="text" name="2" class="inp">
</td>
<td>
<input type="text" name="3" class="inp">
</td>
<td>
<input type="text" name="4" class="sum">
</td>
</tr>
</table>
You have just 1 input classed 'inp0'. Use a common class for all inputs and in the selector.
Newbie in jquery, need some help with this description.
Suppose, I have 1 textbox that contain the result of Addition of another 2 textbox's.
<input type="text class="tb1">
<input type="text class="tb2">
<input type="text class="result" id="result1">
like this.
Suppose I have 5 textbox's that contain their individual 2 textbox's addition results.
Each Result textbox generate result automatically using jquery script.
So, I have 5 result textbox's with their respective addition result.
Now, I want to sum of the values in all 5 result texbox's again in another textbox when i click on checkbox automatically by using jquery or javascript script.
How can I achive this task ?
refer image for understanding of question.
http://i.stack.imgur.com/iFF46.jpg
Assuming that the number 5 of the text boxes remains the same here is a solution for your problem. ( Without validations )
$("#add").click(function() {
$("#result1").val(parseInt($("#box1").val()) + parseInt($("#box2").val()));
$("#result2").val(parseInt($("#box3").val()) + parseInt($("#box4").val()));
$("#result3").val(parseInt($("#box5").val()) + parseInt($("#box6").val()));
$("#result4").val(parseInt($("#box7").val()) + parseInt($("#box8").val()));
$("#result5").val(parseInt($("#box9").val()) + parseInt($("#box10").val()));
});
$( "#final-check" ).change(function() {
var finalResult = 0;
for (var i = 1; i <= 5; i++) {
finalResult = finalResult + parseInt($("#result" + i).val());
}
$("#final-result").val(finalResult);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" id="box1">
</td>
<td>+</td>
<td>
<input type="text" id="box2">
</td>
<td>=</td>
<td>
<input type="text" id="result1">
</td>
</tr>
<tr>
<td>
<input type="text" id="box3">
</td>
<td>+</td>
<td>
<input type="text" id="box4">
</td>
<td>=</td>
<td>
<input type="text" id="result2">
</td>
</tr>
<tr>
<td>
<input type="text" id="box5">
</td>
<td>+</td>
<td>
<input type="text" id="box6">
</td>
<td>=</td>
<td>
<input type="text" id="result3">
</td>
</tr>
<tr>
<td>
<input type="text" id="box7">
</td>
<td>+</td>
<td>
<input type="text" id="box8">
</td>
<td>=</td>
<td>
<input type="text" id="result4">
</td>
</tr>
<tr>
<td>
<input type="text" id="box9">
</td>
<td>+</td>
<td>
<input type="text" id="box10">
</td>
<td>=</td>
<td>
<input type="text" id="result5">
</td>
</tr>
</table>
<button id="add">add</button>
<input type="text" id="final-result">
<input type="checkbox" id="final-check">
You can add any number of text boxes and get your results.
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" class="textBox" value="0">
<input type="text" class="textBox" value="0">
<input type="text" class="resultBox" value="0">
</div>
<div>
<input type="text" id="mainTotBox" value="0">
</div>
$(".textBox").on("change", function(){
var total = 0;
var thisInput = this;
$(this).closest("div").find("input[class='textBox']").each(function(index, inputEle){
total += window.parseInt($(inputEle).val());
$(thisInput).closest("div").find(".resultBox").val(total);
});
var mainTot = 0;
$(".resultBox").each(function(index, inputEle){
mainTot += window.parseInt($(inputEle).val());
});
$("#mainTotBox").val(mainTot);
});
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="tb">
<input type="text class="result" id="result">
<script>
var result=0;
// Loop thru each input field that has class tb, take its numeric value
// and add it to result
function AddEmUp()
{
$("input.tb").each(
function()
{
result=result+Number( $(this).val() );
});
// Display the result in input box with id=result
$("#result").val( result);
}
// Execute AddEmUp when any one of the input fields with class tb is clicked
$("input.tb").click( AddEmUp );
</result>
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" onclick="myFunction(this)" />
</td>
</tr>
</table>
I want to clear textbox when we corresponding checkboc is checked. Here is my Java script,
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox1');
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox1');
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
Any idea?
In order to get the corresponding textbox, you can't get it by ID. Instead you should get the inputs parent table row and then find the input from there, so that it is relative to the checkbox.
Working demo
function CheckCheckboxes1(chk){
var txt = chk.parentNode.parentNode.cells[2].getElementsByTagName('input')[0];
if(chk.checked == true)
{
txt.value = "";
txt.readOnly = false;
}
else
{
txt.value = "Enter Username";
txt.readOnly = true;
}
}
Notes:
Use txt.readOnly not txt.disabled because disabled is something different.
Use the checkbox onchange event not onclick.
Hi in order to disable and enable you need to assign the id's to both checkbox and textboxs. please look at the below code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript">
function CheckCheckboxes1(chk){
if(chk.checked == true)
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "";
txt.disabled = false;
}
else
{
var txt = document.getElementById('TextBox'+chk.id);
txt.value = "Enter Username";
txt.disabled = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" id="1" onclick="CheckCheckboxes1(this)"/>
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox2" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="2" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>`enter code here`
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox3" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="3" onclick="CheckCheckboxes1(this)" />
</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="text" id= "TextBox4" class="textbox" value="Not Required" readonly/>
</td>
<td>
<input type="checkbox" id="4" onclick="myFunction(this)" />
</td>
</tr>
</table>
</body>
</html>
As #Adil said it is easier if you use jQuery. You can give your textbox an id and your checkbox a cutstom attribute e.g.:
<td>
<input type="text" id="txt_1" class="textbox" value="Not Required" readonly=readonly />
</td>
<td>
<input type="checkbox" specId="1" onclick="CheckCheckboxes1(this)"/>
</td>
function CheckCheckboxes1(chk){
var specId = $(chk).attr("specId");
var txt = $("#txt_"+specId);
if(chk.checked == true)
{
$(txt).val("");
$(txt).attr("disabled","disabled");
}
else
{
$(txt).val("Enter Username");
$(txt).removeAttr("disabled");
}
}
Hope it helps!
How would I use JavaScript to add up some values from a form? I want to display the value in a read-only text field at the bottom of the form. Here is my code so far, I have made each form value the value of what I want to add:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function checkAll(){
document.getElementById("notop").checked=false;
}
function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
field[i].checked = false ;
}
</script>
</head>
<body>
<div class="head">
<h3 align="center">Gourmet Pizza</h3>
</div>
<div class="main">
<form action="" method="get" name="pizza">
<table border="1" cellpadding="5" cellspacing="3">
<tr>
<td>Name:</td>
<td><input name="name" type="text" id="name" /></td>
</tr>
<tr>
<td>E-Mail:</td>
<td><input name="email" type="text" id="email" /></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="name" type="text" id="phone"/></td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="8.00" id="small" onclick="this.form.total.value=calculateTotal(this);" > <label for="small">Small ($8.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="pepperoni" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="pepperoni">Pepperoni
</label>
<input type="checkbox" name="topping" id="sausage" value="0.50" onClick="checkAll(document.pizza.topping)" class="top" />
<label for="sausage">Sausage
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="10.00" id="medium" onclick="this.form.total.value=calculateTotal(this);" /> <label for="medium">Medium ($10.00)</label></td>
<td style="border:none">
<input type="checkbox" name="topping" id="mushroom" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
<label for="mushroom">Mushroom
</label>
<input type="checkbox" name="topping" id="olive" value="0.50" onClick="checkAll(document.pizza.topping" class="top"/>
<label for="olive">Olive
</label>
</td>
</tr>
<tr>
<td style="border:none"><input name="size" type="radio" value="12.00" id="large" onclick="this.form.total.value=calculateTotal(this);" onselect="addTwelve()"/> <label for="large">Large ($12.00)</label></td>
<td style="border:none">
<input type="checkbox" name="Un_CheckAll" value="0.00" id="notop" class="none" onClick="uncheckAll(document.pizza.topping)"/>
<label for="notop">No Toppings (Cheese Pizza)
</label>
</td>
</tr>
<tr>
<td colspan="2">
Your Order:<br />s
<textarea name="" colums="2">
</textarea>
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" name="button" id="button" value="Process Order" />
<input type="reset" name="button2" id="button2" value="Clear Order" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Any help is greatly appreciated!
you can do something like this
var total = 0;
window.onload = function() {
var toppings = document.pizza.topping;
for (var i = 0, l = toppings.length; i < l; i++) {
toppings[i].addEventListener("change", function() {
if (this.checked) {
total += parseFloat(this.value);
} else {
total -= parseFloat(this.value);
}
alert(total);
}, false);
}
};
see example here