Javascript : function statement requires a name

Question

I have a html table with a row that looks like:

<tr>
    <td><input type="checkbox" name="check[]" value="265"></td>   
                 <td>265</td>
                    <td>NO MATCH</td>
                    <td>NO MATCH</td>
                    <td>No</td>
                    <td>0</td>
                    <td>f79a8316891</td>
              </tr>

I am trying to build a jquery function that will highlight a cell only if it starts with "NO" . So far I have:

$( "td" ).hover( function() {
    var contents = $( this ).html() ;
    if (contents.match("^NO")) {
            function() {
            $( this ).append( $( "<span> ***</span>" ) );
            }, function() {
            $( this ).find( "span:last" ).remove();
            }
    }   


  });

But I'm getting the error in the title. What am I doing wrong?

The syntax for your hover() function is way off. What exactly are you trying to do? — Rory McCrossan
– Rory McCrossan, Commented Jan 21, 2015 at 16:46
You define a function with no name and no immediate invocation. There is no way for that function to be called (that's why you get the error). Also, don't define a function in an if statement. This is bad because JavaScript doesn't have block scope for defining functions. — Halcyon
– Halcyon, Commented Jan 21, 2015 at 16:47
I started from the example at api.jquery.com/hover to try to build this. i then tried to put an if statement around it. — user1592380
– user1592380, Commented Jan 21, 2015 at 17:25

rwacarter · Accepted Answer · 2015-01-21 16:55:12Z

5

You have the functions in the wrong place. Try something like this:

$( "td" ).hover( function() {
    var contents = $( this ).html() ;
    if (contents.match("^NO")) {
        $( this ).append( $( "<span> ***</span>" ) );

    }   
}, function() {
        $( this ).find( "span:last" ).remove();
});

The jQuery hover function takes two functions as it's parameters, the first for 'mouse over' and the second for 'mouse out'. You simply put these functions in the wrong place in your original code. For more information on hover, see http://api.jquery.com/hover/

edited Jan 21, 2015 at 16:55

answered Jan 21, 2015 at 16:46

rwacarter

2,0143 gold badges17 silver badges29 bronze badges

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

3 Comments

Jamiec Over a year ago

Its worth being clear (for the sake of the OP and future visitors) that the problem was that the jquery hover method takes 2 functions as arguments - one to execute when the mouse goes over and the second when the mouse moves out of the element.

rwacarter Over a year ago

@Jamiec Thanks, I wasn't very detailed on the explanation, I will update my answer

user1592380 Over a year ago

Thanks Jamiec, I started from the example at api.jquery.com/hover to try to build this. I then tried to put an if statement around it. I didn't understand that there were 2 arguments for hover.

Moob · Accepted Answer · 2015-01-21 17:14:44Z

There's no need to add and remove stuff on hover. Simply find all the cells that match your criteria (using jQuery's filter()) then give them a class. You can then style .nomatch elements as you see fit. Here I've added the triple-star text on hover as per your requirements.

$(function(){
  var key = "NO";
  var $cellsBeginWithNo = $("td").filter(function(){
    var $this = $(this);
    if($this.text().indexOf(key) === 0){ //if text begins with [key]
        $this.addClass("nomatch");       //give it a class
        return $this;                    //add it to our collection
    }
    return false;
  });
  /* 
    Now you have a jQuery collection of matched elements that you can apply further functions to if you like. EG: 
    $cellsBeginWithNo.on("click", function(){alert("click");});
  */
});

td.nomatch {
    background-color:#ffeeee;
}
td.nomatch:hover:after {
    content : " ***";
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="checkbox" name="check[]" value="265"></td>   
        <td>265</td>
        <td>NO MATCH</td>
        <td>NO MATCH</td>
        <td>No</td>
        <td>0</td>
        <td>f79a8316891</td>
    </tr>
</table>

Collectives™ on Stack Overflow

Javascript : function statement requires a name

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related