如何修复JavaScript HTML元素未显示错误？_Javascript_Html

如何修复JavaScript HTML元素未显示错误？

javascript html

如何修复JavaScript HTML元素未显示错误？,javascript,html,Javascript,Html,TypeScript代码如下所示： namespacesplab.ts: var ArrayUtilities; (function (ArrayUtilities) { function reverseArray(array) { return array.slice(0).reverse(); } ArrayUtilities.reverseArray = reverseArray; function lastItemOfArray(array

TypeScript代码如下所示：

namespacesplab.ts:

var ArrayUtilities;
(function (ArrayUtilities) {
    function reverseArray(array) {
        return array.slice(0).reverse();
    }
    ArrayUtilities.reverseArray = reverseArray;
    function lastItemOfArray(array) {
        return array.slice(0).pop();
    }
    ArrayUtilities.lastItemOfArray = lastItemOfArray;
    function firstItemOfArray(array) {
        return array.slice(0).shift();
    }
    ArrayUtilities.firstItemOfArray = firstItemOfArray;
    function concatenateArray(array1, array2) {
        return array1.concat(array2);
    }
    ArrayUtilities.concatenateArray = concatenateArray;
})(ArrayUtilities || (ArrayUtilities = {}));

<script src="namespacesLab.js"></script>
<html>
  <body>
    <script>
      array1 = [1, 2, 3, 4, 5];
      array2 = [6, 7, 8, 9, 10];

      function callArrayUtil(util, array, array2 = null) {
        document.getElementById("output").innerHTML = ArrayUtilities[util](
          array,
          array2
        ).toString();
      }
      document.getElementById("output").innerHTML = array1.toString();
    </script>

    <div id="output " style="width:100%;"></div>
    <button onclick="callArrayUtil('reverseArray', array1)">
      Reverse Array
    </button>
    <button onclick="callArrayUtil('lastItemOfArray', array1)">
      Last Item of Array
    </button>
    <button onclick="callArrayUtil('firstItemOfArray', array1)">
      First Item of Array
    </button>
    <button onclick="callArrayUtil('concatenateArray', array1, array2)">
      Concatenate Array
    </button>
  </body>
</html>

HTML代码如下所示：

index.html:

var ArrayUtilities;
(function (ArrayUtilities) {
    function reverseArray(array) {
        return array.slice(0).reverse();
    }
    ArrayUtilities.reverseArray = reverseArray;
    function lastItemOfArray(array) {
        return array.slice(0).pop();
    }
    ArrayUtilities.lastItemOfArray = lastItemOfArray;
    function firstItemOfArray(array) {
        return array.slice(0).shift();
    }
    ArrayUtilities.firstItemOfArray = firstItemOfArray;
    function concatenateArray(array1, array2) {
        return array1.concat(array2);
    }
    ArrayUtilities.concatenateArray = concatenateArray;
})(ArrayUtilities || (ArrayUtilities = {}));

<script src="namespacesLab.js"></script>
<html>
  <body>
    <script>
      array1 = [1, 2, 3, 4, 5];
      array2 = [6, 7, 8, 9, 10];

      function callArrayUtil(util, array, array2 = null) {
        document.getElementById("output").innerHTML = ArrayUtilities[util](
          array,
          array2
        ).toString();
      }
      document.getElementById("output").innerHTML = array1.toString();
    </script>

    <div id="output " style="width:100%;"></div>
    <button onclick="callArrayUtil('reverseArray', array1)">
      Reverse Array
    </button>
    <button onclick="callArrayUtil('lastItemOfArray', array1)">
      Last Item of Array
    </button>
    <button onclick="callArrayUtil('firstItemOfArray', array1)">
      First Item of Array
    </button>
    <button onclick="callArrayUtil('concatenateArray', array1, array2)">
      Concatenate Array
    </button>
  </body>
</html>


数组1=[1,2,3,4,5]；
array2=[6,7,8,9,10]；
函数callArrayUtil（util，array，array2=null）{
document.getElementById（“输出”）.innerHTML=ArrayUtilities[util](
阵列，
阵列2
).toString（）；
}
document.getElementById（“输出”）.innerHTML=array1.toString（）；
反向阵列
数组的最后一项
数组的第一项
串联数组

当我单击index.html时，会出现一个显示四个按钮的网页。但是，没有显示任何数组

预期结果：网页上显示四个按钮和一个数组

实际结果：该数组未显示在网页上

您的ID中有一个空格：

改变

<div id = "output " style = "width:100%;">

到

运行代码后，您的问题似乎是您的div id:

<div id = "output " style = "width:100%;">

在构建DOM之前，访问它可能也会遇到一些问题。更多信息，请查看

给你的一些额外提示：

对于几乎所有可用的主要web浏览器，都有web开发人员工具可以极大地帮助您调试web应用程序/页面。例如，可以使用

Ctrl+Shift+I

或右键单击>>检查来访问Chrome开发者工具

@andyhofman-当脚本运行时，它只定义了几个数组和一个函数。内容不存在并不重要。