Question

我必须按照某些指导原则创建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>

Answer 1

在关闭函数前使用return;，也将函数放在head部分。

这样的事情：

   <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>

Answer 2

以不同的方式命名您的功能。通过两次声明myfunction()，JavaScript使用最后一个。如果您将第一个函数定义为fruits_myfunction()，将第二个函数定义为veggie_myfunction()，则不会再发生此碰撞。这不是分开它的问题。 JavaScript的范围基本上是这样的：一切都是全局的。即使你将功能分成不同的文件，你仍然会遇到这种冲突。

Answer 3

假设您的文件结构是：

/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">

Answer 4

以下应该有效，

<!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）的函数不同，在这些语言中，您可以轻松地进行方法重载。如果两个方法具有相同的名称，那么当我们谈论javaSript时，将执行代码序列中的第二个方法

其次，将所有自定义javaScript代码放在一个<script>标记内，最好放在正文的末尾，即在＆＃34; </body>＆＃34;之前。标签

第三，更好的做法是将所有自定义javaScript代码放在＆＃34; .js＆＃34;文件并将其包含为，

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

这有助于将所有ur js代码保存在单个文件中。注意，src属性中的路径应该是正确的（相对路径会这样做）。

第四点也是最后一点，想知道为什么在需要将元素添加到数组的开头时弹出一个元素。你应该使用unshift（）操作。

希望这有帮助。

如何为HTML分隔JavaScript脚本

4 个答案: