Databases
StackOverflow2013
Postsdbo
POcreating an evenlistener for a list which was added using a node appendChild
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcreating an evenlistener for a list which was added using a node appendChild
    text
    copied!<p>I'm trying to add a select list dynamically to my html. I've done this successfully by adding a node to the dom. My problem is on a separate javascript file I want to create an eventlistner which recognises the the newly created select list. </p> <p>The HTML code works fine but the javascript eventlistner is not recognising changes being made to the list.</p> <p>This is for a chrome extension popup screen</p> <p>HTML</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; Pop Up &lt;/TITLE&gt; &lt;script src="library.js"&gt;&lt;/script&gt; &lt;SCRIPT&gt; function change(){ var theDiv = document.getElementById("dropDownList"); var select = document.createElement('select'); select.name = 'scrapbookID'; select.id = 'scrapbookID'; select.innerHTML = "&lt;option value='15'&gt;one&lt;/option&gt;"+ "&lt;option value='18'&gt;two&lt;/option&gt;"+ "&lt;option value='20'&gt;three&lt;/option&gt;"+ "&lt;option value='21'&gt;four&lt;/option&gt;"; theDiv.appendChild(select); } &lt;/SCRIPT&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;DIV id="signout"&gt; Your are Currently signed in.&lt;BR&gt; &lt;A id="signOutPHP" href="file:///C:/Users/Kevin/AppData/Local/Temp/non19B.htm#"&gt;Sign Out&lt;/A&gt; &lt;DIV id="dropDownList"&gt; &lt;BUTTON onclick="change()"&gt;Add List&lt;/BUTTON&gt; &lt;/DIV&gt; &lt;/DIV&gt; &lt;/BODY&gt; &lt;/HTML&gt; </code></pre> <p>JAVASCRIPT</p> <pre><code>document.addEventListener('DOMContentLoaded', function (){ document.getElementById("scrapbookID").addEventListener('click', function(){ console.log(" ...HElLoooooooosdvsdpovsdvni"); }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload