Javascript function not working

Question

My jsp page contains a table ,the code for the same is given below:

<table width="400" border="1" cellpadding="0" cellspacing="1" id="student_table">
<thead>
  <tr>
    <th scope="row">ID</th>
    <th scope="row">Name</th>
    <th scope="row">Country</th>
    <th scope="row">Marks</th>
    <th scope="row">Rank</th>
  </tr>

<tbody>
  <tr>
    <td>1</td>
    <td>Smith</td>
    <td>US</td>
    <td><input type="text" name="marks" value="40"/></td>
    <td>20</td>
  </tr>
  <tr>
    <td>2</td>
    <td>John</td>
    <td>England</td>
    <td><input type="text" name="marks" value="80"/></td>
    <td>29</td>
  </tr>
    <tr>
    <td>3</td>
    <td>William</td>
    <td>Australia</td>
    <td><input type="text" id="nm" name="marks" value="60" onblur="return(myFunction1())"/></td>
    <td>33</td>
  </tr>
    <tr>
    <td>4</td>
    <td>Michael</td>
    <td>Germany</td>
    <td><input type="text" name="marks" value="90"/></td>
    <td>29</td>
  </tr>

I have a javascript function which compares the values in two cells. But the javascript function is not working. I cannot find out why. Please anyone help me with a solution. I know that there are other ways to validate. but i need to get it done this way. This is an example of a big program which i need to get done in this way. Please help

function myfunction11(){

       var myTable = document.getElementById('student_table').tBodies[0];

     // first loop for each row 
    for (var r=0, n = myTable.rows.length; r < n; r++) {
                   // this loop is getting each colomn/cells
        for (var c = 0, m = myTable.rows[r].cells.length; c < m; c++) {

           if(myTable.rows[r].cells[c].childNodes[0].value){

                var rank = myTable.rows[r].cells[4].innerText;

                var marks = myTable.rows[r].cells[c].childNodes[0].value;

                                    if(rank>marks){

                                        alert("rank cannot be greater than marks:"+marks);
                                        myTable.rows[r].cells[c].childNodes[0].value="0";
                                        return false;
                                    }


           }
        }
    } 
    return true;
    }

really? your code has this sudden indentation of 20 characters for no reason at all? — Jaromanda X
– Jaromanda X, Commented May 30, 2017 at 5:27

Scott Marcus · Accepted Answer · 2017-05-30 06:10:34Z

1

In your HTML, you have:

onblur="return(myFunction1())

but your actual function's name is:

myfunction11()

Once the names are matched, your function runs. But, you do have one (at least) issue with your code. You are comparing rank > marks but marks comes from an input field. All HTML data is strings, so you must convert that string to a number to do any kind of mathematical operation on it. Also, innerText is non-standard code, use textContent instead. See comments in code.

function myFunction1(){

  var myTable = document.getElementById('student_table').tBodies[0];

  // first loop for each row 
  for (var r=0, n = myTable.rows.length; r < n; r++) {
  
    // this loop is getting each colomn/cells
    for (var c = 0, m = myTable.rows[r].cells.length; c < m; c++) {

      if(myTable.rows[r].cells[c].childNodes[0].value){

        // All HTML data is strings. If you expect a number, you have to convert it.
        // Also, use textContent to get the text of an element. innerText is non-standard
        var rank = parseInt(myTable.rows[r].cells[4].textContent,10);
        var marks = parseInt(myTable.rows[r].cells[c].childNodes[0].value, 10);

        if(rank > marks){
          alert("rank cannot be greater than marks: " + marks);
          myTable.rows[r].cells[c].childNodes[0].value = "0";
          return false;
        }
      }
    }
  } 
  
  return true;
}

<table width="400" border="1" cellpadding="0" cellspacing="1" id="student_table">
<thead>
  <tr>
    <th scope="row">ID</th>
    <th scope="row">Name</th>
    <th scope="row">Country</th>
    <th scope="row">Marks</th>
    <th scope="row">Rank</th>
  </tr>
<tbody>
  <tr>
    <td>1</td>
    <td>Smith</td>
    <td>US</td>
    <td><input type="text" name="marks" value="40"/></td>
    <td>20</td>
  </tr>
  <tr>
    <td>2</td>
    <td>John</td>
    <td>England</td>
    <td><input type="text" name="marks" value="80"/></td>
    <td>29</td>
  </tr>
    <tr>
    <td>3</td>
    <td>William</td>
    <td>Australia</td>
    <td><input type="text" id="nm" name="marks" value="60" onblur="return(myFunction1())"/></td>
    <td>33</td>
  </tr>
    <tr>
    <td>4</td>
    <td>Michael</td>
    <td>Germany</td>
    <td><input type="text" name="marks" value="90"/></td>
    <td>29</td>
  </tr>
</table>

Now, to correct your code and have it use modern standards so that it works when you leave any of the fields, we'd write:

// Don't use inline HTML event handling attributes like "onclick", "onblur", etc.
// Instead, use modern standards of separating all your JavaScript from your HTML

// Get a collection of all the input fields. There are many ways to do this, but here
// we are getting all the elements that use the marks class (HTML adjusted above)
var inputs = document.querySelectorAll(".marks");

// Loop through the collection and assign the checkMarks function as the blur event
// callback funciton to each of them.
for(var i = 0; i < inputs.length; i++){
  inputs[i].addEventListener("blur", checkMarks);
}

function checkMarks(evt){
  // Just check the marks and the rank next to it

  // All HTML data is strings. If you expect a number, you have to convert it.
  // The parseInt() function can extract numbers from a string.
  
  // Also, use textContent to get the text of an element. innerText is non-standard
  
  // All event handling functions automatically recieve an argument representing the
  // event that they are responding to (evt in this case). That event object, in turn,
  // has a property (target) that references the element that triggered the event in the
  // first place. To get to the table cell that comes after an input field, we start at
  // the input field (evt.target) and then get the parent element of that (the <td> element
  // that the input is inside of) and then the next element that is a sibling of that (the <td> 
  // that contains the rank.
  var rank = parseInt(evt.target.parentNode.nextElementSibling.textContent, 10);
  
  // To get the value of the input, just look at evt.target's value
  var marks = parseInt(evt.target.value, 10);

  if(rank > marks){
    alert("rank cannot be greater than marks: " + marks);
    evt.target.value = "0";
  }
}

<table width="400" border="1" cellpadding="0" cellspacing="1" id="student_table">
<thead>
  <tr>
    <th scope="row">ID</th>
    <th scope="row">Name</th>
    <th scope="row">Country</th>
    <th scope="row">Marks</th>
    <th scope="row">Rank</th>
  </tr>
<tbody>
  <!-- Form elements should generally have unique names so you can tell them apart when
       they submit their data. -->

  <tr>
    <td>1</td>
    <td>Smith</td>
    <td>US</td>
    <td><input type="text" class="marks" name="US_Marks" value="40"/></td>
    <td>20</td>
  </tr>
  <tr>
    <td>2</td>
    <td>John</td>
    <td>England</td>
    <td><input type="text" class="marks" name="England_Marks" value="80"/></td>
    <td>29</td>
  </tr>
    <tr>
    <td>3</td>
    <td>William</td>
    <td>Australia</td>
    <td><input type="text" id="nm" class="marks" name="Austrailia_Marks" value="60"></td>
    <td>33</td>
  </tr>
    <tr>
    <td>4</td>
    <td>Michael</td>
    <td>Germany</td>
    <td><input type="text" class="marks" name="Germany_Marks" value="90"/></td>
    <td>29</td>
  </tr>
</table>

edited May 30, 2017 at 6:10

answered May 30, 2017 at 5:26

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

11 Comments

Scott Marcus Over a year ago

You can see it works here in this snippet. You have two mistakes in the name myfunction11. Once you fix them both, it will work as I've shown.

Leeza Over a year ago

oh sry .It was a mistake.I changed it to myfunction11(). Even then its not working. :(

Scott Marcus Over a year ago

@Leeza Have you tried the code I've posted here? You can see that once the function names match it works. If it is still not working for you, then you have an additional problem somewhere else. What does your developer's console show?

Leeza Over a year ago

Does it work? while running in the snippet. I am just getting the table. but onblur function is not working

Scott Marcus Over a year ago

@Leeza It sure does. Once you tab out of the Australia field, and passed the Germany field, the 90 for Germany is highlighted. If you type 100 in the US field and hit TAB 3 times (to cause the blur event for the Australia field to fire), you get an error message saying that 100 is not allowed. It is working.

|

PenAndPapers · Accepted Answer · 2017-05-30 05:27:58Z

0

try changing onblur="return(myFunction1())" to onblur="return(myFunction11())"

answered May 30, 2017 at 5:27

PenAndPapers

2,1089 gold badges34 silver badges65 bronze badges

Collectives™ on Stack Overflow

Javascript function not working

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related