0

I am following this online free course on YouTube, this is the link if you want to visit it: "Youtube link", but at around 2:15:00, he shows how to call javascript variables in HTML tags and log them onto the console. My problem is that It doesn't show the variables value in the console log when I do the same as him. for example, if I write Show amount and I have a variable in a script with a name value and a value of 0, it will show a space in the console when I click the button but for the guy, it shows the actual value (which is 0).

my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript loggin</title>
  </head>
  <body>
    <button onclick="
      console.log(`Show Count: ${value}`)
    ">Show Count</button>
    <script>
      let value = 0;
    </script>
  </body>
</html>

Here is an image of the guys code: (If image isn't loaded, his concept is pretty much the same as mine.) For me when I click the button it shows the string placed within the console.log but fails to call and show the variable. the only way I can display the variable is by putting the console.log within the script otherwise it doesn't work anywhere else in the html file. what could be the reason? I would appreciate any help you could give regarding the matter. (I am still a beginner so it will be appreciate even more if it is explained in simple language)

Improve this question
7
  • 2
    Declare your variable with var instead of let. And one does not "call" variables; the word "call" is used for invoking functions.
    – Pointy
    Commented Jul 8 at 17:56
  • Thanks for the response but it still does not work, and the code shown in the video uses let not var. It will be helpful if you have enough time to look at the video at 2 hours and 15 minutes is around when he starts using the variables within the button element.
    – Rahand hemin
    Commented Jul 8 at 18:12
  • Change the variable name from value to count or something else it will work.
    – al sirang
    Commented Jul 8 at 18:15
  • @Rahandhemin if the code in the video uses let, then the video is not a good one. When you declare a variable with let, it does not become a global variable (a window property) and so the example code will not work.
    – Pointy
    Commented Jul 8 at 18:42
  • 1
    @Pointy let isn't the issue here since the variable is being declared in the global scope anyway. It's the name of the variable that is the issue.
    – Scott Marcus
    Commented Jul 8 at 19:11

2 Answers 2

Reset to default
0

You can´t use template literals (backtick) on HTML attributes. Any way, it´s not a best practice to put logic on HTML, just put a call to a function that will do the job:

let value = 0;

function btnClick() {
  // maybe you want to increment the value after each click
  value++;
  // print the result
  console.log(`Show Count: ${value}`);
}
<button onclick="btnClick()">Show Count</button>

Improve this answer
0

"value" is a pretty generic term that also has a meaning in HTML and JavaScript, so it's best to not name variables that conflict with such names. If you change the variable name to something else, it will work.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript loggin</title>
  </head>
  <body>
    <button onclick="
      console.log(`Show Count: ${count}`)
    ">Show Count</button>
    <script>
      let count = 0;
    </script>
  </body>
</html>

PS: While the use of let can cause issues, it's not a problem here since the variable is being declared in the global scope.

Improve this answer
2
  • thanks, the name value was in fact the problem. After changing it into count, it worked
    – Rahand hemin
    Commented Jul 8 at 19:15
  • @Rahandhemin You're welcome. Don't forget to up vote and mark as the answer.
    – Scott Marcus
    Commented Jul 9 at 12:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.