What are some problem solving tips when trying to attach an onclick() function to a button?

Question

I want my button to trigger a download of a PDF file when clicked. However, I am having trouble getting the button to fire the function when clicked. For now, I am just wanting the button to console.log "it works"

I have selected the correct element, and defined the type as "button", and am able to console.log the button. But when attaching the button.onclick()= function{ console.log("it works");}; it does not trigger the console.log in the console. I have also put the onclick function into a window.onload function.

 <div id="resume" class="resume">
    <button type="button" id="resume-button" class="resume-button">RESUME</button>
</div>

--JavaScript--

var button = document.querySelectorAll('.resume-button');

window.onload = function(){

button.onclick = function(){
    console.log("yay its working");
}; }

I am expecting the console to output "it works" when the button is clicked, but nothing happens when clicked.

https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Jul 03 '19 at 19:54
putting event binding inside the onload, but referencing the button outside of that method make no sense. — epascarello, Jul 03 '19 at 19:54

antonku · Answer 1 · 2019-07-03T19:57:13.090

2

document.querySelectorAll returns an NodeList so that you need to access the button as the first element of this NodeList (document.querySelectorAll('.resume-button')[0])

var button = document.querySelectorAll('.resume-button')[0];

button.onclick = function(){
  console.log("yay its working");
};

<div id="resume" class="resume">
    <button type="button" id="resume-button" class="resume-button">RESUME</button>
</div>

Also note there is no need to wrap the onclick function assignment into window.onload

edited Jul 03 '19 at 19:57

answered Jul 03 '19 at 19:54

antonku

7,377
2
15
21

@epascarello Good point, thanks, I have removed the redundant wrapper – antonku Jul 03 '19 at 19:57

What are some problem solving tips when trying to attach an onclick() function to a button?

1 Answers1