Q:

Find the position of a number from a list of sorted numbers in a table

I am trying to find the position of an input value from a list of input values in a table then display the position. This is after sorting the values from highest to lowest value.
In the example below, I expect the input with value of 10 to be position 2. Similarly, if I would test it with input with value of 45 the position will be 1 and so on.
I have tried the code below but I get a -1 position

<script type="text/javascript">
  // Get the values as numbers
  var marks = document.getElementsByClassName('sm');
  var valArr = Array.prototype.map.call(marks, function(el) {
    return parseInt(el.value)
  });
  // Sort value array in descending order
  var marks = valArr.sort(function(a, b) {
    return b - a
  });
</script>
<table id="tableID" width="200" border="1">
  <tr>
    <td width="122" class="">
      <input name="name" class="sm" id="sm" type="text" value="4" />
    </td>
    <td width="62" class="pos"></td>
  </tr>

  <tr>
    <td class="">
      <input name="name" class="sm" id="sm1" type="text" value="6" />
    </td>
    <td class="pos1"></td>
  </tr>

  <tr>
    <td class="">
      <input name="name" class="sm" id="sm2" type="text" value="10" />
    </td>
    <td class="pos2">
      <script type="text/javascript">
        var marksID = document.getElementById('sm2').value;
        var mark = parseInt(marksID);

        var valPos = marks.indexOf(mark);
        document.getElementsByClassName('pos2')[0].textContent = valPos;
      </script>
    </td>
  </tr>
  <tr>
    <td class="">
      <input name="name" class="sm" id="sm3" type="text" value="45" />
    </td>
    <td class="pos3"></td>
  </tr>
  <tr>
    <td class="">
      <input name="name" class="sm" id="sm4" type="text" value="1" />
    </td>
    <td class="pos4"></td>
  </tr>
</table>

A:

I figured out .Using DOMContentLoaded as suggested by Steven P on one of the comments. Here is the demo of what i made. A good way of saying position of numbers in a list after sorting from highest to lowest. 

<table id="tableID" width="200" border="1">
  <tr>
    <td width="122" class=""> <input name="name" class="sm" id="sm" type="text" value="4" /> </td>
    <td width="62" class="pos"></td>
  </tr>
  
    <tr>
    <td class=""> <input name="name" class="sm" id="sm1" type="text" value="6" />  </td>
    <td class="pos1">  </td>
  </tr>
  
    <tr>
    <td class=""> <input name="name" class="sm" id="sm2" type="text" value="10" /> </td>
    <td class="pos2">

</td>
  </tr>
    <tr>
      <td class=""> <input name="name" class="sm" id="sm3" type="text" value="6" /> </td>
      <td class="pos3">
<script type="text/javascript">


document.addEventListener("DOMContentLoaded", function(event) {
 
var marksID3 =  document.getElementById('sm3').value;
var mark3 = parseInt(marksID3);
//alert (mark3)

var valPos3 = marks.indexOf(mark3);
var valPost3 = parseInt(valPos3 + 1);

document.getElementsByClassName('pos3')[0].textContent = valPost3;


});

</script></td>
    </tr>
    <tr>
      <td class=""> <input name="name" class="sm" id="sm4" type="text" value="45" /> </td>
      <td class="pos4">
<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function(event) {
var marksID4 =  document.getElementById('sm4').value;
var mark4 = parseInt(marksID4);
//alert (mark4)

var valPos4 = marks.indexOf(mark4);
var valPost4 = parseInt(valPos4 + 1);

document.getElementsByClassName('pos4')[0].textContent = valPost4;
});
</script></td>
    </tr>
</table>
<script type="text/javascript">
// Get the values as numbers

var marks =  document.getElementsByClassName('sm');
var valArr = Array.prototype.map.call(marks, function(el) {
  return parseInt(el.value)
});
// Sort value array in descending order
var marks = valArr.sort(function(a, b) {
  return b-a
});


</script>

If there are any other good suggestions or improvements i will highly appreciate

