Develop Reference

iframe element returns undefined after onload event?

EDIT: Is there no one who can shed some light on this issue? Anything would be appreciated. :)
I have a script that is supposed to check to see if an elements html contains a given string..
When these elements do exist, my code throws this error: Uncaught TypeError: Cannot read property 'outerHTML' of null
This is the line: let check = document.querySelector("#iframe_${globalI}").contentWindow.document.querySelector(".Row"+inc).outerHTML
I then check to see if the string includes a check string.. IE: check.includes("Pre Trip")
If I run this line directly in the console it works and returns true... So what is going on here..?? How can I get this check to pass..?
I have this check executing after a setTimeout of 20 seconds, then wrapped again in another setTimeout for 500ms as I was trying to figure this out..
Also, I need to note that there are no XSS / CORS issues.
Here is my code..
function checkRowCount(x){
console.log("Row count called on "+x);
let rowCount = 0;
for(let i = 0; i < 30; i++){
if(typeof(document.querySelector(`#iframe_${x}`).contentWindow.document.querySelector('.Row'+i)) != 'undefined' && document.querySelector(`#iframe_${x}`).contentWindow.document.querySelector('.Row'+i) != null){
rowCount++;
}
}
console.log(rowCount);
return rowCount;
}
let globalCompiler = []; //globalCompiler[globalI] = {unit: unitNumber[globalI], data: ["X", " ", "NO POST TRIP]}
let unitNumber = [1031,1743,1744,1986,3239,3256,3257,4024,4062,4063,4064,4065,4247,4309,4315,4326,4327,4334,4335,4337,4350,4382,4385,7166,7380,7381,8765,8823,8945,8950,8988,10720,17045,17163,40014,40069,40122,40380,80129,80188,80700,80701,80702,80728,80831,80852,80875,"80876","81027","81038","401288","401306","402409","60099T","CH889","CH890","SR31077","T19","U5509","U6660","U6667","U6675","U8854","US1025T"];
let url = "http://winweb.cleanharbors.com/Vehicle/VehicleTDSearch.aspx?SearchType=DVIR";
function iframeLoaded(selector, unit, setDate, callback){
document.querySelector(`#iframe_${selector}`).contentWindow.document.querySelector("#txtStartDate").value = setDate;
document.querySelector(`#iframe_${selector}`).contentWindow.document.querySelector("#txtEndDate").value = setDate;
document.querySelector(`#iframe_${selector}`).contentWindow.document.querySelector("#txtVhcleNo").value = unit;
document.querySelector(`#iframe_${selector}`).contentWindow.document.querySelector("#btnRetrieve").click();
}
let loadFinished = {};
for(let dec = 0; dec < unitNumber.length; dec++){
loadFinished[unitNumber[dec]] = false;
}
console.log(loadFinished);
for(let globalI = 0; globalI < 3; globalI++){
globalCompiler[globalI] = {unit: unitNumber[globalI], data: []};
let iframeObj = document.createElement('iframe');
iframeObj.id = `iframe_${globalI}`;
iframeObj.hidden = false;
iframeObj.src = url;
iframeObj.onload = () => {
if (loadFinished[unitNumber[globalI]] == false) {
loadFinished[unitNumber[globalI]] = true;
let setDate = "11/01/2019";
iframeLoaded(globalI, unitNumber[globalI], setDate);
console.log("iframeloaded called on " + globalI);
setTimeout(() => {
setTimeout(() => {
let dateCheckObject = {}, rowCount = checkRowCount(globalI), trackingArr = [];
if (rowCount == 0) {
globalCompiler[globalI].data.push(" ");
} else {
for (let inc = 1; inc <= rowCount; inc++) {
//let check = $('#iframe_'+globalI).contents().find(`.Row` + inc).html().includes("Pre Trip");
let check = document.querySelector(`#iframe_${globalI}`).contentWindow.document.querySelector(".Row"+inc).outerHTML
if (check.includes("Pre Trip")) {
dateCheckObject.pre = true;
} else {
dateCheckObject.post = true;
}
}
if(dateCheckObject.pre && dateCheckObject.post) {
console.log("X");
globalCompiler[globalI].data.push("X");
dateCheckObject = {};
} else if (dateCheckObject.pre == 'undefined') {
console.log("NO PRE");
globalCompiler[globalI].data.push("NO PRE TRIP");
dateCheckObject = {};
} else {
console.log("NO POST");
globalCompiler[globalI].data.push("NO POST TRIP");
dateCheckObject = {};
}
}
},500);
}, 20000);
}
};
document.body.appendChild(iframeObj);
console.log("Global Loop called");
}
```

A for loop ran one count too far...
e.g.: for (let inc = 1; inc <= rowCount; inc++)
Should have been for (let inc = 1; inc < rowCount; inc++)

White page with loop loading in firefox

I have a problem only in Firefox. When I click a button in my application in Firefox the page is white with infinite loading, it's in a loop.
I have done a debugger on my code with dev console and I found where the function breaks. Note that there are no errors in the console.
function setSavedToSended() {
console.log('sono nella funzione')
if (projObjSave == undefined) {
projObjSave = projObj;
}
var items = $("td [id-status]"); //the problem starts here
for (var item in items) {
var _this = parseInt($(items[item] /* here it breaks item*/ ).attr("id-status"));
if (_this == 1) {
var tempId = $(items[item]).attr("id")
$("#" + tempId).attr("id-status", 2).addClass("sended");
var currProj = tempId.split("_");
var projIndex, taskIndex;
for (var i = 0; i < projObj.length; i++) {
if (currProj[0] == projObj[i].projectId) {
projIndex = i;
}
}
if (currProj.length == 3) {
if (currProj[1] == "ORD") {
projObjSave[projIndex].timeTrackingProjectList.timeTrackingOrdinario[currProj[2]]["idStatus"] = 2;
} else {
projObjSave[projIndex].timeTrackingProjectList.timeTrackingStraordinario[currProj[2]]["idStatus"] = 2;
}
} else {
for (var index = 0; index < projObj[projIndex].taskList.length; index++) {
if (currProj[1] == projObj[projIndex].taskList[index].taskId) {
taskIndex = index;
}
}
currProj[2] == "ORD" ? projObjSave[projIndex].taskList[taskIndex].timeTrackingTaskOrdinario[currProj[3]]["idStatus"] = 2 : projObjSave[projIndex].taskList[taskIndex].timeTrackingTaskStraordinario[currProj[3]]["idStatus"] = 2;
}
} else console.log('nothing done')
}
saveSendProject(2)
}

JavaScript How to run variables in if and for?

I want to use FOR loop instead, please.
let int1, int1, int3;//... (int4 to int999)
let op1, op;//... (op2 to op999)
if(int1 < 200) {
op1 = int1;
}
else {
op1 = '';
}
if(int2 < 200) {... (same IF statement for int2 to int999)
Instead, I want this.
for(i = 1; i < 5; i++) {
let int = [int1, int2, int3, int4];
let op = [op1, op2, op3, op4];
if(int[i] < 200) {
op[i] = int[i];
}
else {
op[i] = '';
}
}
alert(op1 + op2 + op3 + op4);
But that doesn't work somebody help.

Your code should be as follows with an example:
let int = [1, 2, 3, 4];
let op = [999, 999, 999, 999];
for(i = 0; i < 4; i++) {
if(int[i] < 200) {
op[i] = int[i];
}
else {
op[i] = '';
}
}
alert(op[0] + op[1] + op[2] + op[3]);
Out:
285
Or in your kind of "symbolic form":
let int = [int1, int2, int3, int4];
let op = [op1, op2, op3, op4];
for(i = 0; i < 4; i++) {
if(int[i] < 200) {
op[i] = int[i];
}
else {
op[i] = 0;
}
}
alert(op[0] + op[1] + op[2] + op[3]);

Instead of a set of variables, You should use an array instead.
Then, Your code would look something like this:
let input = [input1, input2 ... input999];
let output = [];
for(let i = 0; i < input.length; i++){
if(input[i]) {
output[i] = input[i];
} else {
alert("error")
}
})

Javascript: function and its argument

I've a problem with my function and its arguments... this is the code:
function elab(){
var up = arguments[0];
var id = arguments[1];
len = arguments.length - 3;
for(var a = 1; a <= 10; a++){
arg = (arguments[2] + a); // id tag html : [nome][num]
document.getElementById(arg).style.display = "block";
}
for (var i = 3; i < len; i++) {
alert('test1');
document.getElementById(arguments[i]).style.display = "none";
alert('test2');
}
change_price(up, id);
}
The script hangs at the second cycle: it prints 'test1' but not 'test2'.
Where is the error?
thx all ;)

Note that this advice should be used for all things unsure:
for (var i = 3; i < len; i++) {
var node = document.getElementById(arguments[i]);
if (node) {
node.style.display = "none"; // block
}
}
In other words, always test if an element can be found if you're not 100% sure. To be even more pedantic:
for (var i = 3; i < len; i++) {
var node = document.getElementById(arguments[i]);
if (!node) {
throw "Element " + arguments[i] + " not found.";
}
node.style.display = "none"; // block
}

remove null value in javascript

am having script with working condition but many for loop is there so any way to do this...to simplify this ...am new to script kindly help on this....
function change()
{
//document.getElementById("Geography").options[7]=new Option("", "newval", true, false);
var geo = document.getElementById("Geography").options;
var zon = document.getElementById("zone").options;
var coun = document.getElementById("country").options;
for (var i = 0; i < geo.length; i++)
{
if (geo[i].innerHTML == "Null Value" || geo[i].innerHTML == "")
{
document.getElementById("Geography").options[i] = null;
}
}
for (var i = 0; i < coun.length; i++)
{
alert("Loop1" + i);
if (coun[i].innerHTML == "Null Value")
{
document.getElementById("country").options[i] = null;
}
}
for (var i = 0; i < zon.length; i++)
{
//alert("Loop1" + i);
if (zon[i].innerHTML == "Null Value")
{
document.getElementById("zone").options[i] = null;
}
}
}

To remove an option, call removeChild() on the parent element.
var geoSel = document.getElementById("Geography");
var geo = geoSel.options;
for (var i = geoSel.options.length-1; i >= 0; i--) {
if (geo[i].innerHTML == "Null Value" || geo[i].innerHTML == "") {
geo.removeChild(geo[i]);
}
}
I count down instead of up because removing a child will cause the indexes of all the following children to be shifted down. In a count-up loop, that will cause elements to be skipped.

use this UPDATED DEMO
function change(){
var optionsArr = [];
optionsArr.push(document.getElementById("Geography").options);
optionsArr.push(document.getElementById("zone").options);
optionsArr.push(document.getElementById("country").options);
var optArrlenght = optionsArr.length;
for ( var j = 0; j < optArrlenght; j++){
var options = optionsArr[j];
var optionslength = options.length;
for (var i = 0; i < optionslength; i++)
{
if (options[i].innerHTML == "Null Value" || options[i].innerHTML == "")
{
options[i].remove();
i--;
optionslength--;
}
}
}
}
change();