javascript - Trying to define a function inside onclick - Stack Overflow

admin管理员组

文章数量:1330844

I am trying to define a function inside onclick. It is not working and no error is showing on the console. I have called the function from the bottom of the page and I have defined the function inside onclick() but it is not working.

 <div id="content-wrapper">

          <div class="row">
            <div class="col-lg-12">
            <div class="main-box clearfix">
            <div class="clearfix">
              <div class="mon_page gsb1">
              <div class="hdr">
                   <div class="row">
                <div class="col-md-4">
                  <h4>Users</h4>
                </div>
                 <div class="col-md-5">
//this is not working  
  <p><a href="" onclick="function send_Data(data){
                    download_csv(data)};">Download </a></p>
                </div>



                <div class="col-md-3 pull-right">
                      <%=render 'search'%>
                </div> 
              </div>    
                     </div>


           <% download_data = []%>

              <%@users.each do |user|%>     

                 <div id='content' class="tab-content">
                    <div class="tab-pane active" id="all">
                      <div class="row">
                      <div class="col-md-4">
                        <p><b>User Name</b> <span class="blue"> <%=user.name %> </span> </p>
                        <%download_data.push(user.name)%>
                       <p><b>user_code</b> <span class="blue"> <%=user.user_code %> </span>  </p>
                         <%download_data.push(user.user_code)%>
                       <p><b>phone</b> <span class="blue"><%=user.phone %></span>  </p>
                        <%download_data.push(user.phone)%>

                    </div>
                   </div>
               </div>

              <%end%>

              <div data-no-turbolink>
                <%if @users.length > 1%>
                  <%= will_paginate @users %>
                <% end %>
              </div>  
                </div>
              </div>
              </div>
            </div>
          </div>

          <footer id="footer-bar" class="row">
            <p id="footer-copyright" class="col-xs-12">
              Powered by abcadas
            </p>
          </footer>
        </div>
      </div>
    </div>
  </div>
  <script >
       $("#zsales").attr("class","active")

       send_Data("<%=download_data%>")
  </script>

I am trying to define a function inside onclick. It is not working and no error is showing on the console. I have called the function from the bottom of the page and I have defined the function inside onclick() but it is not working.

 <div id="content-wrapper">

          <div class="row">
            <div class="col-lg-12">
            <div class="main-box clearfix">
            <div class="clearfix">
              <div class="mon_page gsb1">
              <div class="hdr">
                   <div class="row">
                <div class="col-md-4">
                  <h4>Users</h4>
                </div>
                 <div class="col-md-5">
//this is not working  
  <p><a href="" onclick="function send_Data(data){
                    download_csv(data)};">Download </a></p>
                </div>



                <div class="col-md-3 pull-right">
                      <%=render 'search'%>
                </div> 
              </div>    
                     </div>


           <% download_data = []%>

              <%@users.each do |user|%>     

                 <div id='content' class="tab-content">
                    <div class="tab-pane active" id="all">
                      <div class="row">
                      <div class="col-md-4">
                        <p><b>User Name</b> <span class="blue"> <%=user.name %> </span> </p>
                        <%download_data.push(user.name)%>
                       <p><b>user_code</b> <span class="blue"> <%=user.user_code %> </span>  </p>
                         <%download_data.push(user.user_code)%>
                       <p><b>phone</b> <span class="blue"><%=user.phone %></span>  </p>
                        <%download_data.push(user.phone)%>

                    </div>
                   </div>
               </div>

              <%end%>

              <div data-no-turbolink>
                <%if @users.length > 1%>
                  <%= will_paginate @users %>
                <% end %>
              </div>  
                </div>
              </div>
              </div>
            </div>
          </div>

          <footer id="footer-bar" class="row">
            <p id="footer-copyright" class="col-xs-12">
              Powered by abcadas
            </p>
          </footer>
        </div>
      </div>
    </div>
  </div>
  <script >
       $("#zsales").attr("class","active")

       send_Data("<%=download_data%>")
  </script>

• javascript
• jquery
• ruby-on-rails
• ruby-on-rails-4

Share Follow edited Aug 8, 2016 at 5:07 Blue 22.9k77 gold badges6666 silver badges9898 bronze badges asked Aug 8, 2016 at 5:05 NishthaNishtha 43322 gold badges66 silver badges1111 bronze badges 1

• I didn't got any relevant answer thats why i have not marked the questions as correct – Nishtha Commented Aug 8, 2016 at 11:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can define a self executing function something like this:

<p>
    <a href="" onclick="(function send_Data(data){
                                     download_csv(data)
                                   }
                        )(window.data);">Download</a>
</p>

assuming you have data defined in window scope. Refer this:

(function(scope){ ... })(scope)

whoops. almost 3 years too late. But something like this? Having it inside rather than having it called.

document.getElementById("yourButton").onclick = function {
    //define your function;
}

or jQuery:

$("#yourButton").click(function() {
   //define your function;
});

The other answers are usually what is best practice as it generally minimises clutter, plus you can use the same function over and over again

onclick="function send_Data(data){
                download_csv(data)};">Download </a></p>

You're doing it in the opposite way. you should call the function on onclick, and define it elsewhere. something like this:

<p><a href="" onclick="send_Data()">Download </a></p>

and in script:

<script >
   $("#zsales").attr("class","active")

   function send_Data(data){
       download_csv(data);
   };
</script>

By design, you rarely would ever define functions in onclick events. You define the functions elsewhere, and then call them using the onclick event handler.

<script type="text/javascript">
function sayHi()
{
    alert('Hi!');
}
</script>

<!--
    When the button is clicked,
    you don't want to define the function,
    you want to say hi!
  --->
<a href="#" onclick="sayHi()">

So to summarize, you want to just call your function from your <a> tag:

<a href="#" onclick="download_csv()"></a>

<script type="text/javascript">
function download_csv()
{
    send_Data("<%=download_data%>")
}
</script>

本文标签： javascriptTrying to define a function inside onclickStack Overflow