Loading external .js file into Div from an onclick

26 Views Asked by At

I am trying to click the text and load a table into a div from an external js file. If I click FIRST, then click SECOND the table loads into the div. But I tried to run 2 functions at the same time (THIRD), it errors out and says GetRed is not defined. Is there anyway I can just click one time to load this table into the div?

 <a onclick="getScript('Red.js');"/>First</a>
 <a onclick="GetRed();"/>Second</a>
 <a onclick="getScript('Red.js'); GetRed();"/>Third</a>

<div id="myTableResult">

</div> 


<script type="text/javascript">
 getScript=(url)=>{
     var script = document.createElement('script');
     script.setAttribute('type', 'text/javascript');
     script.setAttribute('src', url);
     if(document.body == null){
         document.head.appendChild(script);
     }else{
         document.body.appendChild(script);
     }
 }
</script>  

function GetRed() {
var data = '<table id="TableResult1"> \
<tr class="Color"> \
<tr><td>Red</td> \
<td>Blue</td> \
<td>White</td></tr> \
</table> '
document.getElementById('myTableResult').innerHTML =data;
} 
0

There are 0 best solutions below