Question

我有index.html和index.js。在我的index.js文件中，我试图获取Id，并且根据id，我想通过调用该函数来添加新的标题和文本。到目前为止，我还没有完成。我怎么了另外，我尝试将js文件路径添加到文件头，但是没有用。之后，我在体内尝试了一下，效果不佳。这是我最后的尝试。

这是我的代码

* index.js＆ index.html

var test = function() {
    var section = document.getElementById("unit-price");
    var span_1 = document.createElement("span");
    var text = document.createTextNode("Unit Price: ");
    span_1.appendChild(text);
    section.appendChild(span_1);
}

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
      <script src="index.js">test();</script>
      <div id="unit-price"></div>
  </body>
</html>

Answer 1

您不能有<script>标记引用外部源并包含内联代码。

您需要在新的脚本标签中执行该功能：

<script src="index.js"></script>
<script>
  test();
</script>

或将其添加到您的index.js：

var test = function() {
var section = document.getElementById("unit-price");
var span_1 = document.createElement("span");
var text = document.createTextNode("Unit Price: ");
span_1.appendChild(text);
section.appendChild(span_1);
}
test();

Answer 2

在JS文件中声明后，调用test函数。

如果script元素指定了src属性，则其标签中不应嵌入脚本。

var test = function() {
    var section = document.getElementById("unit-price");
    var span_1 = document.createElement("span");
    var text = document.createTextNode("Unit Price: ");
    span_1.appendChild(text);
    section.appendChild(span_1);
}

test();

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
      <script src="index.js"></script>
      <div id="unit-price"></div>
  </body>
</html>

Answer 3

您可以执行以下操作。

var test = function() {
    var section = document.getElementById("unit-price");
    var span_1 = document.createElement("span");
    var text = document.createTextNode("Unit Price: ");
    span_1.appendChild(text);
    section.appendChild(span_1);
}
test();

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
      <div id="unit-price"></div>
  </body>
</html>

或者您也可以这样做

<script src="index.js" type="text/javascript"></script> 
<script>
    test();
</script>

调用函数

3 个答案: