I'd like to reference a button status within a script

I'd like to reference a button status within a script - javascript

How can I reference my menu button from my script? When I click the button after implementation, it doesn't seem to hold true... Thank you for your help! The problem here is specifically directed towards the if statement in the bottom script where it states if(data_type ==1){ do something}.
var data_type = 0;
function data() {
data_type = 1;
}
///menu-button///
<li id="menu" onclick="data()" style="max-width:82px">
DATA
</li>
<script>
document.write('<div id="div2" class="wrapper">');
document.write('<ul id="Grid">');
for (var i = 0; i < 33; i++) {
var ch = "";
if (i%3==0) { ch="E"; } else if (i%3==1) { ch="C"; } else { ch="W"; }
document.write('<li id="mE'+ i + '" class="mix ' + sortSettings[i][0] + ' ' + i
+ '" onclick="imgClicked(' + i + ')" > <div class="content"> <div><img class="bImg" id="imgI' + i
+ '" src="ico1.jpg" width="145" height="213"></div> <div id="menu"> <img id="gI' + i + '" src="ico1.jpg" width="35" height="35" style="float:left"></div>'
+ '<div id="descNum">' + (Math.floor(i/3)+1) + ch + '</div>'
+ '<div id="desc">' + allSettings[i][1] + '</div>'
+ '<div id="desc">' + allSettings[i][2] + '</div>'
+ '<div id="desc">' + allSettings[i][0] +' '+ allSettings[i][3] + '</div></div></li>');
}
for (var i = 0; i < 11; i++) {
for (var j = 0; j < 3; j++) {
var add = "";
if(data_type == 1){
if (j==0) {
add="E";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + "(1).JPG");
} else if (j==1) {
add="C";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + "(1).JPG");
} else if (j==2) {
add="W";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + "(1).JPG");
}
}
else{
if (j==0) {
add="E";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + ".JPG");
} else if (j==1) {
add="C";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + ".JPG");
} else if (j==2) {
add="W";
$("#imgI" + ((i*3)+j)).attr("src", "Beds/20160530/" + (i+1) + add + ".JPG");
}
}
}
}
document.write('<li class="gap"></li>');
document.write('</ul>');
document.write('</div>');
</script>

Related

How do I replace a string in a parent page from a JS created childpage?

I am creating a dynamic list with JS
var obj = JSON.parse(Agent212);
var i;
var serie = "Agent212";
for (i = 0; i < obj.strips.length; i++) {
if (obj.strips[i].Collectie == "0") {
document.write("<li><a onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")' style = 'color:orange'>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</a></li>");
}
else if (obj.strips[i].Collectie == "2") {
document.write("<li><a onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")' style = 'color:red'>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</a></li>");
}
else {
document.write("<li><a class='ToHide' onclick='newPage(" + obj.strips[i].Nummer + "," + serie + ")'><strike>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel + "</strike></a></li>");
}
}
when I click on an item in the list, I create a childpage
function newPage(StripNum, SerieNaam) {
var obj = JSON.parse(SerieNaam);
var i;
var x = StripNum;
for (i = 0; i < obj.strips.length; i++) {
if (obj.strips[i].Nummer == x) {
if (obj.strips[i].Collectie == 0) {
var myWindow = window.open();
myWindow.document.writeln('<html>');
myWindow.document.writeln('<head>');
myWindow.document.writeln('<meta name="viewport" content="width=device-width, initial-scale=1">');
myWindow.document.writeln('<link rel="stylesheet" href="./css/W3CSS.css">');
myWindow.document.writeln('<scr' + 'ipt>');
myWindow.document.writeln('function windowClose(){');
myWindow.document.writeln('window.close();}'); **
myWindow.document.writeln('function ToevoegenVerzameling(){'); **
myWindow.document.writeln('window.alert("toegevoegd aan verzameling");');
myWindow.document.writeln('window.close();');
myWindow.document.writeln('}');
myWindow.document.writeln('</scr' + 'ipt>');
myWindow.document.writeln('</head>');
myWindow.document.writeln('<body>');
myWindow.document.writeln('<div class="w3-container w3-display-topmiddle">');
myWindow.document.writeln('<div class="w3-card-16 w3-round-xlarge" style="width:100%">');
myWindow.document.writeln('<a onclick="windowClose();"><center><img src="' + obj.strips[i].Link + obj.strips[i].Nummer + '.jpg"></center></a>');
myWindow.document.writeln('<div class="w3-container w3-margin-top">');
myWindow.document.writeln('<center><B>Nummer: </B><I>' + obj.strips[i].Nummer + '</I></center>');
myWindow.document.writeln('<center><B>Titel: </B><I>' + obj.strips[i].Titel + '</I></center>');
myWindow.document.writeln('<center><button onclick="ToevoegenVerzameling()" class="w3-btn w3-light-grey w3-border w3-border-black w3-round-xlarge w3-margin-top w3-margin-bottom" style="width:100%"><h2><b>Toevoegen</b></h2></button></center>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</div>');
myWindow.document.writeln('</body>');
myWindow.document.writeln('</html>');
}
all of the above does work, but know I want to ad a replace function to ToevoegenVerzameling().
I've tried with adding this piece of code.
myWindow.document.writeln('if (window.opener != null && !window.opener.closed){');
myWindow.document.writeln('var str = "<li><a onclick='
newPage(" + obj.strips[i].Nummer + ", " + serie + ")
' style = '
color: orange '>" + obj.strips[i].Nummer + " - " + obj.strips[i].Titel +"</a></li>";');
myWindow.document.writeln('str.replace("<a onclick='
newPage(", " < a class = 'ToHide'
onclick = 'newPage(");'); myWindow.document.writeln('str.replace("style = '
color: orange '>", "><\strike>");'); myWindow.document.writeln('str.replace("</a>", "</strike></a>");}');
But I can't get it to work, Were am I making a mistake in this?

Duplicate item appearing in DIV

I have a problem with my code. I am pushing items into a new array and displaying two of them in a DIV. For some reason its showing the same item twice rather than showing two separate items. Hoping someone can help me out with this. I just need a way to prevent the same recipe from being able to show twice in the DIV.
var categoryItems = [];
var recipeTitle = $('#recipeTitle').text();
$.each(recipe_data, function(i, item){
if (item.recipeCategory == "4" && recipeTitle !== item.recipeName) { categoryItems.push(item); }
});
var similarRecipe = '';
var randomRecipe = {};
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit: Please take a look at this fiddle for an example. It should not show the same recipe twice when refreshing, rather show two different recipes from the category. My problem is that is is sometimes it is showing the same one twice when you refresh. https://jsfiddle.net/wn4fmm5r/

you are generating one random Recipe and displaying same twice into your for loop
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
for(var i = 0; i < categoryItems.length; i += 2) {
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
try including your statement for generating random recipe inside loop.
for(var i = 0; i < categoryItems.length; i += 2) {
randomRecipe = categoryItems[Math.floor(Math.random()*categoryItems.length)];
similarRecipe = [ '<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL +'" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>' ];
$('#recipeSimilar').append(similarRecipe);
}
Edit for no repeating ----
var counter;
for (var i = 0; i < categoryItems.length; i += 2) {
var item = Math.floor(Math.random() * categoryItems.length);
if (!counter) {
counter = item;
} else {
if (counter == item) {
item = Math.floor(Math.random() * categoryItems.length);
counter = item;
}
}
randomRecipe = categoryItems[item];
similarRecipe = ['<div class="col-md-6 col-sm-6 img-margin">' + ' <div class="addthis_inline_share_toolbox" data-url="' + randomRecipe.recipePageURL + '" data-title="' + randomRecipe.recipeName + '"></div>'
+ '' + '<img class="img-responsive" src="' + randomRecipe.recipeImageCategoryURL + '">' + ''
+ '' + '<h3 class="recipeSubCategoryImgCaption">' + randomRecipe.recipeName + '</h3>' + '' + '</div>'];
$('#recipeSimilar').append(similarRecipe);
}

To Add New row to dynamic table

In the below code i have dynamic table with dynamic colmnns.I can able to generate table now i want to add new row .As this dynamic table has dynamic id's for each textbox/dropdown/checkbox of the table.So when i click new row it also have dynamic id for each textbox/dropdown/checkbox.Pls help me to do this.
function LoadTableFields(sFieldID, Name, newdiv, FieldValue, TableValues) {
var TblValues = JSON.parse(TableValues);
var tHTML = '';
tHTML += '<table class="table table-bordered table-striped" id="table_' + sFieldID + '" name="' + Name + '"><thead><tr >';
var headers = [];
$.each(TblValues, function(i, item) {
if (headers.indexOf(item.Name) === -1) {
headers.push(item.Name);
tHTML += '<th class="text-center">' + item.Name + '</th>';
}
});
tHTML += '</tr></thead><tbody><tr id="row_0" data-id="0">';
var Count = 0;
$.each(TblValues, function(i, item) {
if (item.FieldType == 'TextBox') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><input type="text" id=' + item.Name + i + ' name=' + item.Name + i + ' placeholder=' + item.Name + ' class="form-control" value=' + item.FieldValue + ' /></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'DropDownList') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
var options = LoadTableFieldEnums(sFieldID, item.Name, item.FieldValue);
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><select id=' + item.Name + i + ' name=' + item.Name + i + ' class="form-control">' + options + '</select></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
} else if (item.FieldType == 'CheckBox') {
tHTML += '<td data-name=' + item.Name + '><input type="checkbox" id=' + item.Name + i + ' name=' + item.Name + i + '/></td>';
} else if (item.FieldType == 'Date') {
if (item.Name === headers[0]) {
tHTML += '<tr>';
}
tHTML += '<td data-name=' + item.Name + ' class="col-xs-3 form-group"><div class="input-group date"><input type="text" class="form-control" id=' + item.Name + '0' + ' name=' + item.Name + '0' + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div></td>';
if (item.Name === headers[headers.length - 1]) {
tHTML += '</tr>';
}
Count = i;
} else {
tHTML += '<td data-name=' + item.Name + '></td>';
}
});
tHTML += '</tr></tbody></table>';
tHTML += '<a id="add_row_' + sFieldID + '" class="btn btn-default pull-left" onclick="AddNewTableRow(' + sFieldID + ');">Add Row</a><a id="delete_row_' + sFieldID + '" class="pull-right btn btn-default" onclick="DeleteTableRow(' + sFieldID + ');">Delete Row</a>';
newdiv.innerHTML += tHTML;
$('#divComplete').append(newdiv);
}
function AddNewTableRow(sFieldID) {
// Dynamic Rows Code
// Get max row id and set new id
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
newid++;
var tr = $("<tr></tr>", {
id: "row_" + newid,
"data-id": newid
});
// loop through each td and create new elements with name of newid
$.each($("#table_" + sFieldID + " tbody tr:nth(0) td"), function() {
var cur_td = $(this);
var children = cur_td.children();
// add new td and element if it has a nane
if ($(this).data("name") != undefined) {
var td = $("<td></td>", {
"data-name": $(cur_td).data("name")
});
// Date control
if ($(children[0]).prop('tagName') == 'DIV') {
var strname = $(cur_td).data("name");
var c = $('<div class="input-group date"><input type="text" class="form-control" id=' + strname + '' + newid + ' name=' + strname + '' + newid + ' /><span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span></div>');
c.appendTo($(td));
} else {
var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
c.attr("name", $(cur_td).data("name") + newid);
c.attr("id", $(cur_td).data("name") + newid);
c.appendTo($(td));
}
td.appendTo($(tr));
} else {
var td = $("<td></td>", {
'text': $('#table_' + sFieldID + ' tr').length
}).appendTo($(tr));
}
});
// add the new row
$(tr).appendTo($('#table_' + sFieldID));
}
function DeleteTableRow(sFieldID) {
var newid = 0;
$.each($("#table_" + sFieldID + " tr"), function() {
if (parseInt($(this).data("id")) > newid) {
newid = parseInt($(this).data("id"));
}
});
if (newid != 0) {
$("#row_" + (newid)).remove();
}
}

Javascript dynamic array window with multiple answer options

I'm working on multiple arrays and occured to one problem.
When I have only one question div generated I can add additional questions without problem, but if I add another question div, I can't add additional questions to neither of both windows(same applies to any other number too), error which is I get is newdiv[counterq] is undefined. Can anybody help me with this issue? Thanks!
Also, how can I move div AddOption below created new one option input?
I'm new at programming sorry if won't explain in correct terms. Thanks!
Edit: Updated with new problem. Didn't wanted to create seperate topic.
HTML :
var counterq = 0;
var limitq = 3;
var countero = 0;
var limito = 5;
function AddContent(divName) {
countero = 0;
if (counterq == limitq) {
alert("You have reached the limit of adding " + counterq + " inputs");
} else {
var newdiv = new Array()
newdiv[counterq] = document.createElement('div');
newdiv[counterq].className = "ContentWindow[" + counterq + "]";
newdiv[counterq].innerHTML = "<p class='ContentQuestion'>Question " + (counterq + 1) + " </p> <input type='text' class='AddQuestionInput' value='Type your question' name='myQuestion[" + counterq + "]'>";
if (countero == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>";
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 2) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + (countero+1) + "]'></div>";
document.getElementById(divName).appendChild(newdiv[counterq]);
countero += 2;
AddOption = function() {
var counterq = 0;
var limito = 5;
if (countero == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML += "<div class='OptionInputOuterWindow'><span class='OptionInputDescription'>Option " + (countero + 1) + "</span> <input type='text' class='AddOptionInput' name='myQuestion[" + counterq + "]"+"[myInputs]"+"[" + countero + "]'></div>";
$("div[class*=ContentWindow]").css("height", "+=27");
countero++;
}
};
}
$(".container").css("height", "+=344");
newdiv[counterq].innerHTML += "<div class='AddOption' onclick='AddOption();'><img src='/img/Plussmall.png'>Add option</div>";
counterq++;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Content"></div>
<div class="AddContent" onclick="AddContent('Content');" >
<img src="/img/Plussmall.png">Add content
</div>

If you want the counter to increase by 2, use countero += 2 instead of countero++.
var counterq = 0;
var limitq = 3;
var countero = 0;
var limito = 5;
function AddContent(divName) {
if (counterq == limitq) {
alert("You have reached the limit of adding " + counterq + " inputs");
} else {
var newdiv = new Array()
newdiv[counterq] = document.createElement('div');
newdiv[counterq].className = 'new-rect';
if (counterq == limito) {
alert("You have reached the limit of adding " + countero + " options");
} else {
newdiv[counterq].innerHTML = "Entry " + (countero + 1) + " <br><input type='text' name='myInputs[" + countero + "]'><br>Entry " + (countero + 2) + " <br><input type='text' name='myInputs[" + countero + "]'><br>";
document.getElementById(divName).appendChild(newdiv[counterq]);
countero += 2;
}
counterq++;
}
}
.new-rect {
width: 300px;
height: 100px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Content"></div>
<input type="button" class="AddContent" value="Add content" onclick="AddContent('Content');">

JavaScript error with XML when trying to read empty node

I am trying to render a catalog from an XML document and everything works, although when trying to show a default image if there is no image present in the XML node, it disables the parent node therefore forcing it not to show any of it and it reads me an error in my console saying:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of
undefined
Which is pointing to this part of the code:
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0)
{
So my question is where in my code below is my error causing it to not load the XML node?
PS: If anybody needs more of my code please let me know, and I would be happy to post it.
for (var i = fromItem; i < nextMaxItem; i++) {
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
+ '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
} else {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="'+ records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue +'">'
+ '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
}
}
Here is the whole JavaScript code:
var page = 1, perPage = 12, content = document.getElementById('content'),
pagination = document.getElementById('pagination'), records;
function paganation(page) {
var nextMaxItem = perPage * page,
fromItem = (page - 1) * perPage,
maxPages = Math.ceil(records.length / perPage);
var xmlContent = '<div class="row">';
for (var i = fromItem; i < nextMaxItem; i++) {
if (records[i].getElementsByTagName("IMAGE")[0].childNodes.length > 0) {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
+ '<img class="product-image" src="' + records[i].getElementsByTagName("IMAGE")[0].childNodes[0].nodeValue + '" alt="' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
} else {
xmlContent += '<article class="post all ' + records[i].getElementsByTagName("CATEGORY")[0].childNodes[0].nodeValue + '" id="">'
+ '<div class="col-sm-4 col-lg-4 col-md-4"><div class="thumbnail img-hover">'
+ '<a class="fancybox" rel="group" href="' + records[i].getElementsByTagName("BIGIMAGE")[0].childNodes[0].nodeValue + '" title="' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '">'
+ '<img class="product-image" src="/images/Products/no-preview.jpg" alt="No Preview Available" />'
+ '<div class="caption">'
+ '<h4>' + records[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + '</h4>'
+ '<p>' + records[i].getElementsByTagName("SHORTDESCRIPTION")[0].childNodes[0].nodeValue + '</p>'
+ '</div>'
+ "</a></div></div></article>";
}
}
xmlContent += "</div>";
content.innerHTML = xmlContent;
var paginationContent = '<nav><ul class="pagination">';
if (page > 1) {
paginationContent += '<li>';
paginationContent += '<span aria-hidden="true">«</span>';
paginationContent += '</li>';
} else {
paginationContent += '<li class="disabled">';
paginationContent += '<span aria-hidden="true">«</span>';
paginationContent += '</li>'
}
var prevPosition = page - 3;
var nextPosition = page + 3;
for (var i = 1; i <= maxPages; i++) {
if (i != page) {
if (i >= prevPosition && i <= nextPosition) {
var linkToPage = i == prevPosition ? 1 : i == nextPosition ? maxPages : i;
var linkText = i == prevPosition ? "..." : i == nextPosition ? "..." : i;
paginationContent += "<li>";
paginationContent += '' + linkText + '';
paginationContent += "</li>";
}
} else {
paginationContent += "<li class='active'>";
paginationContent += '' + i + '';
paginationContent += "</li>";
}
}
var next = page + 1;
if (next <= maxPages) {
paginationContent += '<li>';
paginationContent += '<span aria-hidden="true">»</span>';
paginationContent += '</li>';
} else {
paginationContent += '<li class="disabled">';
paginationContent += '<span aria-hidden="true">»</span>';
paginationContent += '</li>';
}
paginationContent += '</ul></nav>';
pagination.innerHTML = paginationContent;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", xmlUrl, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
records = xmlDoc.getElementsByTagName(xmlNode);
records = Array.prototype.slice.call(records).sort(function () {
return Math.random() > 0.5 ? 1 : -1
});
paganation(1);

If we imagine that records was of length 18, then for the second page, you would have:
fromItem - 12
nextMaxItem - 24
You are iterating i from fromItem to nextMaxItem, but as soon as you go past i = 18, you've gone past the end of records. You need to make sure that doesn't happen. You need to ensure that you don't iterate past the end of your array:
var max = Math.min(nextMaxItem, records.length);
for (var i = fromItem; i < max; i++) {
....
}

Develop Reference

JavaScript is the programming language of the Web.

I'd like to reference a button status within a script - javascript

Related

How do I replace a string in a parent page from a JS created childpage?

Duplicate item appearing in DIV

To Add New row to dynamic table

Javascript dynamic array window with multiple answer options

JavaScript error with XML when trying to read empty node

Categories

Resources