Why the following is not working? Apparently the function isn't being added!

function activatetypeinput(event, devtype){
  //The function is called but it doesn't set the attribute
  var dev_input = document.getElementById("device_input");
  dev_input.setAttribute("onclick","add_device_input(event, this);");
}

In my HTML I have something like this (among other things):

<select class="text-input" id="device_input">
   <option>--</option>
</select>

Why the following is not working? Apparently the function isn't being added!

function activatetypeinput(event, devtype){
  //The function is called but it doesn't set the attribute
  var dev_input = document.getElementById("device_input");
  dev_input.setAttribute("onclick","add_device_input(event, this);");
}

In my HTML I have something like this (among other things):

<select class="text-input" id="device_input">
   <option>--</option>
</select>

• javascript
• jquery

3 Answers 3

Problem

"Why the following is not working? Apparently the function isn't being added!"

dev_input.setAttribute("onclick","add_device_input(event, this);");

Explanation

• Look in Devtools F12 and you'll see that the onclick attribute is added and the value as well. Although it is there and syntactically correct, it doesn't function. See section Demo - Source: #btn3

• If the same attribute and value is added via JavaScript as a property it works, as a property. An attribute will not show up in markup, whilst a property does. For all intents and purposes, the onclick property and onclick attribute is one and the same