Javascript onClick事件无法登录控制台

Question

I know I'm overlooking something but I'm stuck on knowing what I'm doing wrong. Can't seem to get the console to print out ( I'm eventually working on adding a box to the screen). I'm using Chrome btw:

HTML

<button id="1" class="hot"></button>

JS

function addBox() {
  console.log("hello");
}

var clickBox = document.getElementById("1");
clickBox.onClick = addBox;

Answer 1

DOM properties are case sensitive (unlike HTML attributes) and the correct name of the property is onclick :

clickBox.onclick = addBox;

Learn more about the different ways of binding event handlers.

---

 function addBox() { console.log("hello"); } var clickBox = document.getElementById("1"); clickBox.onclick = addBox; 

 .hot { width: 100px; height: 100px; border: 3px solid black; background-color: pink; } 

 <button id="1" class="hot"></button> 

Answer 2

Try

clickBox.onclick = addBox;

or

clickBox.addEventListener('click', addBox);

Answer 3

I do not know of any native onClick method for DOM elements in JavaScript.

You could do an event attribute in your HTML <button onclick="addBox()"> .

Or you could do clickBox.addEventListener('click', addBox); .

Answer 4

First, your ID should begin with a letter (if you plan to have HTML4 compatibility). Second, if you want to define an event using JS (without a library such as jQuery), you should use addEventListener . Or you can simply go the route of adding onclick directly to the element ( onclick="addBox()" ). Finally your onclick should all be lowercase (as JS property keys are case sensitive).

Answer 5

this this code javascript :

var clickBox = document.getElementById("1");
clickBox.onclick=addBox;
function addBox() {
  console.log("hello");
}

Answer 6

Try giving all the javascript within window.onload tags Like the following:

window.onload = function(){
//Your Code Here
}