How to make JavaScript work when button is pressed?

Question

I am a bit of a newbie in JS and not too sure what I'm doing.

I have created a button

<div id="btn">
    <a href='dg-quiz-maker.js' class='button'>ATTEMPT A QUIZ</a>
</div>

I want when the user presses the button, the JS dg-quiz-makes.js file appears. I'm not sure how to I do it. Please help.

`href` should do that.. Make sure the file "dg-quiz-maker.js" is in the same location/folder where you have the code file. — Pugazh, Apr 23 '15 at 11:35
Is it possible that you want to run a function from the js-file when the button is pressed instead of opening the *.js as a link? And you don't actually have a real button, it's rather a link which is styled as a button. — John Doe, Apr 23 '15 at 11:36
Yes your right, sorry I couldn't find the right words for it :). I want to run a function from JS file when that button is pressed. I know its an but I styled it and it looks exactly like a button. I used this tag because I thought you need href to link it to JS — user3438350, Apr 23 '15 at 11:44

Rajesh Grandhi · Answer 1 · 2016-10-28T09:36:41.507

Steps to add a event :

1).Add selector (either class or id) to the element (ex: <--button class="classname">test<--/button-->)

2).In document ready - Add on click event and write the related code inside it.

Note : Add Jquery.js in HTML page

 $( document ).ready(function() {
    $('.classname').on('click',function(){
    /** write related code inside **/
      yourfunc();
    });
 });

function yourfunc(){
alert('this is the other function');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="classname">test</button>

Muhammad Bilal · Answer 2 · 2015-04-23T11:51:49.167

0

What you can do is make a javascript function and call it on click like this:

<div id="btn">
   <a href='#' onclick="myFunc();" class='button'>ATTEMPT A QUIZ</a>
</div>

<script>
function myFunc(){
   alert('test');
}
</script>

Or you can include functions from js files like this:

<script src="dg-quiz-maker.js"></script>

edited Apr 23 '15 at 11:51

answered Apr 23 '15 at 11:35

Muhammad Bilal

2,106
1
15
24

I got the idea thanks ! but how do you make a dg-quiz-makes.js function to work ? – user3438350 Apr 23 '15 at 11:48
@user3438350 you can simply include js file like this: `` and use its functions. – Muhammad Bilal Apr 23 '15 at 11:50

score 0 · Answer 3 · answered Apr 23 '15 at 11:40

you just cant use .click() as some browser wont pick it up. please test after using .

   <script type="text/javascript">
function performClick(elemId) {
   var elem = document.getElementById(elemId);
   if(elem && document.createEvent) {
      var evt = document.createEvent("MouseEvents");
      evt.initEvent("click", true, false);
      elem.dispatchEvent(evt);
   }
}
</script>
<a href="#" onclick="performClick('theFile');">Open file dialog</a>
<input type="file" id="theFile" />

Thanks, but that doesn't do what I want it, it just creates a Choose File button next to mine. I want JS function to run when pressed on my button — user3438350, Apr 23 '15 at 12:11

score 0 · Answer 4 · answered Apr 23 '15 at 11:48

0

  <div id="btn">
               <a href='dg-quiz-maker.js' class='button'>ATTEMPT A QUIZ</a>
               </div>

See the Plunker code:

http://plnkr.co/edit/YB09Puxc7qJmeW8V86nR?p=preview`

In this case the script file is in same directory with HTML

answered Apr 23 '15 at 11:48

freethinker

2,257
4
26
49

I think I didn't use the right words. I mean to say I want the JS function to run not just open a JS file – user3438350 Apr 23 '15 at 12:16
read this: http://stackoverflow.com/questions/5235321/how-do-i-load-a-javascript-file-dynamically – freethinker Apr 23 '15 at 12:24

akki_2891 · Answer 5 · 2015-04-23T18:07:06.293

-1

First of All, Opening a JS file is kind of weird thing , but still if u want to,The "href" property of <a> tag should be a proper(or relative) uri path of the file placed in your directory.

I hope it will solve your purpose.

edited Apr 23 '15 at 18:07

answered Apr 23 '15 at 11:34

akki_2891

496
1
5
12

1

Independently of OP getting the expected result or not, "dg-quiz-maker.js" is a valid relative path for a `href`. It's a link to the file "dg-quiz-maker.js" in the same directory as the file containing the link – Alvaro Montoro Apr 23 '15 at 11:37

How to make JavaScript work when button is pressed?

5 Answers5