Javascript not working on HTML file?

Question

So have a script named script.js:

var newLabel = '';
$('#payment_amount').on('change', function(){
    $('#change_label').text(newLabel); //Change the text before changing the value
    switch(this.value){
        case 'junior':
            newLabel = 'Junior Account';
            break;
        case 'premium':
            newLabel = 'Premium Account';
            break;
    }
}).trigger('change');

I'm calling it to my html file by:

<script type="text/javascript" src="script.js"></script>

My code for select is this:

<select id = "payment_amount">
    <option class="junior" value="junior">Junior</option>
    <option class="premium" value="premium">Premium</option>
</select>

<label id="change_label">Hello</label>

I already tried directly putting my js code to the html by adding it to the tag but I'm still not having any luck. Where did I go wrong with this one?

$ is jquery.. Pease add the jquery script as cdn or from your local. — Hema Nandagopal
– Hema Nandagopal, Commented Feb 8, 2018 at 5:21
Working fine on my end. What do you mean by not working? What are you trying to achieve? — Eddie
– Eddie, Commented Feb 8, 2018 at 5:22
@HemaNandagopal hmmm sorry for the newb question but how can I add that to my script? — zoenightshade
– zoenightshade, Commented Feb 8, 2018 at 5:23
@Eddie the label doesnt change to anything even though i change the select value? i have no idea what i am missing. — zoenightshade
– zoenightshade, Commented Feb 8, 2018 at 5:24

David R · Accepted Answer · 2018-02-08 05:30:24Z

2

You need to add jquerylibrary to your code, Have it locally (or) point to any CDN like below,

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

Here is a working version of your code,

https://jsfiddle.net/uqo84q71/

Hope this helps!

edited Feb 8, 2018 at 5:30

answered Feb 8, 2018 at 5:23

David R

15.7k8 gold badges59 silver badges74 bronze badges

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

Comments

Toxy.x3 · Accepted Answer · 2018-02-08 05:25:52Z

0

   <script type="text/javascript"> 
 var newLabel = ''; $('#payment_amount').on('change', function(){ $('#change_label').text(newLabel); //Change the text before changing the value switch(this.value){ case 'junior': newLabel = 'Junior Account'; break; case 'premium': newLabel = 'Premium Account'; break; } }).trigger('change'); 
</script>

If its work then check the src attributes (script.js) is it one same folder-

answered Feb 8, 2018 at 5:25

Toxy.x3

318 bronze badges

Comments

HTML Guruz · Accepted Answer · 2018-02-08 05:25:52Z

0

First of all add Main jquery file. Jquery file

2ndly add this replace this code.

 $(document).ready( function(){
       var newLabel = '';
        $('#payment_amount').on('change', function(){
        $('#change_label').text(newLabel);
    switch(this.value){
    case 'junior':
        newLabel = 'Junior Account';
        break;
    case 'premium':
        newLabel = 'Premium Account';
        break;
   }
   }).trigger('change');
 });

answered Feb 8, 2018 at 5:25

HTML Guruz

3792 silver badges8 bronze badges

Comments

Mohanish · Accepted Answer · 2018-02-08 05:26:34Z

0

Modified your HTML a little. See where I've included the scripts. Try it and check if it works now.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <select id = "payment_amount">
        <option class="junior" value="junior">Junior</option>
        <option class="premium" value="premium">Premium</option>
    </select>
    <label id="change_label">Hello</label>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="1.js"></script>
</body>

answered Feb 8, 2018 at 5:26

Mohanish

711 silver badge8 bronze badges

Comments

Kishor Velayutham · Accepted Answer · 2018-02-08 05:30:34Z

0

In your case ,

Check these 2 things .

1) Import Jquery cdn

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

2)Check the file of script.js where it was added i.e path of it. Might be path related issues.

Hope this helps..!

answered Feb 8, 2018 at 5:30

Kishor Velayutham

8286 silver badges18 bronze badges

Comments

radhey shyam · Accepted Answer · 2018-02-08 05:36:57Z

0

Try to put it on head:-

## <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="1.js"></script>
</head>
<body>
<select id = "payment_amount">
    <option class="junior" value="junior">Junior</option>
    <option class="premium" value="premium">Premium</option>
</select>
<label id="change_label">Hello</label>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</body>

##

answered Feb 8, 2018 at 5:36

radhey shyam

7696 silver badges9 bronze badges

Comments

dushyant nasit · Accepted Answer · 2018-02-08 05:55:47Z

0

var newLabel = '';
$('#payment_amount').on('change', function(){
    $('#change_label').text(newLabel); //Change the text before changing the value
    switch($('#payment_amount').val()){ // add jquery-3.2.1.min.js and change this
        case 'junior':
            newLabel = 'Junior Account';
            break;
        case 'premium':
            newLabel = 'Premium Account';
            break;
    }
})

answered Feb 8, 2018 at 5:55

dushyant nasit

412 bronze badges

Collectives™ on Stack Overflow

Javascript not working on HTML file?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related