Develop Reference

object HTMLInputElement JavaScript error

So basically, I'm doing a webpage to calculate my school marks but I can't get it to print the result at the input value... Instead, it prints [object HTMLInputElement]
Here's my JavaScript code:
<script type="text/javascript"> </script>
<script>
window.onload = function () {
var quran = document.getElementById('quran').value;
var islamic = document.getElementById('islamic').value;
var arabic = document.getElementById('arabic').value;
var english = document.getElementById('english').value;
var games = document.getElementById('games').value;
var pc = document.getElementById('pc').value;
var maths = document.getElementById('maths').value;
var chem = document.getElementById('chem').value;
var phys = document.getElementById('phys').value;
var bio = document.getElementById('bio').value;
var social = document.getElementById('social').value;
var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);
}
function resultFunc() {
document.getElementById('result').value = result;
}
</script>
And here's the table with the inputs:
<table class="rwd-table">
<tr>
<th>المادة الدراسية</th>
<th>الدرجة العظمى</th>
<th>درجة الطالب</th>
</tr>
<tr>
<td data-th="Movie Title">القرآن الكريم</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="quran" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">التربية الإسلامية</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="islamic" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">اللغة العربية</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="arabic" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">اللغة الإنجليزية</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="english" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">البدنية</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="games" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الحاسوب</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="pc" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الرياضيات</td>
<td data-th="Genre">80</td>
<td data-th="Year"> <input value="" id="maths" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الكيمياء</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="chem" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الفيزياء</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="phys" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الأحياء</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="bio" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الإجتماعيات</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="social" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<th>المجموع</th>
<th>500</th>
<th> <input style="width: 70px; background-color: gray;" id="result" value="" readonly /> </th>
</tr>
<tr>
<th style="font-size: 20px;">النسبة</th>
<th></th>
<th> <input style="width: 70px; background-color: gray;" value="" readonly /> </th>
</tr>
<tr>
<th></th>
<th> <input onClick="resultFunc()" type="submit" id="submit" value="اضغط هنا لحساب النسبة المئوية" /> </th>
<th></th>
</tr>
</table>
Sorry for the Arabic words, just look at the code :)
I've even tried to print the result in a cell instead of an input tag, but it gave me a similar error instead of printing the result...

The issue appears to be due to the calculation occurring during the window.onload event. In order to calculate the values you should be able to move the code from the onload event to the resultFunc function and it will allow you to calculate the total when you click the button.
function resultFunc() {
var quran = document.getElementById('quran').value;
var islamic = document.getElementById('islamic').value;
var arabic = document.getElementById('arabic').value;
var english = document.getElementById('english').value;
var games = document.getElementById('games').value;
var pc = document.getElementById('pc').value;
var maths = document.getElementById('maths').value;
var chem = document.getElementById('chem').value;
var phys = document.getElementById('phys').value;
var bio = document.getElementById('bio').value;
var social = document.getElementById('social').value;
var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);
document.getElementById('result').value = result;
}
Also note the reason why you get [object HTMLInputElement] is due to the scoping of the variable result. Since you declare var result in resultFunc the value is immediately lost. [object HTMLInputElement] is rendered, because window.result is also a shortcut to the element in the HTML document with the id of result.

Using javascript to calculate the total cost of an order based on quantity of products in html form

Trying to use javascript to calculate the total cost of an order using the quantity inputted through the form in html but the total is not displaying in the input box. Been messing around with it for a few days and yesterday was showing NaN but now the box stays completely blank. It's all within a singlular webpage as a pratical assessment for school and am just using the script tag.
See the js below
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = document.getElementByID("quantityCappuccino").value;
var quantityEspresso = document.getElementByID("quantityEspresso").value;
var quantityLatte = document.getElementByID("quantityLatte").value;
var quantityIced = document.getElementByID("quantityIced").value;
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
//print value to orderTotal
document.getElementById("orderTotal").value=total;
}
And here is the html for the form
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>

I found two errors:
(1) In your second four var statements, it's getElementById not getElementByID (don't all-cap "Id").
(2) Your first <input> tag has the id name misspelled. It should be quantityCappuccino (identical to the name attribute).
After fixing those, the code worked like a charm.
NOTE: It took me seconds to figure this out because the error console (In FireFox, strike the F12 key to open it) reported the problems. That console is your friend.

