javascript - inserting variable into html page with innerhtml on page load -
i have inherited html page displays stats sales team. have inserted cut down version of here
<html> <head> <title>test</title> </head> <body> <br> <div class="separator" style="clear: both; text-align: center;"></div><br> <div> <table border="2" cellpadding="10" cellspacing="0" style= "background-color: white; border-collapse: collapse; text-align: center; width: 900px;"> <tbody> <tr style= "background-color: #f7941e; color: white; padding-bottom: 4px; padding-top: 5px;"> <th> <div style="text-align: center;"> <span style= "font-family: verdana, sans-serif; font-size: small;">total accounts</span> </div> </th> </tr> <tr> <td> <div style="text-align: justify;"> <div style="text-align: center;"> <span style= "color: #20124d; font-family: verdana, sans-serif; font-size: 75px; font-weight: bold;"> 200</span> </div> </div> </td> </tr> </tbody> </table> </div> </body> </html>
if can see sales figure 200. let;s have change "300".
the system use not display preview of table can edit, edit html directly hunting through code. i'd list variables @ top of page in javascript , have guys edit them there, rather hunting through code.
so like
<html> <head> <script> myvar = "300"; document.getelementbyid('total_accounts').innerhtml = myvar; </script> <title>test</title> </head> <body> <br> <div class="separator" style="clear: both; text-align: center;"></div><br> <div> <table border="2" cellpadding="10" cellspacing="0" style= "background-color: white; border-collapse: collapse; text-align: center; width: 900px;"> <tbody> <tr style= "background-color: #f7941e; color: white; padding-bottom: 4px; padding-top: 5px;"> <th> <div style="text-align: center;"> <span style= "font-family: verdana, sans-serif; font-size: small;">total accounts</span> </div> </th> </tr> <tr> <td> <div style="text-align: justify;"> <div style="text-align: center;"> <span id="total_accounts" style= "color: #20124d; font-family: verdana, sans-serif; font-size: 75px; font-weight: bold;"></span> </div> </div> </td> </tr> </tbody> </table> </div> </body> </html>
this way can list of variables @ top of page. unfortunately, doesn't work, displays no value in cell. have gone wrong?
thanks
assuming won't use jquery, script should be:
window.onload = function(){ myvar = "300"; document.getelementbyid('total_accounts').innerhtml = myvar; };
here can how works: example
Comments
Post a Comment