Call a script when button clicked

Question

I have a script that helps to annotate an image. i Just want to run this script only when i click the button. I've tried to use the event onclick for the button but it is not working. Here is the code

<head>
    <script src="javascripts/jquery.js"></script>
    <script src="javascripts/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="stylesheets/jquery-ui.css">

    ////////////// those are the scripts that i use in the function //////
    <link rel="stylesheet" href="highlight.js/zenburn.css">
    <link rel="stylesheet" href="stylesheets/css/theme-dark/annotorious-dark.css" />
    <script src="highlight.js/highlight.pack.js"></script>
    <script src="javascripts/annotorious.min.js"></script>
    /////////////
    <script>
    $("#annotation").click(function() {
        hljs.initHighlightingOnLoad();
        //function of annotation
    });
    </script>
</head>
<body>
<button type="submit" id="annotation" >
    <img src="stylo.png"  style="width: 30px ; height:50px" alt="Submit">
</button>
</body>

But this is not working , i still have the script running when i load the page. I just need to call it when the button " annotation" is clicked.

"But this is not working" ? What is that ? Any error in console ? — Rayon
– Rayon, Commented May 23, 2016 at 9:18
no there is no errors. like i said , i just want to run the script only when button is clicked. But with the try that i made , it is not working because the script runs just after i load the page, without clicking the button. — yassine
– yassine, Commented May 23, 2016 at 9:21
What happens when you click the button? Does the page get refreshed? — SamGhatak
– SamGhatak, Commented May 23, 2016 at 9:22

Tirthraj Barot · Accepted Answer · 2016-05-24 08:59:03Z

Here you go

<script>
    $(document).ready(function(){
         $("#annotation").click( function()
           {
            alert("Hello!");
            // hljs.initHighlightingOnLoad(); //function of annotation
           });
    });
    </script>

    <button type="submit" id="annotation" > <img src="stylo.png"  style="width: 30px ; height:50px" alt="Submit"></button>

I dont know about your hljs.initHighlightingOnLoad(); function but as far as the function execution on button click, you have to write that code in $(document).ready() function. It works well as i already tested with an alert();

---------------------------UPDATED--------------------------------

I have tested it by using cdn of jquery and highlightjs

<head>
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script> 

    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>

    <script>
        $(document).ready(function(){
         $("#annotation").click( function()
           {
              hljs.initHighlightingOnLoad(); //function of annotation
           });
        });
    </script>
</head>
<body>

    <button type="submit" id="annotation" > 
      <img src="stylo.png"  style="width: 30px ; height:50px" alt="Submit">
    </button>
  </body>

i also tested it with the alert , it works. like i said earlier the button works fine with the alert but when i want to call the script it doesn't work
Yassine i actually don't understand that hljs.initHighlightingOnLoad(); thing.. It would be more clear if you could give that function definition or the library from which that function is to be called
I searched about that function just now... Here is what i found. hljs.initHighlighting.called = false; hljs.initHighlighting();

Collectives™ on Stack Overflow

Call a script when button clicked

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related