div into a js button [duplicate]

Question

I have a <div> that I have formatted very carefully to look nice, and I need to make it have the functionality of a button. How would I go about doing this?

Answer 1

You can give that div tag a onclick function as follows.

function myfns() {
    console.log("Clicked")
}

<div id="btn" onclick="myfns()">Click</div>

Answer 2

First recommendation is to use a <button> instead. You can style that however you want as well. If that is not an option for some reason, you'll have to do a few different things to create a proper button out of a div element (to ensure that it works with keyboard and screen readers).

• Add click handler. Eg btn.addEventListener('click', clickHandler);
• Add enter key handler. Eg btn.addEventListener('keyup', keyHandler);
• Add button role. role="button"
• Add it to tab order: tabindex="0"

var buttons = document.querySelectorAll('.btn');

buttons.forEach(function (btn) {
  btn.addEventListener('click', function(e) {
    console.log('clicked');
  });
  
  btn.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
      console.log('keyup');
    }
  });
});

.btn {
  display: inline-block;
  background: #eee;
  border: 1px solid #aaa;
  padding: 6px;
  cursor: pointer;
}

<div class="btn" role="button" tabindex="0">My Button</div>

<div class="btn" role="button" tabindex="0">My Button</div>

<div class="btn" role="button" tabindex="0">My Button</div>