Javascript onclick function undefined

Question

I have problem with onclick function

My link

<a id="reply" onclick="replyFunction({{$review->id}})"class="right-button">Reply</a>

Function:

function replyFunction(id){
  $('#reply').closest('div').append( $('.replyform'));
  $('.replyform').show();
  $('.replyform').attr('action', "/reply/submit/" + id);              
}

Somehow this doesnt work I am getting

(index):155 Uncaught ReferenceError: replyFunction is not defined at HTMLAnchorElement.onclick

I have included the file and it should work i think.

What I am trying to do is to pass id to the function. Basically a user presses reply button onclick function should send parent id and with javascript I should change form that user will fill action with the parent id so I get the right route (I am working with laravel).

P.S. If there is an easier way to do this that I am missing would be glad to hear it.

Place your script inside the body tag. <script>function replyFunction(id){ }</script> — Hiren Gohel
– Hiren Gohel, Commented Jan 31, 2018 at 8:43
"I have included the file and it should work i think." you have to be sure before asking. Please check your browser's developer console. — Federico klez Culloca
– Federico klez Culloca, Commented Jan 31, 2018 at 8:43
Have you defined replyFunction() within another function? Such as a jQuery document.ready event handler? If so, that's the problem. It needs to be at global level. Also note that using on* event attributes is an outdated bad practice which should be avoided. Use unobtrusive event handlers instead. — Rory McCrossan
– Rory McCrossan, Commented Jan 31, 2018 at 8:44
I am using a different file and I include it before </body> tag, I tried alerting in that file outside the function and it worked. — zerociudo
– zerociudo, Commented Jan 31, 2018 at 8:46
For this to work, the function must be known already at the point where the browser encounters this HTML element - meaning, you can not embed the script only later on, further down the page. But since you are using jQuery already, you should do this properly to begin with - use its methods to bind the event handlers, and put the id you need into a custom data attribute, so that the handler function can read it from there. And btw., using a link for this is rather wrong as well - if it doesn’t link anywhere, and is only used to trigger functionality via JS, then it should be a button. — C3roe
– C3roe, Commented Jan 31, 2018 at 8:54

denns · Accepted Answer · 2018-01-31 12:56:08Z

3

If your are using jQuery anyway you should set the eventlistener there. And as replyFunction is a callback, it will get an event as parameter and not the given value.

You should

<div>
  <a id="reply" data-reviewId="{{$review->id}}" class="right-button">Reply</a>
</div>

and

(function ($) {
    $('#reply').on('click',function(e){
        e.preventDefault(); // do not follow the link or move to top
        var replyId = $(this).attr('data-reviewId');
        $(this).closest('div').append( $('.replyform'));
        $('.replyform')
            .show()
            .attr('action', "/reply/submit/" + replyId);
    })
})(jQuery);

BUT Thats not what you intend to do, I guess. I updated the codepen.

If you want to add a form and dynamically change its action you should clone a dummy and add it to the desired place, if there are more than one form on the page. If there is only one form, you can give it an id and change the attribute via the id.

edited Jan 31, 2018 at 12:56

answered Jan 31, 2018 at 8:50

denns

1,1511 gold badge12 silver badges26 bronze badges

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

3 Comments

zerociudo Over a year ago

Thanks can call function now but somehow it did not change the attribute

denns Over a year ago

i updated the script again, maybe you forgot to wrap your function into that self-executing function!?

zerociudo Over a year ago

It worked, I am sorry for not coming back here completely forgot it. Thanks for your help

S. Stumm · Accepted Answer · 2018-01-31 08:53:19Z

0

You could do it only on the script side:

var reply = document.getElementById("reply"); // $("#reply")
var review = document.getElementById("review"); // $("#reply")

And then reference your function onclick

reply.onclick = () => { replyFunction(review); };

answered Jan 31, 2018 at 8:53

S. Stumm

2901 silver badge9 bronze badges

Collectives™ on Stack Overflow

Javascript onclick function undefined

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