Access an HTML element inserted via an other script

Question

I'm working on a graphic interface thanks to BABYLONjs, and I've decided to implement a mode choice functionnality, meaning you can either choose edit mode or visualize mode. These 2 modes each have different HTML components, so I chose to write a construction script, which would create the HTML by implementing the right elements corresponding to the chosen mode. Let's call A.js the construction script, and B.js my main script with all my funtions.

When I'm in B.js trying to get an HTML element, like a button , which was inserted via A.js, the returned value is null (I get the element with document.getELementById('element').

I made sure to include A.js before B.js in my HTML, so I don't really understand why it doesn't work .

If you need more precisions, feel free to ask. Thanks !

Please add a minimal code example so that we can help spot any mistake ;-) — Magix
– Magix, Commented May 2, 2018 at 12:01

Ryan Hillis · Accepted Answer · 2018-05-02 13:05:37Z

1

Make sure that both javascript documents are attached to the same HTML file, so that document refers to the same thing.

Also make sure that everything you are doing is synchronous. If you are using, for example, window.addEventListener('onload') than that is asynchronous. This means that that code is not actually being run, but waiting a bit to run itself. In the meantime, it might decide to run your B.js code, at which point the element you are selecting doesn't yet exist.

If that is the problem, run your B.js script inside a window.addEventListener('onload') as well.

The third thing is that your A.js script might be inside a function, which needs to be run in order for the element to be added to the DOM.

Without actual code, it is really hard to debug specific issues like the one that you have presented. If you need better answers then please include the actual demo code so we can better identify the problem.

Edit: Code Posted.

As you posted, in your code, you are defining the construction function, but then telling the broswer to run it when the window loads. You then run the A.js before the construction function is called. There are two solutions.

Wrap your entire B.js in window.addEventListener("load"), or do something completely different.

Include B.js BEFORE A.js, and define a function called B(). Put all your code in this. Then, at the end of the construction function call B(). This means that B.js will be forced to wait until the window loads as well. I hope this helps!

edited May 2, 2018 at 13:05

answered May 2, 2018 at 12:03

Ryan Hillis

257 bronze badges

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

1 Comment

legallon Over a year ago

I've posted few lines of code to help you understand, and it may be related to the window.addEventListener("load"), as you just said

Przemek Marcinkiewicz · Accepted Answer · 2018-05-02 12:46:19Z

0

I see that you use jQuery. If you want capture events on elements that are created dynamically you should bind to a parent element (or document):

$(document).ready(function() {
   $(document).on("click","#testone",function() {
       alert("clicked");
   });
}

answered May 2, 2018 at 12:46

Przemek Marcinkiewicz

1,3151 gold badge19 silver badges34 bronze badges

5 Comments

legallon Over a year ago

yes I know I'm mixing up some basic js and some jquerry ^^ that's probably not very clean but when I don't really focus on what I'm writing it happens

Przemek Marcinkiewicz Over a year ago

So if you decide to keep it there, my solution should help you.

legallon Over a year ago

Where should I declare it ? in A.js or B.js ?

Przemek Marcinkiewicz Over a year ago

Doesn't matter.

legallon Over a year ago

OH ok sorry I didn't understand well your answer, but now I do and it works ! Thanks a lot for your time :)

legallon · Accepted Answer · 2018-05-02 12:36:51Z

Here's an example of what I want to do :

HTML :

 <!DOCTYPE html>
<html>

<head>
<title> Test </title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>
<body id=inserthere>
  <header> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- <script style="text/javascript" src="a.js" defer></script> --> 
      <!-- <script style="text/javascript" src="b.js" defer></script> -->
   <header>
</body> 
</html>

A.js :

function construction(){

$("#inserthere").append("<button id='testone' class='btn'> 1 </button>");
$("#inserthere").append("<button id='testtwo' class='btn'  > 2</button>");

}

window.addEventListener("load", construction);

B.js :

var test1 = document.getElementById("testone");
test1.addEventListener("click", function(){
alert("clicked");
});

var test2 = document.getElementById("testtwo");
test2.addEventListener("dblclick", function(){
alert("doubleclicked");
})

Those are short examples trying to reproduce my situation, hope it will help you !

Collectives™ on Stack Overflow

Access an HTML element inserted via an other script

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related