Javascript onClick event not working to log on the console - Stack Overflow

admin管理员组

文章数量:1295947

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;

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;

• javascript

Share Follow edited May 27, 2016 at 2:56 ThisClark 14.8k1010 gold badges7272 silver badges103103 bronze badges asked May 27, 2016 at 2:42 ravip0711ravip0711 51166 silver badges2020 bronze badges 2

• If you're on Chrome, please use clickBox.addEventListener("click",addBox);. It's the current standard and should be used when supported (which IE, Chrome, Firefox, Safari, and Opera have already for several years now). – Patrick Roberts Commented May 27, 2016 at 3:39
• @PatrickRoberts, Thanks for the ment, I was following the Javascript & Jquery Book by Jon Duckett and in it was showing the older ways to write it hence my old syntax (just incase I e across old code), but then it shows the new standard way, which you described in your ment. Thanks! – ravip0711 Commented May 27, 2016 at 3:45

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

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>

Try

clickBox.onclick = addBox;

or

clickBox.addEventListener('click', addBox);

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);.

this this code javascript :

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

First, your ID should begin with a letter (if you plan to have HTML4 patibility). 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).

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

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

本文标签： Javascript onClick event not working to log on the consoleStack Overflow