BlueBaroo
BlueBaroo

Reputation: 131

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" >
console.log("Testing");
var colorDropDown = document.getElementById('someID');

function changeColor()
{
    //if(value)
    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()\">"

</script>

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.

Upvotes: 0

Views: 239

Answers (1)

ccopland
ccopland

Reputation: 89

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();');

Upvotes: 3

Related Questions