How to correctly execute a function JS with onclick?

Question

I'm trying to execute a function by clicking on a span, but it tells me that it is undefined.

$(document).ready(function() {
  function callTo(param) {
    alert(param);
  }
});

.file-up {
  background: #f5f5f5 none repeat scroll 0 0;
  border: 1px solid #ccc;
  color: #383f45;
  font-size: 12px;
  margin-bottom: 10px;
  padding: 6px;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

<div>
  <span class="file-up" onclick="callTo('test')">Click to call</span>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Better way is use addEventListener('click', () => {}) than onclick — Kamil Naja
– Kamil Naja, Commented Jul 17, 2018 at 15:40
callTo is only available in the anonymous function you're passing to $(document).ready(). — Andreas
– Andreas, Commented Jul 17, 2018 at 15:42
callTo is hidden inside the function scope of the ready callback, it's never exported. — Halcyon
– Halcyon, Commented Jul 17, 2018 at 15:42
And how should I proceed if my function should be able to be executed in different HTML elements with different parameters? I mean, I was using onclick that way, since +15 elements must be able to execute that function with their own parameters — Arnell Vasquez C
– Arnell Vasquez C, Commented Jul 17, 2018 at 17:13

samar taj Shaikh · Accepted Answer · 2018-07-17 18:17:18Z

1

<!DOCTYPE html>
<html>
<head>
    <title>
        sample
    </title>
</head>
<body>
    <script>
        function callTo(param) {
            alert(param);
        }
    </script>
    <div>
        <span class="file-up" id="index" onclick="callTo('test')">
            Click to call
        </span>
    </div>
</body>

This is a working example without using jQuery, just by vanilla javascript. Insert it and use it directly. If you want me to post an answer which uses only jQuery for the stated task that you want to accomplish then please let me know.

This is code using jQuery, as you asked -

<!DOCTYPE html>
<html>
<head>
    <title>
        sample
    </title>
</head>
<body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
      $('#index').click (function callTo() {
        alert("Your values is :"+ $(this).data("value"));
      });
    });
</script>
<div>
    <span class="file-up" id="index" data-value="test">
        Click to call
    </span>
</div>

edited Jul 17, 2018 at 18:17

answered Jul 17, 2018 at 16:38

samar taj Shaikh

1,18511 silver badges18 bronze badges

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

3 Comments

Arnell Vasquez C Over a year ago

Greetings, I would like to see the show with jquery

samar taj Shaikh Over a year ago

Okay, no problem, but, first tell me this, Is my logic correct ?, Is this what you wanted ?

Arnell Vasquez C Over a year ago

Yes, I just tried as you say and it works for my case

Seva Kalashnikov · Accepted Answer · 2018-07-17 15:46:13Z

1

Try to move your function definition away from $(documents).ready

<script>
    function callTo(param) {
        alert(param);
    }
</script>

Or define event listener like

<script>
    $(document).ready(function() {
        $('.file-up').click(function() {
            //action
        });
    });
</script>

(I'd better give it an id in this case and change the selector to #id instead of .file-up because other elements can have the same class applied)

answered Jul 17, 2018 at 15:46

Seva Kalashnikov

4,4522 gold badges26 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to correctly execute a function JS with onclick?

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