CODEWITHSUNDEEP
javascripthtml
zoenightshade
zoenightshade

Reputation: 159

Javascript not working on HTML file?

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?

Upvotes: 0

Views: 58

Answers (7)

dushyant nasit
dushyant nasit

Reputation: 41

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;
    }
})

Upvotes: 0

radhey shyam
radhey shyam

Reputation: 769

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>

##

Upvotes: 0

Kishor Velayutham
Kishor Velayutham

Reputation: 818

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..!

Upvotes: 0

David R
David R

Reputation: 15639

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!

Upvotes: 2

Mohanish
Mohanish

Reputation: 71

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>

Upvotes: 0

HTML Guruz
HTML Guruz

Reputation: 379

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');
 });

Upvotes: 0

Toxy.x3
Toxy.x3

Reputation: 31

   <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-

Upvotes: 0

Related Questions