Question

I am a new programmer and I have a little question. This is a part of my code:

<nav>
   <ul>
     <li><input type="button" value="HomePage" id="home1" data-page="home"></li>
     <li><input type="button" value="About" id="about1" data-page="about"></li>
   </ul>
</nav>

    <div id="content">
        <div class="page active">
            <div class=firstLoad>
            (some content...)
            </div>
        </div>
    </div>

<script type="text/template" id="home">
<div id="backImage">
  <div id="spinner">
</div>
<div>
   <input type="button" value="..." id="car" class="button">
</div>
<div>
   <input type="button" value="..." id="Car1" onclick="location.href='#'" class="button">
</div>
<div>
   <input type="button" value="..." id="reset" class="button">
</div>
</div>
<script src="location.js"></script>
</script>

My question is how can I use this “location.js” script tag in the html page (id=”home”) when I call this html page with innerHTML and I change the current appear page?
No matter what I have done this script doesn’t work for me at all in the html page.

Thank you…:)

Answer 1

No, that’s not going to work for you. Not only is it invalid to have a <script></script> inside of another <script>, it wouldn’t work even if the browser could parse it correctly. However, all you need to do is provide the javascript files you want to load in another manner, like in a dataset attribute. Additionally, as Quentin pointed out, text/template isn’t a standard type, so prefix it with x- as standard practice

<script type="text/x-template" id="home" data-jsassets="location.js,/path/to/some/other.js">
   ...
</script>

Now, retrieve the comma-delimted list of javascript to load and inject it into the page, which will run the script:

var tpl, jsassets, tag, i,l;
tpl = document.getElementById('home');
// At this point, ensure your template has been rendered and attached to the page
// by your template processor
jsassets = (tpl.getAttribute('data-jsassets') || '').split(',');
for(i = 0, l = jsassets.length; i < l; i++){
  tag = document.createElement('script');
  tag.type = "text/javascript";
  tag.src = jsassets[i];
  document.head.appendChild(tag);
}