EDITAR: CÓDIGO ACTUAL
$(function() { flagDictionary = { 1 : "assets/WCUFOD.png", 2 : "assets/lesbians.svg", 3 : "assets/upennLogo.png", 4 : "assets/bisexual.png", 5 : "assets/intersex.jpg", 6 : "assets/asexual.png", } const time = new Date(); const day = time.getDay() // note that you can use "#MY_ID_HERE" to get an element with a specific id. let mainBanner = $("#banner") mainBanner.setAttribute("src", flagDictionary[1]); });Estoy tratando de cambiar una imagen según el día de la semana que es. He hecho esto en un archivo diferente, y funcionó bien. Sin embargo, cuando lo transfiero a un archivo nuevo, el código se rompe por completo y genera un error que dice "ERROR: setAttribute no puede leer las propiedades de nulo". Código relevante de HTML:
<img src="assets/wcuFOD.png" class="banner" id="banner"></img>Código relevante del archivo script.js que estoy usando:
flagDictionary = { 1 : "assets/WCUFOD.png", 2 : "assets/lesbians.svg", 3 : "assets/Gay.svg", 4 : "assets/bisexual.png", 5 : "assets/intersex.jpg", 6 : "assets/asexual.png", } const time = new Date() day = time.getDay() mainBanner = document.getElementById("banner") mainBanner.setAttribute("src", flagDictionary[1])Y aquí están mis importaciones para los scripts, en caso de que eso marque la diferencia:
<script src="script.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>Tengo otro código en mi archivo script.js que funciona bien en el archivo con el código HTML que estoy usando, por lo que creo que es estrictamente un problema con la función de atributo o con la identificación.
¿Puedes intentar cambiar los scripts de esta manera:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> Y luego envuelva todo en script.js con $(function(){ /* everything here */ });
Este espera a que el documento esté listo y así se devuelvan los elementos.
Como esto:
$(function() { const flags = getFlags(); const time = new Date(); const day = time.getDay() // note that you can use "#MY_ID_HERE" to get an element with a specific id. // we need [0] after we get the banner using jQuery. This way we get access to the plain DOM element that has `setAttribute` let mainBanner = $("#banner")[0]; mainBanner.setAttribute("src", flagDictionary[1]); // alternatively to using [0], we can use the jQuery method to setting attributes which is .attr("src", "value") like this: $("#banner").attr("src", "flagDictionary[1]); });Sospecho que el código que devuelve nulo lo devuelve porque se está ejecutando antes de que el DOM esté listo. Haciendo $(function() { /* código para ejecutar cuando DOM esté listo */ }); espera a que se cargue el DOM.