Question

所以我需要一些帮助，我是JS的新手，我需要找到解决我遇到的问题的解决方案。我试图创建一个单击按钮时会更改文本的按钮。当我在脚本标签标头中创建JS函数并在按钮onclick中引用该函数时，它可以工作，但在单独的JS文件中不起作用。 HTML代码如下。希望有人可以帮助我。

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <script type="text/javascript" src="changetext.js"></script>
  <script>
    function Button() {
      document.getElementById("demo").innerHTML = "hello";
    }
  </script>
  <script>
    function Button2() {
      document.getElementById("demo").innerHTML = "hi";
    }
  </script>

</head>

<body>

  <p id="demo"> hi</p>

  <button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
  <button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>




  <script type="text/javascript" src="changetext.js"></script>
</body>

</html>

Answer 1

在changetext.js中编写函数，并确保该函数与HTML文件位于同一位置。

将onclick更改为onClick

并删除script

中的head标记

Answer 2

这是一个例子...

    <!DOCTYPE html>
    <html>
    <head>
    <title>example</title>
    </head>
    <body>

    <p id="demo"> hi</p>

    <button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
    <button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>

    <script type="text/javascript" src="changetext.js"></script>
    </body>
    </html>

首先，您需要删除脚本。.仅当您不使用外部js时，我们才包含脚本。

在外部js（changetext.js）上

  function Button(){
        document.getElementById("demo").innerHTML = "hello from button 1";
    }
    function Button2(){
        document.getElementById("demo").innerHTML = "Hellow from button2";
    }

结果：

如果您不使用外部js，则代码如下：

<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>

<p id="demo"> hi</p>

<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>

<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
    document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
    document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>

我们在代码 script 祝你好运!!中写上代码js！

如何在单独的JS文件而不是HTML Script Header标签中编写按钮单击的脚本

2 个答案: