0

It's my first time learning JavaScript and I've already stumbled upon a thing that I can't understand. I'm following freeCodeCamp's tutorial JavaScript Programming - Full Course and at min 10:00 I got stuck. My code won't seem to display the number that I put in let count, actually It won't link to my index.js

// document.getElementById("count-el").innerText = 5

let count = 27;
console.log(count)
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>People Entered:</h1>
    <h2 id="count-el">0</h2>
    <script src="index.js"></script>
</body>
</html>
Fabian
  • 1
  • 2
  • 2
    Is there any error in the console? – Barmar Jul 29 '21 at 17:37
  • Is `index.js` in the same folder as `index.html`? – Barmar Jul 29 '21 at 17:37
  • Put a semicolon `;` after `let count = 0` – Timothy Alexis Vass Jul 29 '21 at 17:38
  • You need to link the javascript file between the tags. – seddouguim Jul 29 '21 at 17:38
  • 1
    **`console.log` wont place that number into `id="count-el"`** – Lawrence Cherone Jul 29 '21 at 17:39
  • Yes, index.js is in the same folder. – Fabian Jul 29 '21 at 17:39
  • 3
    Code seems to be fine. Please press `F12` on your keyboard and switch to console tab in your favorite browser. You should be able to see your `0` output there. – Salvino D'sa Jul 29 '21 at 17:39
  • 5
    @seddouguim actually is better to load the JS a the end – Eloi Jul 29 '21 at 17:39
  • @seddouguim No you do not need to link it in the head tag. See [here](https://stackoverflow.com/questions/6643017/loading-a-script-in-the-body-section) – Braks Jul 29 '21 at 17:40
  • 2
    I always thought you could only link it in the head. Thanks for the info. Makes sense to link it at the end to allow the DOM elements to load. – seddouguim Jul 29 '21 at 17:41
  • it displays any number in console but not on screen. – Fabian Jul 29 '21 at 17:42
  • 1
    @Fabian That's because you didn't set the number to the screen. – lejlun Jul 29 '21 at 17:43
  • 2
    @Fabian What exactly are you expecting your code to do? It's only going to log a zero in your console, as previous commenters mentioned. There's nothing else to be done in your script :) – Braks Jul 29 '21 at 17:43
  • Welcome to Stackoverflow. Please read how to [ask a good question](https://stackoverflow.com/help/how-to-ask) and in the future, provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) preferably in a [Stack snippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) – Timothy Alexis Vass Jul 29 '21 at 17:44
  • The code is doing exactly what you told it to, if you want to change the page's HTML based on the value of the variable, take a look at [this post](https://stackoverflow.com/questions/30035932/how-do-i-use-this-javascript-variable-in-html). @Fabian – lejlun Jul 29 '21 at 17:45
  • thanks everyone for guidance. it means a lot! – Fabian Jul 29 '21 at 17:47

2 Answers2

0

Here is an example of what you could to do to get it updated both in the console and in the element with id="count-el";

let count = 0;

function updateCounter(number) {
  document.getElementById("count-el").innerHTML = number;
}

setInterval(function() {
  updateCounter(count);
  console.log(count);
  count += 1;
}, 1000);
.as-console-wrapper {
  max-height: 75px !important;
}
<h1>People Entered:</h1>
<h2 id="count-el">0</h2>
Timothy Alexis Vass
  • 2,526
  • 2
  • 11
  • 30
-2

in your JS add this line

document.getElementById("count-el").innerText(count)

user3539927
  • 45
  • 3