Try this !
$("#orderTotal").click(function () {
calculatePrice();
});
function calculatePrice()
{
//select data
var cappuccino = 3.00;
var espresso = 2.25;
var latte = 2.50;
var iced = 2.50;
var quantityCappuccino = $("#quantityCappucino").val();
var quantityEspresso = $("#quantityEspresso").val();
var quantityLatte = $("#quantityLatte").val();
var quantityIced = $("#quantityIced").val();
//calculate final cost
var total = (quantityCappuccino * cappuccino) + (quantityEspresso * espresso) + (quantityLatte * latte) + (quantityIced * iced);
console.log(total);
//print value to orderTotal
$("#orderTotal").val(total);
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table>
<tr align="center">
<td><hr>
Hot Drinks<hr>
</td>
<td><hr>
Price<hr>
</td>
<td><hr>
Quantity<hr>
</td>
</tr>
<form name="calcuccino">
<tr>
<td>
Cappuccino
</td>
<td align="center">
$3.00
</td>
<td align="center">
<input type="number" id="quantityCappucino" name="quantityCappuccino" value="0">
</td>
</tr>
<tr>
<td>
Espresso
</td>
<td align="center">
$2.25
</td>
<td align="center">
<input type="number" id="quantityEspresso" name="quantityEspresso" value="0">
</td>
</tr>
<tr>
<td>
Latte
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityLatte" name="quantityLatte" value="0">
</td>
</tr>
<tr>
<td>
Iced
</td>
<td align="center">
$2.50
</td>
<td align="center">
<input type="number" id="quantityIced" name="quantityIced" value="0">
</td>
</tr>
<tr>
<td>
<hr>
<input type="checkbox" id="takeaway" name="takeaway">Takeaway?</option>
</td>
</tr>
<tr>
<td>
<br>
<button type="button" onclick="calculatePrice()">Submit Order</button>
</td>
<td>
</td>
<td>
<br>
<hr>
Order total: <b>$</b>
<input type="text" name="orderTotal" id="orderTotal" Size=6 readonly>
</td>
</tr>
</form>
</table>
</body>
</html>

calculate the hours in javascript

I need to calculate in javascript the hours between jam_keluar and jam_masuk so that lama_parkir will be like:
lama_parkir = jam_keluar - jam_masuk // 4 hours
function hitunglamaparkir(){
var k = document.getElementById('jam_keluar').value;
var m = document.getElementById('jam_masuk').value;
var tentukan = (k - m);
document.forms.formID.lama_parkir.value = tentukan;
}
<form id="formID" name="form2" method="post" action="proses.php">
<tr>
<td id="noborder">Jam Masuk</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_masuk" type="text" id="jam_masuk" size="5" maxlength="15" value="10:30:00"/>
</td>
</tr>
<tr>
<td id="noborder">Jam Keluar</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_keluar" type="text" id="jam_keluar" size="5" onkeyup="hitunglamaparkir(this.value,getElementById('jam_keluar').value);" value="14:30:00"/></td>
</tr>
<tr>
<td id="noborder">Lama Parkir</td>
<td id="noborder">:</td>
<td id="noborder"><input name="lama_parkir" type="text" id="lama_parkir" size="5" maxlength="15" readonly="readonly"/></td>
</form>

This snippet determines the difference between jam_keluar and jam_keluar as such:
jam_keluar - jam_masuk = lama_parkir.
So we can determine this:
Your function is working properly
There is no need to call subtotal
There is no need for lama_parkir to be editable (make it readonly)
function hitunglamaparkir(){
var k = document.getElementById('jam_keluar').value;
var m = document.getElementById('jam_masuk').value;
var tentukan = (k - m);
document.forms.formID.lama_parkir.value = tentukan;
}
<form id="formID" name="form2" method="post" action="proses.php">
<tr>
<td id="noborder">Jam Masuk</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_masuk" type="text" id="jam_masuk" size="5" maxlength="15" />
</td>
</tr>
<tr>
<td id="noborder">Jam Keluar</td>
<td id="noborder">:</td>
<td id="noborder"><input name="jam_keluar" type="text" id="jam_keluar" size="5" onkeyup="hitunglamaparkir(this.value,getElementById('jam_keluar').value);"/></td>
</tr>
<tr>
<td id="noborder">Lama Parkir</td>
<td id="noborder">:</td>
<td id="noborder"><input name="lama_parkir" type="text" id="lama_parkir" size="5" maxlength="15" readonly="readonly"/></td>
</form>

parseFloat of input value returns NaN

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>

Find the position of a number from a list of sorted numbers in a table

I am trying to find the position of an input value from a list of input values in a table then display the position. This is after sorting the values from highest to lowest value.
In the example below, I expect the input with value of 10 to be position 2. Similarly, if I would test it with input with value of 45 the position will be 1 and so on.
I have tried the code below but I get a -1 position
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b - a
});
</script>
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class="">
<input name="name" class="sm" id="sm" type="text" value="4" />
</td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm1" type="text" value="6" />
</td>
<td class="pos1"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm2" type="text" value="10" />
</td>
<td class="pos2">
<script type="text/javascript">
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
</script>
</td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm3" type="text" value="45" />
</td>
<td class="pos3"></td>
</tr>
<tr>
<td class="">
<input name="name" class="sm" id="sm4" type="text" value="1" />
</td>
<td class="pos4"></td>
</tr>
</table>

You must call your javascript after the page loaded.
Put that code at the end of your body element :
</body>
<script type="text/javascript">
(function() {
var marksID = document.getElementById('sm2').value;
var mark = parseInt(marksID);
var valPos = marks.indexOf(mark);
document.getElementsByClassName('pos2')[0].textContent = valPos;
})();
</script>

I figured out .Using DOMContentLoaded as suggested by Steven P on one of the comments. Here is the demo of what i made. A good way of saying position of numbers in a list after sorting from highest to lowest.
<table id="tableID" width="200" border="1">
<tr>
<td width="122" class=""> <input name="name" class="sm" id="sm" type="text" value="4" /> </td>
<td width="62" class="pos"></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm1" type="text" value="6" /> </td>
<td class="pos1"> </td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm2" type="text" value="10" /> </td>
<td class="pos2">
</td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm3" type="text" value="6" /> </td>
<td class="pos3">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID3 = document.getElementById('sm3').value;
var mark3 = parseInt(marksID3);
//alert (mark3)
var valPos3 = marks.indexOf(mark3);
var valPost3 = parseInt(valPos3 + 1);
document.getElementsByClassName('pos3')[0].textContent = valPost3;
});
</script></td>
</tr>
<tr>
<td class=""> <input name="name" class="sm" id="sm4" type="text" value="45" /> </td>
<td class="pos4">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var marksID4 = document.getElementById('sm4').value;
var mark4 = parseInt(marksID4);
//alert (mark4)
var valPos4 = marks.indexOf(mark4);
var valPost4 = parseInt(valPos4 + 1);
document.getElementsByClassName('pos4')[0].textContent = valPost4;
});
</script></td>
</tr>
</table>
<script type="text/javascript">
// Get the values as numbers
var marks = document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
return b-a
});
</script>
If there are any other good suggestions or improvements i will highly appreciate