/ / Changer le code HTML en utilisant javascript de manière dynamique lors du premier chargement de la page - javascript, jquery, html

Modification du code HTML à l'aide de javascript de manière dynamique lors du premier chargement de la page - javascript, jquery, html

Je fais une page dynamique qui contient plusieursdivs qui changent lorsque l'utilisateur choisit de passer au passage suivant sur ma page. Cependant, je ne parviens pas à charger mon site Web pour le premier ensemble d'informations. Le code HTML contient ces divs vierges, puis ma fonction est chargée dans un fichier JSON et modifie les divs par leur ID "s. Lors du premier chargement de ma page, ces divs apparaissent sans texte. Peut-être que mon javascript n'est pas en cours page est d'abord chargé? Voici un exemple de mon code HTML:

<div id="passage-section">
<!-- Title -->
<div id="passage-title"></div>
<!-- The panel that will display the content -->
<div id="passage"></div>
<!-- Button that when clicked activates a dialog box for the passage. -->
<button id="max-passage" class="max"></button>
</div>

Et voici ma fonction:

//This section of code handles the calling of the first passage.
//Loading in the JSON file and changing the contents of the page.
function loadFirstPassage()
{
var timeout = 250;
//load the new JSON file and change the elements
$.getJSON("passages/2.1.1.json", function( data ) {
document.getElementById("passage-title").innerHTML = data["passageNumber"];
document.getElementById("passage").innerHTML = "<p class="serif">".concat(data["reading"]).concat("</p>");

//fading the elements back in
$("#passage-title").fadeIn(timeout);
$("#passage").fadeIn(timeout);
});
}

J'ai essayé d'appeler cette fonction dans le corps et cela n'a pas fonctionné, elle est donc appelée dans la tête.

<head>
<!--The orginal load of the page   maybe it works, who knows? -->
<script>
$(window).load(function()
{
loadFirstPassage();
});
</script>

Réponses:

0 pour la réponse № 1

vous pouvez essayer de le charger juste après la fin du DOM

(function() {
console.log("DOM Loaded")
})();

jQuery utiliserait

$( document ).ready(function() {
console.log("DOM Loaded");
});

0 pour la réponse № 2

Essayer

$(document).ready(function() {
loadFirstPassage();
});

au lieu de $(document).load.