Better way of writing this onClick event

Question

I'm setting two text box values using an onclick event. I have used javascript: twice, I think this can be written in a shorter way. How do I write the onclick in a short or better way?

<button type="button" onclick="javascript:document.getElementById('category').value='Furniture'; javascript:document.getElementById('tick').value='';">Furniture Option</button>

OR

<button type="button" onclick="shortened();">Furniture Option</button>

function shortened(){
    javascript:document.getElementById('category').value='Furniture'; 
    javascript:document.getElementById('tick').value='';
}

Give `ID` to the button and attach the listener using JavaScript. Don't add JavaScript code in HTML :) — Vigneswaran Marimuthu, May 04 '15 at 05:24
@VigneswaranMarimuthu: thanks. Can you show how to do a listener in js? — Becky, May 04 '15 at 05:25
@Beki Take a look https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener — Rakesh_Kumar, May 04 '15 at 05:27
@Beki You can also use the script tags and add the code in your html if this is the only thing thats done. — Harigovind R, May 04 '15 at 05:28
@Beki Added the answer :) Update the business logic part. And read about [addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) — Vigneswaran Marimuthu, May 04 '15 at 05:30
I see everyone's answer is giving an id and adding eventListener from js, but can any of you explain why and how is is better then adding onClick attribute from html? — Alexandru Severin, May 04 '15 at 05:32
@AlexandruSeverin I can say one main advantage, it avoids pollution of global scope. Attaching click listener in HTML should have the function in global scope. — Vigneswaran Marimuthu, May 04 '15 at 05:37
@AlexandruSeverin Its just considered as a better coding practice. Both of them gets the job done. Check out this stackoverflow question for more details [event listener vs html onclick](http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) — Harigovind R, May 04 '15 at 05:38

score 1 · Answer 1 · answered May 04 '15 at 05:28

Separating Javascript from HTML:

<button type="button" id="furniture-button">Furniture Option</button>

<script>
    function shortened() {
        document.getElementById('category').value='Furniture'; 
        document.getElementById('tick').value='';
    }
    var furniture_button = document.getElementById("furniture-button");
    furniture_button.addEventListener("click", shortened);
    // or, the deprecated way:
    // furniture_button.onClick = shortened;
</script>

score 0 · Accepted Answer · answered May 04 '15 at 05:29

0

Give ID to the button and attach the listener using JavaScript. Don't add JavaScript code in HTML :)

var button = document.getElementById('button');

button.addEventListener('click', function () {
  // Business Logic
  alert('Clicked');
}, false);

<button id="button">Button</button>

answered May 04 '15 at 05:29

Vigneswaran Marimuthu

2,452
13
16

@Beki It means the button (the function) will process click events before passing it to parent nodes (if they are also listening). The default is `false` if you don't specify it. – Chen May 04 '15 at 05:38
That indicates the event phase. Capture phase or Bubbling phase. http://javascript.info/tutorial/bubbling-and-capturing – Vigneswaran Marimuthu May 04 '15 at 05:38

Better way of writing this onClick event

2 Answers2