Onclick using Javascript

Question

I've been trying to implement a JS call from a seperate script and despite referencing m,ultiple demo I cannot get my example to work.

Can someone help me trouble shoot this simple example?

tescript.php says

<!DOCTYPE HTML>
<!-- Load checkout JS -->
<script type="text/javascript" src="tscript.js"></script>

<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

Then the script file says

// checking script load & log
console.log("script file has been loaded")

$('#buyingPhoto').on('click', function() {
console.log("Can a button be depressed?")
});

I get a console log that the script has loaded (troubleshooting step 1) but the onclick itself doesn't run

Did you verify that the JavaScript file's name was named the same as the name you specified in your HTML code? — Edric
– Edric, Commented May 17, 2020 at 7:08
Try placing the script before </body> at the end of your page or at least after your HTML. — DNT
– DNT, Commented May 17, 2020 at 7:08
The tscript.js reference is proved as I receive the "script file has been loaded" console log — Brad
– Brad, Commented May 17, 2020 at 8:57

marc_s · Accepted Answer · 2020-05-17 16:45:21Z

4

You are missing to import jQuery library .$() is jQuery using. And be careful about order of libraries. And be sure also page is loaded. So you should use document.ready.

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

console.log("script file has been loaded")

$( document ).ready(function() {
    $('#buyingPhoto').on('click', function() {
   			 console.log("Can a button be depressed?")
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

without jquery

document.getElementById("buyingPhoto").onclick = function() {
console.log("Can a button be depressed?")

};

<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

or you can give click in html

function test(){

console.log("Can a button be depressed?")

}

<div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide">
    <ul>
    <li> <button onclick="test()" id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button>   
   </li>
   </ul>
 </div>

edited May 17, 2020 at 16:45

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 17, 2020 at 7:10

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

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

7 Comments

Brad Over a year ago

Thank you., I have added the jquery as you have demonstrated (i knew it'd be something simple) However it still does not work on my server. Is there something else I should check?

Cagri Tacyildiz Over a year ago

Did you put it above of another script tag? Order of script tag is important

Brad Over a year ago

This is the entire .php file 'code'  <script type="text/javascript" src="tscript.js"></script>  <script src="cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/…> <div class="col-md-3 col-sm-4 col-xs-12 imageUploadSide"> <ul> <li> <button id="buyingPhoto" class="btn btn-buy">A New Buyit Button</button> </li> </ul> </div>'

Cagri Tacyildiz Over a year ago

ok put jquey script above the another script. Check my answer again and look at their orders

Brad Over a year ago

thanks for helping. I have changed the order to your response (in fact i copied it exactly) for both files and it doesnt work. I only have a cookie warning in the console

|

Kunal Raut · Accepted Answer · 2020-05-17 07:40:11Z

1

Your whole code is correct. You have not included jquery library, just include the below CDN in your <head></head>section.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

edited May 17, 2020 at 7:40

answered May 17, 2020 at 7:12

Kunal Raut

2,6042 gold badges14 silver badges25 bronze badges

Collectives™ on Stack Overflow

Onclick using Javascript

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related