my JavaScript seems to be ignoring the first element in my array

Question

I am working with the grading table in Moodle and I want to add a flag that says "student has added comments, please review" wherever they have added a comment. Unfortunately the comments get loaded with Ajax (or something similar) when you click the comment link. After the student has submitted an assignment, Moodle adds the text "Comments (0)" to the student's row in the grading table. (Before the assignment is submitted, the cell is blank.)

So I have tried to find the cells which contain the text 'Comments', and then check if there is a zero in the comments span.

I have tidied up the HTML a bit, but I left cell c10 as it actually is on Moodle.

if (!document.getElementsByClassName('gradingtable')[0]) {
   /* do nothing */ 
} else {
    var table = document.getElementsByClassName('gradingtable')[0];
    var comments = table.getElementsByClassName('c10');
    
    for (var i=0, len=comments.length; i<len; i++){
        var commentText = comments[i].innerText;
        
        if (commentText.search('Comments') > -1){
            var enumerator = comments[i].getElementsByTagName('span')[0];
            
            if (enumerator.innerText.search('0') > -1){
                       // do nothing
            } else {
                var container = comments[i].getElementsByClassName('commentscontainer')[0];
                container.insertAdjacentHTML('afterend', '<div class="bluemsg">Student has added comments, please review.</div>'); 
            }
        }
    }
}

.bluemsg {
  background-color: #99ccff;
}


