BlueBaroo BlueBaroo - 1 year ago 109
Javascript Question

Inject HTML into div via Javascript

I am trying to get onclick/onfocus/onchange in an HTML tag that is being created by Jira. The item itself is a drop down list and while I can get onfocus to work on other IDs, I cant get it to work on the drop down list

What I have:

<script type ="text/javascript" >
var colorDropDown = document.getElementById('someID');

function changeColor()
alert("Hello World");

document.getElementById("someID").innerHTML ="<onfocus=\"changeColor()\"></select>"
//document.getElementById("customfield_11901").innerHTML = "<select class=\"select cf-select\" name=\"customfield_11901\" id=\"customfield_11901\" onfocus=\"changeColor()\">"


After using innerHTML, the onfocus does not appear in the page. I have also tried this by copying the entire tag and inputting it via HTML.

I have used the .onchange function after getElementById, but that does not work either.

Answer Source

I would use the .attr() function under jQuery:

$('#select_id').attr('onfocus', 'changeColor();');

Or you can use the addEventListener with plain JS:

object = document.getElementById('#select_id');
object.addEventListener('focus', 'changeColor();');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download