javascript - Use a js function after another function -

  <div class="panel" id="home">     <video id='video1' width='630' autoplay controls>         <source id="source1" src="1_uno.mp4" type="video/mp4">     </video>   </div>  

i' ve js function @ , of 'video1' makes refresh of div home putting 3 buttons

   var myvideo = document.getelementbyid("video1");    myvideo.addeventlistener('ended',myhandler,false);    function myhandler(e) {       document.getelementbyid('home').innerhtml =       '<button type="button" style="height: 180px; width: 200px"  onclick="refreshdiv("a")"> </button><button type="button" style="height: 180px; width: 200px" onclick="refreshdiv("b")"> b </button><button type="button" style="height: 170px; width: 200px" onclick="refreshdiv("c")"> c </button>'; } 

until part works good, u can see onclick event refreshdiv function:

    function refreshdiv(str) { if(str=='a'){    src='1_uno.mp4'; } if(str=='b'){    src='2_due.mp4'; } if(str=='c'){    src='3_tre.mp4'; } document.getelementbyid('home').innerhtml = '<video id="video1" width="630" autoplay controls><source id="source1" src="'+ src +'" type="video/mp4"></video>'; } 

the problem when click on buttons happens , in chrome got error: unexpected token }

all function inside: <script></script>

you should change onclick="refreshdiv("a")"> onclick="refreshdiv(\'a\')"> etc.

'<button type="button" style="height: 180px; width: 200px"  onclick="refreshdiv(\'a\')"> </button><button type="button" style="height: 180px; width: 200px" onclick="refreshdiv(\'b\')"> b </button><button type="button" style="height: 170px; width: 200px" onclick="refreshdiv(\'c\')"> c </button>'; 

here's wroking example http://jsfiddle.net/8rjw5/1/