HTML javascript function call

Question

Can someone tell me why is the call to my function hideShow not working ?

<a id='plusMinus0' href='#' title='Afficher la liste des messages d erreurs' onclick='hideShow(0);'>

function hideShow(number){
     alert("i am here");
     $('#errMsgGroup'+number).toggle('slow', function() {
         if($('#plusMinus'+number).children('img').attr('src').indexOf('images/NORIA_minus.JPG') >= 0){
                $('#plusMinus'+number).children('img').attr('src', 'images/NORIA_plus.JPG');
                $('#plusMinus'+number).children('img').attr('title', 'hide errors');        
            }
            else{
                $('#plusMinus'+number).children('img').attr('src', 'images/NORIA_minus.JPG');
                $('#plusMinus'+number).children('img').attr('title', 'show errors');
            }
        });
     }

It might be worth posting a more complete version of your html and Javascript. — Ted
– Ted, Commented Jul 2, 2013 at 10:20
Still shows the alert for me, even with the new markup: jsfiddle.net/GYM38/1. If you want useful help, create a jsfiddle.net demo with the problem. — Felix Kling
– Felix Kling, Commented Jul 2, 2013 at 10:30
Well, the problem in the fiddle is that the function is defined inside the load event handler. That means it cannot be found by the inline event handler. The console shows the error ReferenceError: hideShow is not defined. Change onLoad in the select box to No wrap - in <head>. Since you said earlier that you don't get an error, I wonder if this is really the issue or you just didn't know how to use jsfiddle properly. — Felix Kling
– Felix Kling, Commented Jul 2, 2013 at 10:35

Sonu Sindhu · Accepted Answer · 2013-07-02 10:20:12Z

1

put your function within <script></script> tag

Like

<script>


function hideShow(number){
     alert("i am here");
     $('#errMsgGroup'+number).toggle('slow', function() {
         if($('#plusMinus'+number).children('img').attr('src').indexOf('images/NORIA_minus.JPG') >= 0){
                $('#plusMinus'+number).children('img').attr('src', 'images/NORIA_plus.JPG');
                $('#plusMinus'+number).children('img').attr('title', 'hide errors');        
            }
            else{
                $('#plusMinus'+number).children('img').attr('src', 'images/NORIA_minus.JPG');
                $('#plusMinus'+number).children('img').attr('title', 'show errors');
            }
        });
     }

</script>

answered Jul 2, 2013 at 10:20

Sonu Sindhu

1,80216 silver badges27 bronze badges

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

Comments

putvande · Accepted Answer · 2013-07-02 10:20:40Z

0

I guess you need to close your A-tag as well like <a id='plusMinus0' href='#' title='Afficher la liste des messages d erreurs' onclick='hideShow(0);'>hide / show</a>

answered Jul 2, 2013 at 10:20

putvande

15.3k3 gold badges37 silver badges51 bronze badges

4 Comments

Felix Kling Over a year ago

If you think that's the problem than you should also mention that JavaScript code belongs inside <script> tags.

Joseph Over a year ago

MY FUNCTION IS INSIDE THE SCRIPT TAGS ,AND MY a TAG IS CLOSED AS WELL I JUST DIDNT POST IT.

Felix Kling Over a year ago

@user2515601: How are we supposed to know that? Maybe you should post a more complete code example.

putvande Over a year ago

@FelixKling Sorry, it was a reply after someone else already mentioned that the function should be within the script blocks. That's why I didn't mention it.

DickieBoy · Accepted Answer · 2013-07-02 10:23:43Z

0

In addition to @sonusindhu and @putvande answers. You probably want a return false at the end of your javascript.

function hideShow(number){
  alert("i am here");
  $('#errMsgGroup'+number).toggle('slow', function() {
    if($('#plusMinus'+number).children('img').attr('src').indexOf('images/NORIA_minus.JPG') >= 0){
    $('#plusMinus'+number).children('img').attr('src', 'images/NORIA_plus.JPG');
       $('#plusMinus'+number).children('img').attr('title', 'hide errors');        
    }
    else{
      $('#plusMinus'+number).children('img').attr('src', 'images/NORIA_minus.JPG');
      $('#plusMinus'+number).children('img').attr('title', 'show errors');
    }
  });
  return false;
}

answered Jul 2, 2013 at 10:23

DickieBoy

4,9661 gold badge31 silver badges49 bronze badges

1 Comment

Joseph Over a year ago

OK GUYS, i found out what was causing the problem. It turned out that i have some parasite characters in my php file, some sort of ^M which i was only able to see with a cat -v, i looked it up on the net and found that by doing a dos2unix command on the files in question u delete all the undesired chars. It worked out for me. THANK YOU ALL FOR YOUR TIME.

Raghurocks · Accepted Answer · 2013-07-02 10:36:08Z

0

Try this

<html>
<head>
    <script type="text/javascript">
        function hideShow(number) {
            alert("i am here");
            $('#errMsgGroup' + number).toggle('slow', function () {
                if ($('#plusMinus' + number).children('img').attr('src').indexOf('images/NORIA_minus.JPG') >= 0) {
                    $('#plusMinus' + number).children('img').attr('src', 'images/NORIA_plus.JPG');
                    $('#plusMinus' + number).children('img').attr('title', 'hide errors');
                }
                else {
                    $('#plusMinus' + number).children('img').attr('src', 'images/NORIA_minus.JPG');
                    $('#plusMinus' + number).children('img').attr('title', 'show errors');
                }
            });
        }
    </script>
</head>
<body>
    <a id='plusMinus0' href='#' title='Afficher la liste des messages d erreurs' onclick='hideShow(0);'>Check</a>
</body>


</html>

answered Jul 2, 2013 at 10:36

Raghurocks

9258 silver badges20 bronze badges

2 Comments

Joseph Over a year ago

i am still not getting my alert :/

Raghurocks Over a year ago

I already checked it, I get alert. Once see for console errors, or else copy the html I have given into a sample page and run it you will get the alert :)

speti43 · Accepted Answer · 2013-07-02 10:40:06Z

0

Try this:

<a id='plusMinus0' href='#' onclick="hideShow(0)">Test</a>

<script>
  function hideShow(number) {
     alert(number);
  }
</script>

JSFiddle

EDIT:

I think it's more elegant to handle the event with JQuery:

with JQuery

<a id='plusMinus0' href='#'>Test</a>

<script>
    $(function() {
       $("#plusMinus0").click(function() {
           alert("pass parameter from an attribute " + $(this).attr("id"))
       });
    });
</script>

With # in href, after click your anchor navigates to top of page, to avoid this:

<a id='plusMinus0' href='javascript:;'>Test</a>

or leave the href attribute: Without href

edited Jul 2, 2013 at 10:40

answered Jul 2, 2013 at 10:25

speti43

3,0622 gold badges22 silver badges26 bronze badges

5 Comments

Felix Kling Over a year ago

If you use jQuery, then you should remove onclick="hideShow(0)".

Joseph Over a year ago

I am using the onclick bc i have multiple PLUSes so i need to pass a variable in the function definition.

speti43 Over a year ago

ok, it's your choice, but you can pass parameters via anchors attributes also.

Joseph Over a year ago

jsfiddle.net/pv33P/3 can u please tell why this simple test is not working ?

speti43 Over a year ago

Yes, on the left side change the framework extension "on load"=> no wrap - in head jsfiddle.net/pv33P/6

Collectives™ on Stack Overflow

HTML javascript function call

5 Answers 5

Comments

4 Comments

1 Comment

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

1 Comment

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related