inserting variable into html page with innerhtml on page load
Question
I have inherited an html page which displays stats for the sales team. I have inserted a cut down version of it 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 you look you can see the sales figure is currently 200. now let;s say then have to change it to "300".
The system they use does not display a preview of the table they can edit, so they edit the html directly by hunting through the code. What I'd like to do is list the variables at the top of the page in javascript and have the guys edit them there, rather than hunting through the code.
So something 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 I can list all of the variables at the top of the page. Unfortunately, it doesn't work, it displays no value in the cell. Where have I gone wrong?
thanks
2 answers
solution1
0 2014-11-19 11:13:03
Assuming you won't use jQuery, then your script should be:
window.onload = function(){
myVar = "300";
document.getElementById('total_accounts').innerHTML = myVar;
};
Here you can look how it works: Example
solution2
0 2014-11-19 11:20:35
window.load is one option or you can even call a function from body tag as shown below
<script>
function changeAccount(){
var myVar = "300";
document.getElementById('total_accounts').innerHTML = myVar;
}
</script>
<title>test</title>
</head>
<body onload="changeAccount()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.