Question

我的html页面中有一个按钮，我想在点击后运行外部javascript文件。

<input type="button" id="btn" value="Show Graph" onclick=src="graph.js">

有问题的javascript文件是：

$(document).ready(function(){
  $("#btn").click(function(){
    $("#tester").load("", function(){
  TESTER = document.getElementById("tester");

  Plotly.plot(TESTER,[{
    x: [1,2,3,4,5,6,7,8,9,10],
    y: [1,4,9,16,25,36,49,64,81,100]}],
    {margin: {t:0}});
    });
  });
});

此文件的目标是在以下位置编辑和绘制图形：

<div id ="tester" style="width:600px;height250px;">
</div>

我需要做什么才能让我的javascript文件能够编辑html页面上的元素？

Answer 1

看起来你想使用plotly.js。首先，您必须将库包含在HTML文档的头部

<head>
...
  <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
...
</head>

然后你可以添加你发布的功能，但你应该稍微修改一下

<head>
...
  <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#btn").click(function(){
        Plotly.plot(document.getElementById("tester"),
         [{ x: [1,2,3,4,5,6,7,8,9,10],
            y: [1,4,9,16,25,36,49,64,81,100]}],
         {margin: {t:0}});
      });
    });
  </script>
...
</head>

这会将绘图函数调用添加到id为btn的按钮的onClick事件中。按钮的HTML声明不再需要onclick事件集，所以它应该看起来像这样

<input type="button" id="btn" value="Show Graph">

请注意，您的javascript使用了jQuery，因此您还需要将其包含在标头中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您还可以将jQuery和Plotly库放在您的Web服务器上并从那里加载它们，而不是这里的外部托管示例。然后，您将使用Web服务器上库的相对路径，例如

<script src="js/jquery.min.js"></script>

如果您希望将该功能放在单独的javascript文件中，请将该功能的调用放入按钮

<input type="button" value="plot" onclick="drawPlot()">

然后将函数写入文本文件，即myplot.js，然后将其包含在标题

中

<script type="text/javascript" src="myplot.js"></script>

您必须像这样修改您的功能

function drawPlot () {
  Plotly.plot(document.getElementById("tester"),
     [{ x: [1,2,3,4,5,6,7,8,9,10],
        y: [1,4,9,16,25,36,49,64,81,100]}],
     {margin: {t:0}});
  });
}

运行在html文件中编辑图形的外部javascript文件

1 个答案: