CODEWITHSUNDEEP
javascripthtml
2316354654
2316354654

Reputation: 279

issue running a JS function on a webpage

I'm trying to use a javascript function to make a simple input text box dissapear, and I made it dissapear using css, but the javascript portion to make it fade in and out wont work. I got the fiddle from here.

a watered down version of my page looks like this:

<html lang="en">

<head>  
    <title>Volunteer Form</title>
    <script type="text/javascript" src="script.js"></script> 
    <style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
    .todisplay {
    display:none;
    }
    </style>
</head>
<body>

<input type="checkbox" name="typeofwork[]" value="other" class='checkdisplay' > Other <br><br>

<div class='todisplay'>
    <b>Other Tasks</b><br>
    if checked other, type below.<br>
    <input type="text" name="othertasks"><br><br>
</div>

<div class='todisplay'>test</div>


and I made a javascript file in the same directory with this in it and named it script.js:

$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');

    });
});

I also tried putting the same script at the bottom of the page between the and tags like so:

</body>
<script type="text/javascript" src="script.js">
$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) $('.todisplay').fadeIn('slow');
        else $('.todisplay').fadeOut('slow');

    });
});</script> 
</html>

I'm sorry I'm terrible at javascript, I tried following the fiddle instructions from another stack overflow page and I have no idea why it wont execute. I tried everything I could possibly think of. Can someone please help?

Upvotes: 0

Views: 74

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65853

Don't forget to import the JQuery library.

Also (and this is unrelated to your issue), place { and } around control blocks (the branches of your if statement, loops, etc.) to avoid confusion and prevent bugs in your code.

Additionally, it is usually a bad idea to use special characters in the name or id attribute of an element. You have name="typeofwork[]" as the name of your checkbox. You should consider changing that to an alphanumeric value.

// This code can be in an external script file, but you will have to reference that file
// similarly to the way JQuery is imported with the HTML <script> element. Or, you
// can place this code in a <script> element and place that element at the bottom of your
// HTML (just before the closing body tag) or inside the HTML <head> section.
$(document).ready(function () {
    $('.checkdisplay').change(function () {
        if (this.checked) { 
          $('.todisplay').fadeIn('slow'); 
        }
        else {
          $('.todisplay').fadeOut('slow'); 
        }

    });
});
<html lang="en">

<head>  
    <title>Volunteer Form</title>
    <style type="text/css">
    .fieldset-auto-width {
         display: inline-block;
    }
    .todisplay {
    display:none;
    }
    </style>
    
    <!-- This must preceed any code that uses JQuery. It links out to that library so you can use it -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="script.js"></script> 
</head>
<body>

<input type="checkbox" name="typeofwork[]" value="other" class='checkdisplay' > Other <br><br>

<div class='todisplay'>
    <b>Other Tasks</b><br>
    if checked other, type below.<br>
    <input type="text" name="othertasks"><br><br>
</div>

<div class='todisplay'>test</div>

Upvotes: 1

Related Questions