Inject HTML into div via Javascript

Question

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.

<onfocus=\"changeColor()\"></select> isn't valid HTML. Do you mean <select onfocus=\"changeColor()\"></select>? — Spencer Wieczorek
– Spencer Wieczorek, Commented Aug 3, 2016 at 18:26
you don't need to inject html to add an event listener, is there a reason you're on that path? — aw04
– aw04, Commented Aug 3, 2016 at 18:27
@SpencerWieczorek yes, that is what I meant, I will give that try. — BlueBaroo
– BlueBaroo, Commented Aug 3, 2016 at 18:59
@aw04 I am just trying things I am seeing as a solution. I will try other things as I find them or as they are suggested — BlueBaroo
– BlueBaroo, Commented Aug 3, 2016 at 18:59

ccopland · Accepted Answer · 2016-08-03 18:49:30Z

3

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

answered Aug 3, 2016 at 18:49

ccopland

894 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BlueBaroo Over a year ago

I gave this a try and I didnt work at first, but I googled the addEventListener function and made my string look like this: testObject=addEventListener('change', function(){colorChange();},false) This ended up working out for me. Thank you very much!

Collectives™ on Stack Overflow

Inject HTML into div via Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related