在页面加载时将变量插入到具有innerhtml的html页面中

Question

I have inherited an html page which displays stats for the sales team. 我继承了一个html页面，其中显示了销售团队的统计信息。 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". 如果您看一下，可以看到当前的销售数字是200。现在说，然后必须将其更改为“ 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. 他们使用的系统不会显示他们可以编辑的表格的预览，因此他们直接通过搜索代码来编辑html。 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. 我想做的是在javascript页面顶部列出变量，并让他们在那里编辑它们，而不是遍历代码。

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 谢谢

Answer 1

Assuming you won't use jQuery, then your script should be: 假设您不会使用jQuery，那么您的脚本应为：

window.onload = function(){
myVar = "300";
document.getElementById('total_accounts').innerHTML = myVar;
        };

Here you can look how it works: Example 在这里，您可以查看其工作方式：示例

Answer 2

window.load is one option or you can even call a function from body tag as shown below window.load是一个选项，或者您甚至可以从body标签调用函数，如下所示

<script>  
function changeAccount(){
  var myVar = "300";
  document.getElementById('total_accounts').innerHTML = myVar;
}
</script>

<title>test</title>
</head>

<body onload="changeAccount()">

在页面加载时将变量插入到具有innerhtml的html页面中

问题描述

2 个解决方案

解决方案1
0 2014-11-19 11:13:03

解决方案2
0 2014-11-19 11:20:35

在页面加载时将变量插入到具有innerhtml的html页面中

问题描述

2 个解决方案

解决方案1 0 2014-11-19 11:13:03

解决方案2 0 2014-11-19 11:20:35

解决方案1
0 2014-11-19 11:13:03

解决方案2
0 2014-11-19 11:20:35