两个不同的Javascript文件在两个不同的按钮上执行

Question

我是网络开发和学习JavaScript的新手。在我的网页中，我想创建两个不同的按钮。只需单击它们，就会导致执行存储在不同文件中的javascript代码。两个单独的按钮将执行两个不同的JavaScript代码。怎么做？ 我在mywebpage.html中有一个代码，它运行正常 -

但是当我改变它时 它不起作用了。有什么问题？

Answer 1

它实际上与一个文件相同。你只需添加另一个。

假设您有两个文件， file1.js 和 file2.js 。

在 file1.js 中，有function one() {...}函数。
在 file2.js 中，您可以想象function two() {...}。

在.html文件中，您可以包含以下两个文件：

<script src="file1.js"></script>
 <script src="file2.js"></script>

除此之外，还有两个按钮：

<button onclick="one()">I will execute the code from the first file!</button> <button onclick="two()">I will execute the code from the second file!</button>

现在每个按钮都会执行来自不同.js文件的代码。

Answer 2

如果您打算对不同的按钮使用不同的JavaScript代码，那么在同一个JavaScript文件中创建两个这样的函数。在特定按钮的单击处理程序中调用所需的函数。

 <button id="test">Test Button</button>

  <script>    
   document.getElementById("test").addEventListener("click", function( event ) {
       // display the current click count inside the clicked div
       event.target.textContent = "click count: " + event.detail;   

   }, false);       
 </script>

Answer 3

如果functions在一个或不同的文件中，您只需要使用

无关紧要

<script src="1.js"></script>

<script src="2.js"></script>

等。在你的html文件中，取决于你有多少个js文件。

您可以根据需要创建任意数量的functions。在您的html文件中，您只需要使用以下内容：

<button onclick="function1()"></button> 

<button onclick="function2()"></button>

等

一个简单的例子：你可以将functions放在两个不同的文件中，使用上面提到的代码，它仍然可以正常工作

function function1(){
document.body.style.background="green";
}
function function2(){
document.body.style.background="black";
}

<button onclick="function1()">Green background</button><br><br> <!--This is executing the green background function-->
<button onclick="function2()">Black background</button><!--This is executing the black background function-->