Can anybody help me in the following Javascript code? I'm not able to get the output

Question

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script>
    var arr = new Array(1, 10, 8, 56, 12, 45);
    document.getElementById("srt").innerHTML = arr;

    function asc() {
      arry.sort(function(a, b) {
        return a - b;
      })
      document.getElementById("srt").innerHTML = arr;
    }

    function desc() {
      arry.sort(function(a, b) {
        return b - a;
      })
      document.getElementById("srt").innerHTML = arr;
    }
  </script>
</head>

<body bgcolor="aqua">
  <div>
    <h4>Click the button to sort the Array.</h4>
  </div>

  <div><input type="button" onclick="asc()" value="Ascending"></div>
  <div><input type="button" onclick="desc()" value="Descending"></div>

  <div>
    <h4><span id="srt"></span></h4>
  </div>
</body>

</html>

Please check my javascript code.I think I'm going wrong somewhere wrong there. When I click on the button the sorted array is not getting displayed.

Issue is you are trying to access element before it is rendered. Try wrapping your code in load(`window.addEventListener('load', function(){ // your code here })`) event or load resource at the end — Rajesh, Mar 17 '17 at 07:29
@user7417866 I do not wish to debate anymore. Answering a typo mistake is **just wrong**. You can do revenge votes (*like few*) but I'm ready to bare this to add some discipline. Please remember *This is our portal and we have to manage it* — Rajesh, Mar 17 '17 at 07:49
@Rajesh even I'm not interested, its you who started buddy.. if you are talking about discipline, you should know, it always start from you... — Abhinav, Mar 17 '17 at 07:50

score 0 · Accepted Answer · answered Mar 17 '17 at 07:44

0

As Rajesh has pointed out, either you should define your javascript at the end of body of html or wrap javascript code into a structure which will be called when page is loaded and ready.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body bgcolor="aqua">
  <div>
    <h4>Click the button to sort the Array.</h4>
  </div>

  <div><input type="button" onclick="asc()" value="Ascending"></div>
  <div><input type="button" onclick="desc()" value="Descending"></div>

  <div>
    <h4><span id="srt"></span></h4>
  </div>

  <script>
    var arr = new Array(1, 10, 8, 56, 12, 45);
    document.getElementById("srt").innerHTML = arr;

    function asc() {
      arr.sort(function(a, b) {
        return a - b;
      })
      document.getElementById("srt").innerHTML = arr;
    }

    function desc() {
      arr.sort(function(a, b) {
        return b - a;
      })
      document.getElementById("srt").innerHTML = arr;
    }
  </script>  
</body>

</html>

answered Mar 17 '17 at 07:44

yılmaz

1,818
13
15

Thanks for crediting but if you read comments on other answers, its wrong to answer. I would request you to remove your answer. – Rajesh Mar 17 '17 at 07:51
Sorry but i couldn't get which part is wrong to answer. The code above is just working? – yılmaz Mar 17 '17 at 07:59
The reason its wrong is because any correction to typo mistakes is like an invitation to *help me debug*. Second, your answer will not add any value as this mistake could have been solve if OP had see console. So such questions should not exists but OP will not be able to delete as there are answers. Hence you should comment to inform OP but not answer. – Rajesh Mar 17 '17 at 08:03
Also feel free to ask if you have any more queries. :-) – Rajesh Mar 17 '17 at 08:07
When i reach 50 reputation, i might prefer commenting :) – yılmaz Mar 17 '17 at 08:16
Yes but I have already commented so this is just duplicating information. So once again I'd request you to remove your answer as it will not add any value to portal. – Rajesh Mar 17 '17 at 08:17
It is obvious that, the problem is more than the typo "arry". So this answer will be beneficial for whom locate their javascript code on wrong place. – yılmaz Mar 17 '17 at 08:23

brk · Answer 2 · 2017-03-17T07:40:29.100

-1

There is no error in the js code other than a typo(There is nothing defined for for arry).

The issue is your are loading the script before the DOM is ready.

In such case document.getElementById will not work as the element is not present in DOM

var arr = new Array(1, 10, 8, 56, 12, 45);
document.getElementById("srt").innerHTML = arr;

function asc() {
  arr.sort(function(a, b) {
    return a - b;
  })
  document.getElementById("srt").innerHTML = arr;
}

function desc() {
  arr.sort(function(a, b) {
    return b - a;
  })
  document.getElementById("srt").innerHTML = arr;
}

You can load the code when the DOM is ready or use window.onload

<body>
 ../Rest of the code
<script>
    // js code
</script>
</body>

Else if you still want to load the code in header use

`window.onload` = function() {
   // your code
};

Another option you can explore is DOMContentLoaded

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    // your code here
  });
</script>

DEMO

edited Mar 17 '17 at 07:40

answered Mar 17 '17 at 07:34

brk

48,835
10
56
78

Should you really answer a typographical mistake? – Rajesh Mar 17 '17 at 07:34
1

Let this answer be here.Let people know there are some acting dude who down vote answers just because of formatting issue. – brk Mar 17 '17 at 07:41
*formatting issue*? So you see a typographical question and do not vote to close and answer it. Please tell us what will this question add to the portal? I have nothing against anyone. Yes I downvote for missing explanation, but that is to encourage adding explanation and I retract my vote once added. Also lets not debate, but answering a typo mistake is just wrong – Rajesh Mar 17 '17 at 07:46
@brk he might be thinking answering is wrong but commenting is correct on typ error he himself has commented about typo mistake and correction lol :) – Abhinav Mar 17 '17 at 07:47
I dont know if some people are so blind that the cannot see this line 'The issue is your are loading the script before the DOM is ready. In such case document.getElementById will not work as the element is not present in DOM'. Those lines for visible even before the formatting. For them it is not explanation. I think those lines are from some fantasy stories. Yes better not to debate. Maturity is not something which one can buy from a mart. Thanks – brk Mar 17 '17 at 07:50
@brk Please see my initial comments under question. I have already marked it as duplicate. Also please guys mind the tone. There is a reason SO provides feature to close question if its a typographical mistake or duplicate. A user with your rep should know and **should use it**. Also, you can flag your answer to community for verification if you think I'm wrong. Have a good day :-) – Rajesh Mar 17 '17 at 07:54

Can anybody help me in the following Javascript code? I'm not able to get the output

2 Answers2