page doesn't display anything

March 7, 2022

so I wrote a script to display 5 random arrays, but the page doesn’t display anything.
here’s the code:

<html>
  <head>
    <script>
      function start(){
        var arr(5),result;
        result=document.getElementById("arraying");
        result="<p>";
        for(var i=0; i<5;i++){
          arr[i]=Math.floor(Math.random()*10);
          result+="arr["+i+"]= "+arr[i]+"</p><p>";
        }
        result+="</p>";
      }
      window.addEventListener("load",start,false);
    </script>
  </head>
  <body>
    <div id="arraying"></div>
  </body>  
</html>

I tried removing result=document.getElementById and write document.getElementById.innerHTML=result in the end of the function but didn’t work. what’s the error?

>Solution :

You cannot use the same variable for different purposes at the same time. First you assign a DOM element to result, and immediately on the next line you overwrite result with a string.

Build a string htmlStr inside your loop, and when that is done, assign this string to result.innerHTML property:

function start() {
  let arr = [],
    result, htmlStr = '';
  result = document.getElementById("arraying");
  htmlStr += "<p>";
  for (let i = 0; i < 5; i++) {
    arr[i] = Math.floor(Math.random() * 10);
    htmlStr += "arr[" + i + "]= " + arr[i] + "</p><p>";
  }
  htmlStr += "</p>";
  result.innerHTML = htmlStr;
}
window.addEventListener("load", start, false);