[英]How do I separate JavaScript Scripts for HTML
我必须遵循某些准则来创建HTML页面。 我并没有要求任何人为我做功课，但我坚持第一部分。
创建和初始化三个数组。 使用for循环来填充这些数组。 在一个数组的末尾添加一个元素。
我创建了2个数组并使用了pop元素。 但是，当我打开.htm时，它会正确填充，但是当按下create时，它将执行我代码的第二部分。 如何分隔脚本？
<!DOCTYPE HTML>
<html>
<head>
<title>Testing JavaScript for Loop</title>
</head>
<body>
<p>The pop method removes the last element from an array.</p>
<button onclick="myFunction()">Create</button>
<button onclick="pop()">Pop</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
var newFruits = [];
document.getElementById("demo").innerHTML = newFruits;
function myFunction() {
for (var i in fruits) {
newFruits.push(fruits[i])
}
document.getElementById("demo").innerHTML = newFruits;
}
function pop() {
newFruits.pop();
document.getElementById("demo").innerHTML = newFruits;
}
</script>
<br>
<p>This one needs to add and element to the beginning.</p>
<button onclick="myFunction()">Create</button>
<button onclick="pop()">This button needs to add to beginning</button>
<p id="veggie"></p>
<script>
var veggies = ["Broccoli", " Carrots", " Cucumber", " Beans"];
var newVeggies = [];
document.getElementById("veggie").innerHTML = newVeggies;
function myFunction() {
for (var i in veggies) {
newVeggies.push(veggies[i])
}
document.getElementById("veggie").innerHTML = newVeggies;
}
/*need this to put an element at the beginning of the list */
function pop() {
newVeggies.pop();
document.getElementById("veggie").innerHTML = newVeggies;
}
</script>
</body>
</html>
使用return; 在关闭函数之前，还要将函数放在头部。
像这样的东西：
<html>
<head>
<title>Testing JavaScript for Loop</title>
<script>
function myFunction() {
for (var i in fruits) {
newFruits.push(fruits[i])
}
document.getElementById("demo").innerHTML = newFruits;
return;
}
function pop() {
newFruits.pop();
document.getElementById("demo").innerHTML = newFruits;
return;
}
</script>
</head>
<body>
<p>The pop method removes the last element from an array.</p>
<button onclick="myFunction()">Create</button>
<button onclick="pop()">Pop</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
var newFruits = [];
document.getElementById("demo").innerHTML = newFruits;
</script>
</html>
命名您的功能有所不同。 通过两次声明myfunction() ，JavaScript将使用最后一个。 如果将第一个函数定义为fruits_myfunction() ，将第二个函数定义为veggie_myfunction() ，则不会再发生此冲突。 这不是分开的问题。 JavaScript的范围基本上是这样：一切都是全球性的。 即使您将函数分隔到单独的文件中，也仍然会发生这种冲突。
假设您的文件结构是：
/index.htm
例如，创建一个名为index.js的文件。
粘贴脚本标签的内容：
var fruits = ["Banana", " Orange", " Apple", " Mango"];
var newFruits = [];
document.getElementById("demo").innerHTML = newFruits;
function myFunction() {
for (var i in fruits) {
newFruits.push(fruits[i])
}
document.getElementById("demo").innerHTML = newFruits;
}
function pop() {
newFruits.pop();
document.getElementById("demo").innerHTML = newFruits;
}
现在你的结构是
/index.htm
/index.js
在htm文件中，将脚本标签更改为：
<script type="text/javascript" src="/index.js">
以下应该有效，
<!DOCTYPE HTML>
<html>
<head>
<title>Testing JavaScript for Loop</title>
</head>
<body>
<p>The pop method removes the last element from an array.</p>
<button onclick="createFruits()">Create</button>
<button onclick="popFruit()">Pop</button>
<p id="demo"></p><br>
<p>This one needs to add and element to the beginning.</p>
<button onclick="createVeggies()">Create</button>
<button onclick="popVegie()">This button needs to add to beginning</button>
<p id="veggie"></p>
<script>
var fruits = ["Banana", " Orange", " Apple", " Mango"];
var newFruits = [];
document.getElementById("demo").innerHTML = newFruits;
function createFruits() {
for (var i in fruits) {
newFruits.push(fruits[i])
}
document.getElementById("demo").innerHTML = newFruits;
}
function popFruit() {
newFruits.pop();
document.getElementById("demo").innerHTML = newFruits;
}
var veggies = ["Broccoli", " Carrots", " Cucumber", " Beans"];
var newVeggies = [];
document.getElementById("veggie").innerHTML = newVeggies;
function createVeggies() {
for (var i in veggies) {
newVeggies.push(veggies[i])
}
document.getElementById("veggie").innerHTML = newVeggies;
}
/*need this to put an element at the beginning of the list */
function popVegie() {
newVeggies.unshift("Brinjal");
document.getElementById("veggie").innerHTML = newVeggies;
}
</script>
</body>
</html>
首先，永远不要有两个同名的函数，javaScript与其他方法（例如Java）不同，在Java语言中，方法重载非常繁琐。 如果两个方法具有相同的名称，当我们谈论javaSript时，将执行代码序列中的第二个方法
其次，将所有自定义javaScript代码放在一个<script>标记内，最好放在body的末尾，即“ </body> ”标记之前。
第三，更好的做法是将所有您的自定义javaScript代码放入“ .js”文件中，并将其作为
<script src="yourJSFile.js"></script>
这有助于将所有ur js代码维护在一个文件中。 注意，src属性中的路径应该正确（相对路径即可）。
第四点也是最后一点，想知道为什么需要将元素添加到数组的开头时弹出元素。 您应该使用unshift（）操作。
希望这可以帮助。
如何使用 javascript 在单独的 html 页面上显示答案？
[英]How do I display an answer on a separate html page using javascript?
如何在 JavaScript 中的数组中将整数分隔为单独的数字？
[英]How do I separate an integer into separate digits in an array in JavaScript?
如何在一个HTML文档中为每种表单创建单独的Javascript窗口
[英]How do I create separate Javascript windows for each form in one HTML document
如何在使用 javascript 的不同页面上更改单独的 header.html 中的活动导航 li？
[英]How do I change the active nav li in separate header.html when on different pages using javascript?
如何在html / javascript中的单个图像上访问单独的点/部分？
[英]How do I access separate points/sections on a single image in html/javascript?
如何在我的Greasemonkey Javascript脚本中使用jQuery？
[英]How do I use jQuery in my Greasemonkey Javascript scripts?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.