Javascript 修改 HTML 中的函数并重新加载页面答案

【问题标题】：Javascript to Modify a function in HTML and reload the pageJavascript 修改 HTML 中的函数并重新加载页面
【发布时间】：2022-01-27 08:06:25
【问题描述】：

我有一页 HTML，其中一部分是：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(Social);


function Social() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Errors');
        data.addRows([
        ['bla', 53],
        ['bla', 5]

         ]);
        var options = {title:'Social',
                       width:600,
                       height:200,
                       animation:{
                         "startup": true,
                          duration: 1500,
                          easing: 'out'}
                        };
        var chart = new google.visualization.ColumnChart(document.getElementById('Social'));
        chart.draw(data, options);}
</script>

加载此页面后，它使用 google 很好地显示 ColumnChart 中的行。

如果我将以“var chart”开头的行改为：

var chart = new google.visualization.BarChart(document.getElementById('Social'));

html 会显示条形图。

我想创建一个 javascript 按钮，它将 html 中的文本从 ColumnChart 替换为 BarChart 并重新加载页面，例如：

function myFunction() {
 document.body.innerHTML = document.body.innerHTML.replace("ColumnChart", "BarChart");
 location.reload();
}

但这会使用初始值重新加载页面。如果我不添加重新加载，我当然看不到任何区别。

我怎样才能做到这一点？

【问题讨论】：

如果重新加载页面，会得到一个新的html页面，为什么需要重新加载页面？
我不知道我应该使用哪种方法，我只需要使用不同的值重新加载页面，而不是 :var chart = new google.visualization.BarChart(document.getElementById('Social') );将有： var chart = new google.visualization.ColumnChart(document.getElementById('Social'));
你为什么不添加一个覆盖这个 div 的脚本呢？此处无法重新加载，您有页面的 URL 吗？

标签： javascript html string replace

【解决方案1】：

无法进行更改并重新加载页面并保留更改，因为GET 请求将从服务器重新加载页面。相反，您想注入一个脚本并运行它，以便更新现有页面，您可以尝试在页面加载后运行它以覆盖ColumnChart：


function socialBarChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Errors');
  data.addRows([
    ['bla', 53],
    ['bla', 5]
  ]);
  var options = {
    title:'Social',
    width: 600,
    height: 200,
    animation: {
      "startup": true,
      duration: 1500,
      easing: 'out'
    }
  };
  var chart = new google.visualization.BarChart(document.getElementById('Social'));
  chart.draw(data, options);
}

// Then call this :
socialBarChart()

最好使用带有小写首字符的 camelCase 来命名您的函数，否则，它看起来像一个类构造函数。

【讨论】：