Estoy tratando de seguir un tutorial realmente básico sobre javascript, y sé que he tenido un código similar para este trabajo en el pasado, pero por alguna razón, la siguiente función no actualiza la sección en html llamada <span id="current-result"> , ver a continuación:
Dentro de app.js:
let currentResult = 1; currentResult = currentResult + 10; outputResult(currentResult,''); alert(currentResult); const currentResultOutput = document.getElementById('current-result'); const currentCalculationOutput = document.getElementById('current-calculation'); function outputResult(result, text) { currentResultOutput.textContent = result; currentCalculationOutput.textContent = text; }Dentro de index.html:
<body> <script src="assets/scripts/vendor.js"></script> <script src="assets/scripts/app.js"></script> <section id="results"> <h2 id="current-calculation">0</h2> <h2>Result: <span id="current-result">0</span></h2> </section> </body>También noté que después de hacer cambios, guardar todos los archivos .js y .html y actualizar en el navegador que solo abre el archivo .html en local, no todo se actualiza. Por ejemplo, si cambié el 0 por un 10 directamente en el html. Estoy haciendo esto en Visual Studio y usando Firefox como navegador para abrir el archivo html, aunque también verifiqué Chrome.
Está intentando acceder al elemento incluso antes de que javascript inicialice las constantes. Mire el concepto de elevación en javascript. Además, la etiqueta del script debe estar al final o puede usar el controlador de eventos window.onload para inicializar su código javascript.
let currentResult = 1; currentResult = currentResult + 10; const currentResultOutput = document.getElementById('current-result'); const currentCalculationOutput = document.getElementById('current-calculation'); function outputResult(result, text) { currentResultOutput.textContent = result; currentCalculationOutput.textContent = text; } outputResult(currentResult, ''); alert(currentResult); <section id="results"> <h2 id="current-calculation">0</h2> <h2>Result: <span id="current-result">0</span></h2> </section> <script src="assets/scripts/vendor.js"></script> <script src="assets/scripts/app.js"></script>Mueva las etiquetas de su secuencia de script debajo de los elementos que necesita seleccionar, ya que en el momento en que se ejecuta la secuencia de comandos, esos elementos no existen en el DOM:
También debe llamar a outputResult después de que se hayan declarado currentResultOutput y currentCalculationOutput .
<body> <section id="results"> <h2 id="current-calculation">0</h2> <h2>Result: <span id="current-result">0</span></h2> </section> <script src="assets/scripts/vendor.js"></script> <script src="assets/scripts/app.js"></script> </body> Alternativamente, puede escuchar el evento DOMContentLoaded y ejecutar el código en el oyente para asegurarse de que su código se ejecute solo cuando se hayan cargado todos los elementos:
document.addEventListener('DOMContentLoaded', function() { let currentResult = 1; currentResult = currentResult + 10; const currentResultOutput = document.getElementById('current-result'); const currentCalculationOutput = document.getElementById('current-calculation'); function outputResult(result, text) { currentResultOutput.textContent = result; currentCalculationOutput.textContent = text; } outputResult(currentResult, ''); alert(currentResult); })Si me dice que la página web no se actualiza en el navegador, no es una pregunta de programación, sino un problema del entorno de desarrollo.
De todos modos, estoy bastante seguro de que debe agregar la etiqueta de secuencia de comandos después de los elementos en cuestión para que existan en el momento en que se ejecuta el código JavaScript y hace referencia a ellos.
<body> <section id="results"> <h2 id="current-calculation">0</h2> <h2>Result: <span id="current-result">0</span></h2> </section> <script src="assets/scripts/vendor.js"></script> <script src="assets/scripts/app.js"></script> </body>