在 HTML 中使用 2 个脚本：第一个 JavaScript 在第二个 JavaScript 之后不起作用

Question

我的HTML中有两个脚本，我发现最后一个脚本覆盖了第一个脚本，所以第一个脚本不起作用，最后一个完全起作用。解决方案是什么？

Javascripts:

//First js
function myFunction(x) {
var opacity = x.options[x.selectedIndex].value;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this!");
}
}
//Second js
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

Answer 1

两个脚本都能完美加载。链接和加载它们的行为不会引起冲突。

问题的出现是因为两个脚本都定义了一个同名的函数。浏览器认为第二个定义是"更新"，并简单地忘记了第一个定义，以为你打算替换它

只需为函数指定不同的名称。在编程中，根据函数的行为来命名函数是一种很好的做法，这样以后您就可以很容易地识别它们。

例如，可以将第一个函数命名为setOpacity，将第二个函数命名为makeResponsive。

第一个JS文件：

function setOpacity(x) {
var opacity = x.options[x.selectedIndex].value;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this!");
}
}

第二个JS文件：

function makeResponsive() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}