CODEWITHSUNDEEP
javascript
user9778557
user9778557

Reputation: 35

It does not show me any output on console screen. What may be the problem

When I click The button it does not show me any output on the console window

<!DOCTYPE html>
<html>
  <head>

    <title></title>
  </head>
  <body>
    <button type="button" id="Click me">Click me</button>
    <script type="text/javascript" src="script.js">
  </body>
</html>

->js

var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
  console.log('I was Clicked');
}

Upvotes: 0

Views: 142

Answers (3)

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

It should be click not Click!

JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
  console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <button type="button" id="Click me">Click me</button>
  </body>
</html>

Upvotes: 1

Nick Parsons
Nick Parsons

Reputation: 50844

You have a few issues with your code. Firstly you need to close your <script> tag in your HTML:

<script type="text/javascript" src="script.js"></script>

Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:

<button type="button" id="btn-click">Click me</button>

And then make sure to target it properly in your Javascript:

var printNumber=document.getElementById('btn-click');

Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"

Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:

printNumber.addEventListener("click", showNo); // add click event listener to button

See working example below:

var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
  console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
  <title>Awesome button</title>
</head>
<body>
  <button type="button" id="btn-click">Click me</button> <!-- change id --> 
  <script type="text/javascript" src="script.js"></script>  <!-- close script -->
</body>
</html>

Upvotes: 3

Code Maniac
Code Maniac

Reputation: 37745

You had one typo Click which is supposed to be click.

`printNumber=document.addEventListener('Click',showNo);` 
             ^^^^^^^^

you should add event listener to that particular element not to the complete document.

var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
  console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
  <head>

    <title></title>
  </head>
  <body>
    <button type="button" id="Click_me">Click me</button>
  </body>
</html>

Upvotes: 0

Related Questions