check the existence of several files in javascript

Question

check the existence of several files in javascript

Navigation

#1 by (2 votes)

2

The following SCRIPT checks the existence of files whose names are in an Array, if there is no file it shows a warning The output is made through a table.

var table = document.getElementById('dataTable');
var pagina = ['pepito.html', 'IndexModeloWeb3.html', 'ProgressBar2.html', 'ProgressBar.html']
for (var t = 0; t < pagina.length; t++) {

  var mensaje = pagina[t];

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createTextNode(mensaje);
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.id = t + 1;
  var element2 = document.createTextNode("")
  cell2.appendChild(element2);
}

function get_error() {
  document.getElementById(j).innerHTML = " does not exist.";
}


for (var j = 0; j < pagina.length; j++) {
  alert = (" ");

  var el = document.createElement('script');
  el.onerror = function() {
    if (el.onerror) {
      get_error(this.id);
    }
  }

  el.src = pagina[j];
  document.getElementsByTagName("span")[0].appendChild(el);

}

table {
  border: 1px solid #c3c3c3;
}

table td {
  border: 1px solid #c3c3c3;
}

<table id="dataTable">
  <tbody>
    <tr>
      <td>Index.html</td>
      <td>does not exists</td>
    </tr>
    <tr>
      <td>progressBar.html</td>
      <td></td>
    </tr>
    <tr>
      <td>progressBar2.html</td>
      <td></td>
    </tr>
  </tbody>
</table>

The problem is that I do NOT need the alert; however, if I remove it from the code, it does not generate the result as it should be;

What can I do to fix this?

javascript eventos arreglos

asked by Profesor Informatica 28.07.2017 в 21:19

source

1 answer

Change Textbox BackGround from Javascript Access a variable declared in a class in PHP

score 2 · Accepted Answer

The problem is because:

In the function get_error , the variable j is being consumed, to identify the element to update.
By removing the alert and as the event onerror is triggered at some point in the future ( evento asincrónico ), by the time the event occurs the value of the varibale j is different from what was expected.

Solution:

When the onerror event is executed, the value of this is the created element ( eg: script ). With this in mind, you could simply create a property for the script element, for example targetId , where you store the value of j + 1 ( the id of the element to update ). Then in onerror , it would be enough to call get_error(this.targetId); .

Example:

var table = document.getElementById('dataTable');
var pagina = ['pepito.html', 'IndexModeloWeb3.html', 'ProgressBar2.html', 'ProgressBar.html']
for (var t = 0; t < pagina.length; t++) {

  var mensaje = pagina[t];

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createTextNode(mensaje);
  cell1.appendChild(element1);

  var cell2 = row.insertCell(1);
  cell2.id = t + 1;
  var element2 = document.createTextNode("")
  cell2.appendChild(element2);
}

function get_error(id) {
  document.getElementById(id).innerHTML = " does not exist.";
}


for (var j = 0; j < pagina.length; j++) {

  var el = document.createElement('script');
  el.onerror = function() {
    get_error(this.targetId);
  }
  el.targetId = j + 1;
  el.src = pagina[j];
  document.body.append(el);
}

<table id="dataTable"></table>