Question

<input type=”text” value=”click” onclick=”textClicked()”>

<script>
function textClicked() {
    document.write(‘Text clicked’); }
</script>

OR

<input id=’txt’ type=”text” value=”click”>

<script>
document.getElementById(‘txt’).onclick = function() { document.write('Text clicked'); } 
</script>

Which of the above is better design practice? In my opinion it is the first one because of the re-usability it provides for function textClicked().

Thank you.

Answer 1

Which of the above is better design practice?

The second option is better:

• You aren’t mixing HTML with JavaScript
• You can include the code from a separate script file

In my opinion it is the first one because of the re-usability it provides for function textClicked().

As André Caron mentioned in comments, there is nothing preventing you from assigning a value to onclick by name:

<input id='txt' type="text" value="click">

<script>
document.getElementById('txt').onclick = textClicked;

function textClicked() {
  document.write('Text clicked');
}
</script>