I want to use the following JavaScript function with the given HTML code to the ID names NTag, VTag, TTag, TATag, and VATag. I have bound the function with NTag. Please tell me how can I use this code to generate HEX for all the values presented in the respective inputs.
The function is creating HEX code for Decimals. It is working well with the one to which I have bonded it.
JS Function:
function fun1() {
number = document.getElementById("NTag").value;
h = parseInt(number, 10).toString(16);
if (h.length<=1){
h = "0"+h;
}else{
h = h;
}
document.getElementById("NTagHex").textContent = h;
}
HTML Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>QR Code Generator</title>
<link rel="stylesheet" href="Styles.css"
</head>
<body onload="fun1()">
<table>
<tr>
<th>Tag</th>
<th>Length</th>
<th>Value</th>
<th>Data</th>
</tr>
<tr>
<th><input type="number" id="NTag" name="NTag" value="1"></th>
<th><input type="number" onchange="fun2()" id="NLength" name="NLength"></th>
<th><input type="text" onchange="fun3(); concatenate();" id="NValue" name="NValue"></th>
<th><p>Company Name</p></th>
</tr>
<tr>
<th><p id="NTagHex"></p></th>
<th><p id="NLengthHex"></p></th>
<th><p id="NValueHex"></p></th>
<th><p id="Hex1"></p></th>
</tr>
<tr>
<th><input type="number" id="VTag" name="VTag" value="2"></th>
<th><input type="number" id="VLength" name="VLength"></th>
<th><input type="text" id="VValue" name="VValue"></th>
<th><p>Company VAT</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
<tr>
<th><input type="number" id="TTag" name="TTag" value="3"></th>
<th><input type="number" id="TLength" name="TLength"></th>
<th><input type="text" id="TValue" name="TValue"></th>
<th><p>Date & Time of Invoice Creation</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
<tr>
<th><input type="number" id="TATag" name="TATag" value="4"></th>
<th><input type="number" id="TALength" name="TALength"></th>
<th><input type="text" id="TAValue" name="TAValue"></th>
<th><p>Total Amount with VAT</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
<tr>
<th><input type="number" id="VATag" name="VATag" value="5"></th>
<th><input type="number" id="VALength" name="VALength"></th>
<th><input type="text" id="VAValue" name="VAValue"></th>
<th><p>VAT Amount</p></th>
</tr>
<tr>
<th><p></p></th>
<th><p></p></th>
<th><p></p></th>
</tr>
</table>
<script src="Script.js"></script>
</body>
</html>
it's better to use a single function for all of them. so instead of fun1() fun2() ... lets use a fun() with this code:
function fun(id) {
number = document.getElementById(id).value;
h = parseInt(number, 10).toString(16);
if (h.length <= 1) {
h = "0" + h;
} else {
h = h;
}
document.getElementById(id + 'some constant. here is: HEX').textContent = h;
}
so you can use fun() in ur html like below:
<input type="number" onchange="fun('NTag');" id="NTag" name="NTag " value="5 "></th>
...
<p id="NTagHex"></p>
Related
Hi I have a a sample html page im trying to get the data from a text feild no matter what i do i get the error
TypeError: document.getElementById(...) is null
Here is my html page:
function verify() {
var error = "Hi, ";
var no = document.getElementById("num").value;
var x = parseInt(no);
if (x < 10000000 || x > 99999999999) {
error = error + "Mobile Number is invalid";
}
document.write(error);
var username = document.getElementById("u1").value;
document.write(username);
}
<!DOCTYPE html>
<html>
<head>
<title> Sign In</title>
<link rel="stylesheet" href="veri.css">
</head>
<script src="veri.js">
</script>
<body>
<form>
<table id="frm">
<tr>
<th class="rightpad">Name</th>
<th><input type="text" name="name" id="name" required></th>
</tr>
<tr>
<th class="rightpad">Gender</th>
<th>
<input type="radio" name="gender" value="male" checked> Male<br>
<t><input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</th>
</tr>
<tr>
<th class="rightpad"> Mobile no</th>
<th><input id="num" type="number" name="num" required>
</tr>
<tr>
<th class="rightpad"> Email</th>
<th><input type="email" name="email" required>
</tr>
<tr>
<th class="rightpad">Username</th>
<th><input type="text" id="u1" name="u1" required></th>
</tr>
<tr>
<th class="rightpad">Password</th>
<th><input type="password" name="pass" required></th>
</tr>
<tr>
<th>
</th>
<th id="but"><button onclick="verify()" type="button">Verify</button></th>
</tr>
</table>
</form>
</body>
</html>
This is the line that throws the error
var username=document.getElementById("u1").value;
I have tried closing the browser, refreshing typing the code and not copy pasting.Could this be a system specific problem?
the problem is that:
you put
var username=document.getElementById("u1").value;
after
document.write();
this will change the document,so you can't find "u1".
you can fix that by remove the document.write to the end of the script
function verify() {
var error = "Hi, ";
var no = document.getElementById("num").value;
var x = parseInt(no);
if (x < 10000000 || x > 99999999999) {
error = error + "Mobile Number is invalid";
}
var username = document.getElementById("u1").value;
document.write(error);
}
First of all, you need to plug scripts after the body tag.
The second thing - wrap you script into
window.addEventListener("load", function() {
//your script here
});
function verify() {
var error = "Hi, ";
var no = document.getElementById("num").value;
var x = parseInt(no);
if (x < 10000000 || x > 99999999999) {
error = error + "Mobile Number is invalid";
}
document.write(error);
var username = document.getElementById("u1").value;
}
<!DOCTYPE html>
<html>
<head>
<title> Sign In</title>
<link rel="stylesheet" href="veri.css">
</head>
<body>
<form>
<table id="frm">
<tr>
<th class="rightpad">Name</th>
<th><input type="text" name="name" id="name" required></th>
</tr>
<tr>
<th class="rightpad">Gender</th>
<th>
<input type="radio" name="gender" value="male" checked> Male<br>
<t><input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</th>
</tr>
<tr>
<th class="rightpad"> Mobile no</th>
<th><input id="num" type="number" name="num" required>
</tr>
<tr>
<th class="rightpad"> Email</th>
<th><input type="email" name="email" required>
</tr>
<tr>
<th class="rightpad">Username</th>
<th><input type="text" id="u1" name="u1" required></th>
</tr>
<tr>
<th class="rightpad">Password</th>
<th><input type="password" name="pass" required></th>
</tr>
<tr>
<th>
</th>
<th id="but"><button onclick="verify()" type="button">Verify</button></th>
</tr>
</table>
</form>
</body>
<script src="veri.js"> </script>
</html>
I want to multiply the textbox values and after multiplication sum of all answer values. Example:
SUM (NSP * Current Sales)
This program is working fine but when I change any value it adds the change not replace the values. It should replace the value of array.
And if possible, please minimize the code logic also. Thanks.
$(document).ready(function() {
var val1;
var val2;
var multi;
one();
second();
});
function one() {
$(document).on("change", ".qty1", function() {
var sumqty1 = 0;
sumqty1 += $(this).val();
val1 = sumqty1;
});
}
function second() {
$(document).on("change", ".qty2", function() {
var sumqty1 = 0;
var sumqty2 = 0;
sumqty1 += $(this).closest('tr').find('.qty1').val();
sumqty2 += $(this).val();
val1 = sumqty1;
val2 = sumqty2;
mul(val1, val2);
});
}
var arr = [];
function mul(a, b) {
var hh;
multi = a * b;
arr.push(multi);
var totalsum = 0;
for (var i in arr) {
var value = arr[i];
totalsum = parseInt(totalsum, 10) + parseInt(value, 10);
$("#totalvalue").text(totalsum);
}
console.log(arr);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th><span id='totalvalue'></span></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Satou</td>
<td><input type="text" class="qty1" value="1" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>23</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="2" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>131</td>
</tr>
<tr>
<td>disprine</td>
<td><input type="text" class="qty1" value="3" disabled/></td>
<td><input type="text" class="qty2" value="" /></td>
<td>37</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="4" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>173</td>
</tr>
</tbody>
</table>
You are continually adding new values into arr and there's a whole lot of shared mutable state going on here.
If there aren't that many rows in the table, you're best off just recalculating the whole total each time a value changes. Less risk of the data stepping on itself that way:
$(document).ready(function() {
$(document).on('change', '.qty1, .qty2', recalculate);
function getTotal() {
return $('#myTable tr')
.toArray()
.map($)
.map(function (row) {
return row.find('.qty1').val() * row.find('.qty2').val();
})
.filter(function (val) { return !Number.isNaN(val); })
.reduce(function (a, b) { return a + b; }, 0);
}
function recalculate() {
$("#totalvalue").text(getTotal());
}
});
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<table id="myTable" style="width: 100%;" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th><span id='totalvalue'></span></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Satou</td>
<td><input type="text" class="qty1" value="1" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>23</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="2" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>131</td>
</tr>
<tr>
<td>disprine</td>
<td><input type="text" class="qty1" value="3" disabled/></td>
<td><input type="text" class="qty2" value="" /></td>
<td>37</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="4" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>173</td>
</tr>
</tbody>
</table>
</body>
</html>
Id say something like:
$(".qty1, .qty2").on("change", function(){
var qty2 = $(".qty2"),
total = 0;
$(".qty1").each(function(ind){
total += $(qty2[ind]).val() * $(this).val();
})
$("#totalvalue").text(total)
})
Added at the end of the document.
Edited a little
The way you have it right now, you're adding new elements to the array in the order they're created, which doesn't allow you to access them later to change them because they could be stored in any order.
The code below saves each value in the array based on the value of val1 so that each element has a designated place in the array. Because of that, you can update any of the values when they are changed, like so:
var arr = [];
function one() {
$(document).on("change", ".qty1", function() {
var sumqty1 = $(this).val();
});
}
function second() {
$(document).on("change", ".qty2", function() {
var val1 = $(this).closest('tr').find('.qty1').val();;
var val2 = $(this).val();
mul(val1, val2);
});
}
function mul(a, b) {
arr[a - 1] = a * b;
var totalsum = 0;
for (var i in arr) {
var value = arr[i];
totalsum = parseInt(totalsum, 10) + parseInt(value, 10);
$("#totalvalue").text(totalsum);
}
console.log(arr);
}
$(document).ready(function() {
one();
second();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th>Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product Name</th>
<th>NSP</th>
<th>Current Sales</th>
<th><span id='totalvalue'></span></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Satou</td>
<td><input type="text" class="qty1" value="1" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>23</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="2" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>131</td>
</tr>
<tr>
<td>disprine</td>
<td><input type="text" class="qty1" value="3" disabled/></td>
<td><input type="text" class="qty2" value="" /></td>
<td>37</td>
</tr>
<tr>
<td>panadol</td>
<td><input type="text" class="qty1" value="4" disabled /></td>
<td><input type="text" class="qty2" value="" /></td>
<td>173</td>
</tr>
</tbody>
</table>
I also took out some unnecessary code, including:
The hh declaration (since that variable isn't used) in your second() function
a couple of extraneous lines in your one() function
the multi variable
the sumqty1 and sumqty2 variables (you can just use val1 and val2)
Your val1 and val2 variables didn't need to be global, since you are only using them in one function and passing them as parameters to another.
You could also remove the one() function if you want, since those values seem to be static -- but I'm not sure if you allow that value to be changed in your original code.
I'm trying to clone the last row of my table and append it to the table, with blank values, when you press tab on the last name input field. so I wrote the code below. it works great until you get to the second line, it doesn't seem to clone and append the row if it's a clone. is there a way around this / What am I doing wrong?
$(document).ready(function() {
var $last_name = $('.last_name');
var $blank_row = $('tr:last');
var $time_table = $('#time_table');
$last_name.keydown(function(e) {
if (e.which === 9) {
$blank_row.clone().find('input').val('').end().appendTo($time_table);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="time_table">
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Rate</th>
<th class="time">ST</th>
<th class="time">TH</th>
<th class="time">DT</th>
<th class="time">EX-ST</th>
<th class="time">EX-TH</th>
<th class="time">EX-DT</th>
</tr>
<tr class="blank_row">
<td><input type="text" name="last_name" class="last_name"></td>
<td><input type="text" name="first_name"></td>
<td><input type="text" name="rate"></td>
<td><input type="number" name="st" class="time_input"></td>
<td><input type="number" name="th" class="time_input"></td>
<td><input type="number" name="dt" class="time_input"></td>
<td><input type="number" name="ex_st" class="time_input"></td>
<td><input type="number" name="ex_th" class="time_input"></td>
<td><input type="number" name="ex_dt" class="time_input"></td>
</tr>
</table>
Because .last_name is added dynamically — variable $last_name stores a reference to the first empty row.
https://api.jquery.com/on/
$(document).ready(function() {
var $time_table = $('#time_table');
$time_table.on('keydown', '.last_name', function(e) {
if (e.which === 9) {
$('tr:last').clone().find('input').val('').end().appendTo($time_table);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="time_table">
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Rate</th>
<th class="time">ST</th>
<th class="time">TH</th>
<th class="time">DT</th>
<th class="time">EX-ST</th>
<th class="time">EX-TH</th>
<th class="time">EX-DT</th>
</tr>
<tr class="blank_row">
<td><input type="text" name="last_name" class="last_name"></td>
<td><input type="text" name="first_name"></td>
<td><input type="text" name="rate"></td>
<td><input type="number" name="st" class="time_input"></td>
<td><input type="number" name="th" class="time_input"></td>
<td><input type="number" name="dt" class="time_input"></td>
<td><input type="number" name="ex_st" class="time_input"></td>
<td><input type="number" name="ex_th" class="time_input"></td>
<td><input type="number" name="ex_dt" class="time_input"></td>
</tr>
</table>
Try this:
The keydown() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created dynamically. To do that, need to create a "delegated" binding by using on().
$(document).ready(function () {
var $last_name = 'input.last_name';
var $blank_row = $('tr:last');
var $time_table = $('#time_table');
$("#time_table").on("keydown", $last_name, function (e) {
if (e.which === 9) {
$blank_row.clone().find('input').val('').end().appendTo($time_table);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="time_table">
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Rate</th>
<th class="time">ST</th>
<th class="time">TH</th>
<th class="time">DT</th>
<th class="time">EX-ST</th>
<th class="time">EX-TH</th>
<th class="time">EX-DT</th>
</tr>
<tr class="blank_row">
<td><input type="text" name="last_name" class="last_name"></td>
<td><input type="text" name="first_name"></td>
<td><input type="text" name="rate"></td>
<td><input type="number" name="st" class="time_input"></td>
<td><input type="number" name="th" class="time_input"></td>
<td><input type="number" name="dt" class="time_input"></td>
<td><input type="number" name="ex_st" class="time_input"></td>
<td><input type="number" name="ex_th" class="time_input"></td>
<td><input type="number" name="ex_dt" class="time_input"></td>
</tr>
</table>
I'm making a form in which I want to automate some calculations. The form contains a table with some inputs. The Javascript is below the form.
For a reason unknown to me, the calculation won't start or isn't performed correctly.
Here's the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
</script>
</body>
</html>
The problem is your function is not being run when the input is changed.
It is possible to use the JS addEventListener function to run your code whenever the input value is changed like so:
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
Your original code with the event listener added in:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form>
<fieldset>
<legend>Inkomsten</legend>
<table>
<tr>
<th scope="col"></th>
<th scope="col">Per maand</th>
<th scope="col">Per jaar</th>
<th scope="col">Totale termijn</th>
</tr>
<tr>
<td>Inkomen</td>
<td><input type="text" name="fldInkomenPerMaand" id="fldInkomenPerMaand"></td>
<td><input type="text" name="fldInkomenPerJaar" id="fldInkomenPerJaar" disabled></td>
<td><input type="text" name="fldInkomenTotaleTermijn" id="fldInkomenTotaleTermijn" disabled></td>
</tr>
<tr>
<td>Vakantiegeld</td>
<td><input type="text" name="vakantiegeldPerMaand" id="vakantiegeldPerMaand" disabled></td>
<td><input type="text" name="vakantiegeldPerJaar" id="vakantiegeldPerJaar"></td>
<td><input type="text" name="vakantiegeldTotaleTermijn" id="vakantiegeldTotaleTermijn" disabled></td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
function berekeningInkomenPerJaar() {
var inkomenPerMaand = parseInt(document.getElementById("fldInkomenPerMaand").value);
var inkomenPerJaar = document.getElementById("fldInkomenPerJaar");
inkomenPerJaar.value = inkomenPerMaand * 12;
}
var inputElement = document.getElementById("fldInkomenPerMaand");
inputElement.addEventListener("change", berekeningInkomenPerJaar);
</script>
</body>
</html>
I'm trying to write a script that dynamically calculates a total from 4 inputs that are editable by the user.
I'm having some trouble when I use parseFloat on my input values. They return as NaN.
So far, I've tried using parseInt instead of parseFloat, used .val() instead of .value, using name attributes instead of id attributes, and a couple of other things, that I can't remember off hand.
I haven't seen any other answers to similar questions, that have worked for me yet, so if you wouldn't mind taking a look at my code to see where I might've gone wrong, I'd appreciate it. Thanks!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Calc</title>
<style>
</style>
</head>
<body>
<table width = "250" border="1">
<tr>
<th align="left">A</th>
<th align="left">B</th>
</tr>
<tr>
<td>Rent</td>
<td id="rent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Food</td>
<td id="food" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Entertainment</td>
<td id="ent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Transportation</td>
<td id="trans" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<th align="left">Total</th>
<td id="total" align="right"></td>
</tr>
</table>
<script>
function calc() {
var w = parseFloat(document.getElementById("rent").value);
var x = parseFloat(document.getElementById("food").value);
var y = parseFloat(document.getElementById("ent").value);
var z = parseFloat(document.getElementById("trans").value);
document.getElementById("total").innerHTML=w+x+y+z;
}
</script>
</body>
</html>
You were giving your cells (<td> tags) id attributes, rather than your actual input fields.
Moving the id attributes to the input elements solves the issue.
In addition, since your are going to call the calc function repeatedly, it would make more sense to just scan the document once to get the references to the elements you are going to want to use over and over.
Lastly, it's best not to hook your HTML elements up to the JavaScript functions that should fire when an event happens in the HTML itself. You can see in my code snippet how I've removed that from the HTML and put it into the JavaScript.
// Wait until the DOM is fully loaded
window.addEventListener("DOMContentLoaded", function(){
// Declare and initialze variable references to needed elements:
var wElement = document.getElementById("rent");
var xElement = document.getElementById("food");
var yElement = document.getElementById("ent");
var zElement = document.getElementById("trans");
// Wire elements to event handlers:
wElement.addEventListener("change", calc);
xElement.addEventListener("change", calc);
yElement.addEventListener("change", calc);
zElement.addEventListener("change", calc);
// Event handler:
function calc() {
var w = parseFloat(wElement.value);
var x = parseFloat(xElement.value);
var y = parseFloat(yElement.value);
var z = parseFloat(zElement.value);
document.getElementById("total").textContent = w + x + y + z;
}
});
<table width = "250" border="1">
<tr>
<th align="left">A</th>
<th align="left">B</th>
</tr>
<tr>
<td>Rent</td>
<td align="right">
<input type="text" id="rent" size="7" value="0"></td>
</tr>
<tr>
<td>Food</td>
<td align="right">
<input type="text" id="food" size="7" value="0"></td>
</tr>
<tr>
<td>Entertainment</td>
<td align="right">
<input type="text" id="ent" size="7" value="0"></td>
</tr>
<tr>
<td>Transportation</td>
<td align="right">
<input type="text" id="trans" size="7" value="0"></td>
</tr>
<tr>
<th align="left">Total</th>
<td id="total" align="right"></td>
</tr>
</table>
You're trying to get the value of td's when you should target the inputs inside those tds, so you could use :
var w = parseFloat(document.querySelector("#rent input").value);
var x = parseFloat(document.querySelector("#food input").value);
var y = parseFloat(document.querySelector("#ent input").value);
var z = parseFloat(document.querySelector("#trans input").value);
Hope this helps.
function calc() {
var w = parseFloat(document.querySelector("#rent input").value);
var x = parseFloat(document.querySelector("#food input").value);
var y = parseFloat(document.querySelector("#ent input").value);
var z = parseFloat(document.querySelector("#trans input").value);
document.getElementById("total").innerHTML=w+x+y+z;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Calc</title>
<style>
</style>
</head>
<body>
<table width = "250" border="1">
<tr>
<th align="left">A</th>
<th align="left">B</th>
</tr>
<tr>
<td>Rent</td>
<td id="rent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Food</td>
<td id="food" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Entertainment</td>
<td id="ent" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<td>Transportation</td>
<td id="trans" align="right">
<input type="text" size="7" value="0" onchange="calc()"></td>
</tr>
<tr>
<th align="left">Total</th>
<td id="total" align="right"></td>
</tr>
</table>
</body>
</html>