/* border and shading added for ease of viewing */
td { border: 1px solid #666 }

tr:nth-child(even) {background: #cecece}
tr:nth-child(odd) {background: #ffffff}

<h3> Moodle grading table (sample HTML)</h3>
<table class="gradingtable">
  <thead>
    <th>Col 0</th>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th>Col 5</th>
    <th>Col 6</th>
    <th>Col 7</th>
    <th>Col 8</th>
    <th>Col 9</th>
    <th>Col 10</th>
    <th>Col 11</th>
    <th>Col 12</th>
    <th>Col 13</th>
    <th>Col 14</th>
    <th>Col 15</th>
  </thead>
  <tbody>
    <tr>
      <td class="cell c0" id="mod_assign_grading_r0_c0">some text</td>
      <td class="cell c1" id="mod_assign_grading_r0_c1">some text</td>
      <td class="cell c2" id="mod_assign_grading_r0_c2">some text</td>
      <td class="cell c3 idnumber" id="mod_assign_grading_r0_c3">some text</td>
      <td class="cell c4 email" id="mod_assign_grading_r0_c4">some text</td>
      <td class="cell c5" id="mod_assign_grading_r0_c5">
        <div class="submissionstatus">No submission</div>
        <div class="overduesubmission">
          <font color="red">Assignment overdue </font>
        </div>
      </td>
      <td class="cell c6" id="mod_assign_grading_r0_c6">some text</td>
      <td class="cell c7" id="mod_assign_grading_r0_c7">
          some text</td>
      <td class="cell c8" id="mod_assign_grading_r0_c8">some text</td>
      <td class="cell c9" id="mod_assign_grading_r0_c9">
        some text
      </td>
      <td class="cell c10 jello" id="mod_assign_grading_r0_c10">
        <div class="commentscontainer">
          <div style="display:none" id="cmt-tmpl">
            <div class="comment-message">
              <div class="comment-message-meta"><span class="picture">___picture___</span><span class="user">___name___</span> - <span class="time">___time___</span></div>
              <div class="text">___content___</div>
            </div>
          </div>
          <div class="mdl-left"><a class="showcommentsnonjs" href="https://moodle.someurl.com/mod/assign/view.php?id=823272&amp;rownum=0&amp;useridlistid=59bfbd683690c374534060&amp;action=grading&amp;nonjscomment=1&amp;comment_itemid=281127&amp;comment_context=1272111&amp;comment_component=assignsubmission_comments&amp;comment_area=submission_comments">Show comments</a>
            <a
              class="comment-link" id="comment-link-59bfbd687894d" href="#" role="button" aria-expanded="false"><img id="comment-img-59bfbd687894d" src="https://moodle.someurl.com/theme/image.php/aardvark/core/1505694062/t/collapsed" alt="Comments" title="Comments"><span id="comment-link-text-59bfbd687894d">Comments (0)</span></a>
              <div id="comment-ctrl-59bfbd687894d"
                class="comment-ctrl">
                <ul id="comment-list-59bfbd687894d" class="comment-list">
                  <li class="first"></li>
                </ul>
                <div id="comment-pagination-59bfbd687894d" class="comment-pagination"></div>
                <div class="comment-area">
                  <div class="db"><textarea name="content" rows="2" id="dlg-content-59bfbd687894d" cols="20" style="color: grey;"></textarea></div>
                  <div class="fd" id="comment-action-59bfbd687894d"><a id="comment-action-post-59bfbd687894d" href="#">Save comment</a><span> | </span><a id="comment-action-cancel-59bfbd687894d" href="#">Cancel</a></div>
                </div>
                <div class="clearer"></div>
              </div>
          </div>
        </div>
      </td>
      <td class="cell c11" id="mod_assign_grading_r0_c11">-</td>
      <td class="cell c12" id="mod_assign_grading_r0_c12"></td>
      <td class="cell c13" id="mod_assign_grading_r0_c13">some text</td>
      <td class="cell c14" id="mod_assign_grading_r0_c14">some text</td>
      <td class="cell c15" id="mod_assign_grading_r0_c15">some text</td>
    </tr>
    <tr>
      <td class="cell c0" id="mod_assign_grading_r1_c0">some text</td>
      <td class="cell c1" id="mod_assign_grading_r1_c1">some text</td>
      <td class="cell c2" id="mod_assign_grading_r1_c2">some text</td>
      <td class="cell c3 idnumber" id="mod_assign_grading_r1_c3">some text</td>
      <td class="cell c4 email" id="mod_assign_grading_r1_c4">some text</td>
      <td class="cell c5" id="mod_assign_grading_r1_c5">
        <div class="submissionstatus">No submission</div>
        <div class="overduesubmission">
          <font color="red">Assignment overdue </font>
        </div>
      </td>
      <td class="cell c6" id="mod_assign_grading_r1_c6">some text</td>
      <td class="cell c7" id="mod_assign_grading_r1_c7">
          some text</td>
      <td class="cell c8" id="mod_assign_grading_r1_c8">some text</td>
      <td class="cell c9" id="mod_assign_grading_r1_c9">
        some text
      </td>
      <td class="cell c10 jello" id="mod_assign_grading_r1_c10">
        <div class="commentscontainer">
          <div style="display:none" id="cmt-tmpl">
            <div class="comment-message">
              <div class="comment-message-meta"><span class="picture">___picture___</span><span class="user">___name___</span> - <span class="time">___time___</span></div>
              <div class="text">___content___</div>
            </div>
          </div>
          <div class="mdl-left"><a class="showcommentsnonjs" href="https://moodle.someurl.com/mod/assign/view.php?id=823272&amp;rownum=0&amp;useridlistid=59bfbd683690c374534060&amp;action=grading&amp;nonjscomment=1&amp;comment_itemid=281127&amp;comment_context=1272111&amp;comment_component=assignsubmission_comments&amp;comment_area=submission_comments">Show comments</a>
            <a
              class="comment-link" id="comment-link-59bfbd687894d" href="#" role="button" aria-expanded="false"><img id="comment-img-59bfbd687894d" src="collapsed.png" alt="Comments" title="Comments"><span id="comment-link-text-59bfbd687894d">Comments (1)</span></a>
              <div id="comment-ctrl-59bfbd687894d"
                class="comment-ctrl">
                <ul id="comment-list-59bfbd687894d" class="comment-list">
                  <li class="first"></li>
                </ul>
                <div id="comment-pagination-59bfbd687894d" class="comment-pagination"></div>
                <div class="comment-area">
                  <div class="db"><textarea name="content" rows="2" id="dlg-content-59bfbd687894d" cols="20" style="color: grey;"></textarea></div>
                  <div class="fd" id="comment-action-59bfbd687894d"><a id="comment-action-post-59bfbd687894d" href="#">Save comment</a><span> | </span><a id="comment-action-cancel-59bfbd687894d" href="#">Cancel</a></div>
                </div>
                <div class="clearer"></div>
              </div>
          </div>
        </div>
      </td>
      <td class="cell c11" id="mod_assign_grading_r1_c11">-</td>
      <td class="cell c12" id="mod_assign_grading_r1_c12">-</td>
      <td class="cell c13" id="mod_assign_grading_r1_c13">some text</td>
      <td class="cell c14" id="mod_assign_grading_r1_c14">some text</td>
      <td class="cell c15" id="mod_assign_grading_r1_c15">some text</td>
    </tr>
  </tbody>
</table>

vext · Accepted Answer · 2017-11-16 16:30:17Z

2

It looks like you are checking for zero in a different string, one of the span tags, rather than the comment/number string. You can replace: if (enumerator.innerText.search('0') > -1){ With: if (commentText.search('0') > -1){

You may not need the enumerator variable at all.

answered Nov 16, 2017 at 16:30

vext

363 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

my JavaScript seems to be ignoring the first element in my array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related