Hola, estoy tratando de cargar contenido y volcar json en la página: index.html

<html>
  <head>
  <title>Learning</title>
  <style type="text/css">
  body { background-color: #ddd; }
  #container { height: 100%; width: 100%; display: table; }
  #inner { vertical-align: middle; display: table-cell; }
  #gauge_div { width: 120px; margin: 0 auto; }
</style>
  </head>
  <body id="body">
    <script src="main.js"></script>
    <div id="animal-info"></div>
  </body>
</html>

main.js

var animalContainer = document.getElementById("animal-info");

var ourRequeast = new XMLHttpRequest();
var loaded = document.getElementById("body");

body.addEventListener("onload", function(){


ourRequeast.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
ourRequeast.onload = function() {
// console.log(ourRequeast.responseText);
// var ourData = ourRequeast.responseText;
var ourData = JSON.parse(ourRequeast.responseText);
// console.log(ourData[0])

renderHTML(ourData);
}
ourRequeast.send();
});

function renderHTML(data){
    animalContainer.insertAdjacentHTML('beforeend', 'testing 123');
}

Así que espero que imprima "prueba 123" en la carga de la página pero no da error ni muestra nada

1
Ciasto piekarz 13 ene. 2017 a las 21:19

3 respuestas

La mejor respuesta

Deberá utilizar la declaración de documento listo

$(document).ready(function(){
    console.log('this is run on page load');
    myFunction();
});
2
llllllllll 20 feb. 2018 a las 11:32

La mejor solución es envolver todo el código de la siguiente manera;

document.addEventListener("DOMContentLoaded", function(event) { 
  //do stuff here
});

Esto ejecutará todo el código cuando el DOM haya terminado de cargarse. Esto es compatible con casi todos los navegadores, pero los que ya no se usan realmente, como IE8.

También puede hacer esto solo para llamar a la función, pero algunas variables que obtienen elementos DOM podrían no tomar los nodos correctamente si aún no se han cargado.

JS completo, por ejemplo, también probado en JSFiddle. Funciona bien.

document.addEventListener("DOMContentLoaded", function(event) { 
  var animalContainer = document.getElementById("animal-info");

  var ourRequeast = new XMLHttpRequest();
  var loaded = document.getElementById("body");

  ourRequeast.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
    ourRequeast.onload = function() {
    // console.log(ourRequeast.responseText);
    // var ourData = ourRequeast.responseText;
    var ourData = JSON.parse(ourRequeast.responseText);
    //console.log(ourData[0])

    renderHTML(ourData);
  }
  ourRequeast.send();

  function renderHTML(data){
      animalContainer.insertAdjacentHTML('beforeend', 'testing 123');
  }
});
0
JokerDan 13 ene. 2017 a las 18:31

Se espera que los tipos de eventos pasados a addEventListener no tengan el prefijo on. En lugar de addEventListener("onload", function () { usa addEventListener("load", function () {.

Además, está adjuntando el detector de eventos a la variable body, pero esta variable no está definida en el código. Todavía puede funcionar si hay un elemento con id="body" en el documento (comportamiento del navegador compatible con versiones anteriores), pero no confiaría en esta función.

0
Rafael 13 ene. 2017 a las 18:31