How to Fix JavaScript HTML Element Did Not Show an Error?

Question

TypeScript code is as follows:

namespacesLab.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 = {}));

HTML code is as follows:

index.html:

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

When I click the index.html, a webpage showing four buttons appears. However, there is no array displayed.

expected result: four buttons and an array shown on the webpage

actual result: the array did not show on the webpage

@AndyHoffman — When the script runs, it just defines a couple of arrays and a function. It doesn't matter that `#content` doesn't exist. — Quentin, Jan 24 '19 at 21:30

score 4 · Accepted Answer · answered Jan 24 '19 at 21:29

4

you have a space in your ID:

change

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

to

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

answered Jan 24 '19 at 21:29

imvain2

10,699
1
11
19

score 2 · Answer 2 · answered Jan 24 '19 at 21:55

After running your code, it looks like your issue is your div id:

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

Your id has an extra whitespace and you are looking for:

document.getElementById("output")

It looks like you might also have some issues accessing the DOM before it has been constructed. Take a look at this answer for some more info.

Some extra tips for you: For pretty much every major web browser available, there are web developer tools that can greatly help you debug your web apps/pages. Chrome developer tools, for example, can be accessed using Ctrl+Shift+I or simply right click>>Inspect.

How to Fix JavaScript HTML Element Did Not Show an Error?

2 Answers2