We Keep Coding

How can I assign a class based on the value of an xml node?

I am using the for loop below to retrieve the data form a "x-ml" result set and I build a t body out of the results. What I would like to do is assign a class to several rows based on the nodes value. For example:
-If Percent Reporting > 90% then assign class "green",
-If Percent Reporting > 70% and less than 90% then assign class "yellow",
-If Percent Reporting < 70% then assign class "red".
I was thinking I could analyze this while I was building the t body and assign the classes individually to each t d or cell, but I'm not sure how to go about it.
Ultimately I want to conditional format three of my columns differently based on their values.
Any ideas or tips would be much appreciated.
for (i = 0; i < x.length; i++) {
tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
"</td></tr>";
}

In your loop just create a variable for your class and use some if conditions to set the class.
for (i = 0; i < x.length; i++) {
var statusClass = 'good', //default value
percentReporting = parseFloat(x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue);
if (percentReporting < 70)
statusClass = 'bad';
else if (percentReporting < 90 && percentReporting > 70)
statusClass = 'warning';
tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
"</td><td class='" + statusClass + "'>" + percentReporting +
"</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
"</td></tr>";
}

Just calculate the class you want to add and add it to the row:
for (i = 0; i < x.length; i++) {
var percentReporting = x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue;
var class = "";
if(percentReporting > 90)
class = "green";
else if(percentReporting > 70)
class = "yellow";
else
class = "red";
tbody += "<tr><td>" + x[i].getElementsByTagName("Site")[0].childNodes[0].nodeValue +
"</td><td class ='" + class +"'>" + x[i].getElementsByTagName("TotalUnits")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentNotReporting")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("PercentBypassed")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberLogins")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("NumberAlarms")[0].childNodes[0].nodeValue +
"</td><td>" + x[i].getElementsByTagName("TotalEnergySavings")[0].childNodes[0].nodeValue +
"</td></tr>";
}

Pushing to null array, even though it is called as a global and works in my localhost, but not on the server

I'm getting the following error in my javascript. As the title states, this code is working on my localhost, but not when I put it onto my server
Uncaught TypeError: Cannot read property 'push' of null
at addItemToCart (shoppingCart.js:36)
at HTMLButtonElement.<anonymous> (shoppingCart.js:193)
at HTMLDocument.dispatch (jquery-1.11.1.min.js:3)
at HTMLDocument.r.handle (jquery-1.11.1.min.js:3)
I have identified that just before this push function is called that the cart variable is indeed null, but I declare it globally as an empty array, so I'm not sure why that would be.
Code for the function its failing on
var cart = [];
function addItemToCart(name, price, count, id, shortName) {
for (var i in cart) {
if (cart[i].id === id) {
cart[i].count += count;
saveCart();
for (var i in cart) {
if (cart[i].id == 500 && id != 500) {
removeItemFromCart(500);
alert('because you changed your cart, you will have to reapply your coupon');
}
}
return;
}
}
for (var i in cart) {
if (cart[i].id == 500 && id != 500) {
removeItemFromCart(500);
alert('because you changed your cart, you will have to reapply your coupon');
}
}
var item = new Item(name, price, count, id, shortName);
console.log(cart);
cart.push(item);
saveCart();
}
The error happens at teh cart.push(item); line because cart is null and can not be pushed to. Anymore information someone may need to help feel free and I will shoot it your way.
Thanks in advance!!!
edit:
function displayCart() {
console.log("*** display Cart ***");
var cartArray = listCart();
var output = "<tr><th>Items</th><th>Quantity</th><th>Price</th></tr>";
var output2 = "<tr><th> </th><th>Product name</th><th>Product price</th><th>Quantity</th><th>Total</th></tr>";
var output3 = " <tr><th>Product(s)</th></tr>";
var output4 = "";
console.log(listCart());
for (var i in cartArray) {
output += "<tr class='item'><td><div class='delete' id='removeItem' data-id='" + cartArray[i].id + "'></div>" + cartArray[i].name + "</td><td><input type='text' value='" + cartArray[i].count + "' readonly></td> <td class='price'>" + cartArray[i].price + "</td></tr>"
output2 += "<tr class='item'>"
+ "<td class='thumb'><a href='" + cartArray[i].id + "-item.php'><img src='img/catalog/product-gallery/" + cartArray[i].id + ".png' alt='Product Image'/></a></td>"
+ "<td class='name'><a href='" + cartArray[i].id + "'-item.php'>" + cartArray[i].name + "</a></td>"
+ "<td class='price'>$" + cartArray[i].price + "</td>"
+ "<td class='qnt-count'>"
+ "<a class='incr-btn' href='#' id='oneless' data-id='" + cartArray[i].id + "'>-</a>"
+ "<input class='quantity form-control' type='text' value=' " + cartArray[i].count + " '>"
+ "<a class='incr-btn' id='onemore' data-productid='" + cartArray[i].id + "' data-name='" + cartArray[i].name + "' data-quantity='" + cartArray[i].count + "' href='#'>+</a>"
+ "</td>"
+ "<td class='total'>$<em id='test'>" + cartArray[i].total + "</em></td>"
+ "<td class='delete' id='removeAllFromCart' data-id='" + cartArray[i].id + "'><i class='icon-delete'></i></td>"
+ "</tr>";
output3 += " <tr><td class='name border'>" + cartArray[i].shortName + "<span>x" + cartArray[i].count + "</span></td>"
+ "<td class='price border'>$" + cartArray[i].total + "</td></tr>";
if ($("#offerCount").attr("data-id") == cartArray[i].id) {
output4 += +"<a class='incr-btn' href='#' id='oneless' data-id='" + cartArray[i].id + "'>-</a>"
+ "<input class='quantity form-control' type='text' value=' " + cartArray[i].count + " '>"
+ "<a class='incr-btn' id='onemore' data-productid='" + cartArray[i].id + "' data-name='" + cartArray[i].name + "' data-quantity='" + cartArray[i].count + "' href='#'>+</a>";
}
}
output3 += " <tr><td class='th border'>Shipping</td><td class='align-r border'>Free shipping</td></tr>"
+ "<tr><td class='th'>Order total</td><td class='price'>$" + totalCart() + "</td></tr>"
$("#offerCount").html(output4);
$("#productDisplay").html(output3);
$("#showFullCart").html(output2);
$("#showCart").html(output);
$("#cartTotal").html(totalCart());
$("#totalCart").html(totalCart());
$("#myCartTotal").html(totalCart());
$("#showmyTotal").html(totalCart());
$("#cartCount").html(countCart());
}
function addCouponToCart(coupon) {
if (coupon == 'coupon10' && couponsAdded == 0) {
var couponReduce = -(totalCart() * .1).toFixed(2);
addItemToCart('10% off Coupon', couponReduce, 1, 500, '10% off');
couponsAdded += 1;
saveCoupon();
}
displayCart();
}
function countCart() {
var totalCount = 0;
for (var i in cart) {
totalCount += cart[i].count;
}
return totalCount;
}
function removeItemFromCartAll(id) {
for (var i in cart) {
if (cart[i].id === id) {
cart.splice(i, 1);
break;
}
}
for (var i in cart) {
if (cart[i].id == 500 && id != 500) {
removeItemFromCart(500);
alert('because you changed your cart, you will have to reapply your coupon');
}
}
saveCart();
}
Code that calls the addCouponToCart Function whenever a post gets set.
<?php if (isset($_POST['coupon_code'])) { ?>
<script>
addCouponToCart(coupon);
</script>
<?php } ?>

#codenoname Provided the correct answer of checking for the null cart. That solved the issue, ultimately a lot of functions were not being defined properly. I had wrapped the entire code in a document ready function which seemed to be the issue. Whenever I removed that it worked. Thank you all for your input.
if (!cart) {
cart = [];
}

for loop is not working inside append function

I want to wrap entire content into single div, it needed for loop inside append function. after wrapping around div in javascript, it's not displaying anything.
here is my code;
$('#postjson').append(
'<div>' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + ' ' + data[0].MiddleName + ' ' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>'
//+'Email:'+data[0].Email+'<br/>'
//+'Mobile:'+data[0].Mobile+'<br/>'
+ '</p>' + '</div>'
// displaying book details
+
for (var i = 1; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].BookNo + "</td>");
tr.append("<td>" + data[i].BookTitle + "</td>");
tr.append("<td>" + data[i].BookGenre + "</td>");
tr.append("<td>" + data[i].BookWriter + "</td>");
tr.append("<td>" + data[i].BookDescription + "</td>");
$('#displaytable').append(tr);
} + '</div>'
);

Perhaps you meant
var $table = $('<table>', {"id:":"displaytable"});
for (var i = 1; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td/>",{"text":data[i].BookNo});
tr.append("<td/>",{"text":data[i].BookTitle});
tr.append("<td/>",{"text":data[i].BookGenre});
tr.append("<td/>",{"text":data[i].BookWriter});
tr.append("<td/>",{"text":data[i].BookDescription});
$table.append(tr);
}
$('#postjson')
.append($('<div />',{"id":"tableDiv"}))
.append($('<div />',{"id":data[0].id}).append($('<div />',{"id":"namediv"}).html(data[0].FirstName + ' ' + data[0].MiddleName + ' ' + data[0].LastName +
.append($table);

Put the loop outside of the append function and finally append the table to the 'container' element, which is specified in the html string
$('#postjson').append(
'<div id="container">' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + ' ' + data[0].MiddleName + ' ' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>' + '</p>' + '</div>')
for (var i = 1; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].BookNo + "</td>");
tr.append("<td>" + data[i].BookTitle + "</td>");
tr.append("<td>" + data[i].BookGenre + "</td>");
tr.append("<td>" + data[i].BookWriter + "</td>");
tr.append("<td>" + data[i].BookDescription + "</td>");
$('#displaytable').append(tr);
}
$("#container").append($('#displaytable'));

javascript find delta of modified form data

I have an html and javascript page rendered through python django, where I have a form data of 30 entries maximum in each page, that can be edited. I included a hidden field with the same form data to extract the old, and modified values in the form. I am looking for extracting just the delta (old and new values for the field that was changed). My code is
{%extends 'base.html'%}
{%block content%}
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<script>
function onEdit(btn)
{
var id=btn.id;
var before = '';
var after = '';
var input = document.getElementsByName("new"+id);
if(btn.value=="Edit") {
//var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //search is the key defined in django view and will be substituted with the json value
{% endautoescape %}
text = ''
var out = '<form name="display" id="update" method="post" action="update/">';
out += "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "<th>MX priority</th>";
out += "<th>Recorded generated on</th>";
out += "<th></th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to + "'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
data.records[i].priority_mx +
"</td><td>" +
data.records[i].generated_on +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
out += "<input type='hidden' name='currenturl' value='" + link + "'>"
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
//out += '<input style="position: relative; left: 550px;" type="submit" value="Submit">';
out += '<br>'
out += '<button type="submit" class="btn btn-default">Submit</button>'
out += '</form>';
document.getElementById("data").innerHTML = out
</script>
{%endblock%}
What is the best way to do this?

GetElementById not finding ID

Hi I have been working on this code that creates a table with radio buttons for each word. Currently that works perfectly, however I am not making an on click function on the radio button and submit. They both get to the function being called when clicked, but once in the function and i call getElementById to validate or change color the ID is not found or at least thats what I assume because after putting an alert, nothing appears.
I am relatively new at javascript so any advice would help. I was told it might be because they are being called before created but from what I can see in my code thats not the case. Any suggestions?
edit:
This is the code from where trouble arises. Only the spanish once has the on click on it. Didn't put the submit validate because i figured they are the same problem
for (i = 0; i < sentences.length; i++) {
document.write('<p><a onclick ="javascript:ShowHide(\'Sentence' + (i + 1) + '\')" href="javascript:;"><font color="#0000FF"><u>Sentence' + (i + 1) + '</u></font></a></p>');
document.write('<table style="display: none; table-layout: fixed" id="Sentence' + (i + 1) + '" border = "1">');
writeSentence(i, words, "Sentences");
document.write('</table>');
document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_English" /> All English ');
document.write('<input type="checkbox" name="Sentence_lang ' + (i + 1) + '" id = "Sentence_lang ' + (i + 1) + '" value="All_Spanish" /> All Spanish <br />');
}
document.write('</p>')
function writeSentence(i, array, name) {
var Name = name;
document.write('<tr>');
document.write('<td>');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
var word = array[i][j];
document.write('<td>');
if (Name == "Sentences") document.write('<span class="kept" id="word_' + i + '_' + j + '">');
document.write(word);
if (Name == "Sentences") document.write('</span> ');
document.write('</td>');
}
document.write('</tr>');
document.write('<td>');
document.write('English');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" name="' + Name + (i + 1) + '_' + (j) + '" id="Eng_' + (i + 1) + '_' + (j) + '" value="English" >');
document.write('</td>');
}
document.write('</tr>');
document.write('<tr>');
document.write('<td>');
document.write('Spanish');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" onclick = "color(' + i + ',' + j')" name="' + Name + (i + 1) + '_' + (j) + '" id="Spa_' + (i + 1) + '_' + (j) + '" value="Spanish"> ');
document.write('</td>');
}
document.write('</tr>');
document.write('<tr>');
document.write('<td>');
document.write('Other');
document.write('</td>');
for (j = 0; j < array[i].length; j++) {
document.write('<td>');
document.write('<input type="radio" name="' + Name + (i + 1) + '_' + (j) + '" id="Other_' + (i + 1) + '_' + (j) + '" value="other" > ');
document.write('</td>');
}
document.write('</tr>');
if (Name == "Sentences") for (j = 0; j < array[i].length; j++)
document.write('<input type="radio" input style= "display: none" name="' + Name + (i + 1) + '_' + (j) + '" id="' + Name + (i + 1) + '_' + (j) + '" value="Norm" checked>');
}
function color(i, j,lang) {
var word = document.getElementById('word_' + i + '_' + j + '');
aleart(word);
if (lang == "Spa") word.className = "blue";
}
edit the last if statement is what I'm trying to do. The third parameters is currently empty because i could not figure out how to pass the string Spa properly. But i can go around that if needed.

You've got a typo: aleart(word);, the error should be visible in your console. Change it to alert(word); and the alert box should appear.
Apart from that, you should not use document.write. It won't work once the document is loaded. See Alternatives to document.write or What are alternatives to document.write?