I'm trying to follow a really basic tutorial on javascript, and I know I've had similar code to this work in the past but for some reason the following function fails to update the section in html called <span id="current-result">, see below:
Within 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;
}
Within 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>
I also notice that after making changes, saving all the various .js and .html files and refreshing on the browser which is just opening the .html file on local, not everything updates. For example, if I changed the 0 to a 10 directly in the html. I'm doing this in visual studio and using firefox as the browser to open the html file although I checked on chrome as well.
You are trying to access the element even before the javascript initializes the constants. Look into the concept of hoisting in javascript. Also, the script tag should be at the end or you can use window.onload event handler to initalize your javascript code.
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>Move your script tags below the elements you need to select, since at the time the script is executed those elements do not exist in the DOM:
You also should be calling outputResult after currentResultOutput and currentCalculationOutput have been declared.
<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>
Alternatively, you can listen for the DOMContentLoaded event and execute the code in the listener to ensure that your code is executed only when all elements have been loaded:
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);
})
If you're telling me that the webpage is not updating in the browser, this is not a programming question, but an development environment problem.
Anyway, I'm pretty sure you have to add the script tag after the elements in question so that they exist by the time the JavaScript code executes and references them.
<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>