Question

当我单击按钮时，控制台窗口上不会显示任何输出

<!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');
}

Answer 1

您的代码有一些问题。首先，您需要关闭HTML中的<script>标签：

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

第二，您的id中不应包含空格。您可以将其更改为btn-click：

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

然后确保在Javascript中将其正确定位：

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

第三，您的事件名称应为小写（因为Javascript区分大小写），因此请将"Click"更改为"click"

最后，您想将click事件侦听器添加到按钮中，该事件侦听器存储在变量printNumber中。目前，您正在将事件监听器添加到document中，而不是按钮中。要将其添加到您的按钮中，您可以使用：

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

请参见下面的工作示例：

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>

Answer 2

应该是click而不是Click！

JavaScript是一种case-sensitive语言。这意味着必须始终使用一致的大写字母键入语言关键字，变量，函数名称和任何其他标识符。

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>

Answer 3

您有一个错字Click，应该是click。

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

您应该将事件侦听器添加到该特定元素，而不是添加到整个文档中。

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>

它在控制台屏幕上没有显示任何输出。可能是什么问题

3 个答案: