SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    What is problem with this JS & JS Editor/Debugger

    Hello,

    Do you know what is wrong with this JS code:

    function close(item) {

    alert('I am closing: ' + item);

    document.getElementById(item).style.display = 'none';

    if (item == 'free_paid') {
    document.getElementById('reason_paid').style.display = 'none';
    }
    }


    I am calling it via a click on form radio input, such as:

    <input type="radio" name="free_choice" value="yes" <?php if (isset($free_choice) AND ($free_choice == 'free')) {echo 'checked'; } ?> onclick="close('reason_paid')"> For Free

    Also, is there a good Javascript Editor / Debugger you recommend?

    ThanX,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Do you know what is wrong with this JS code:
    What is wrong is that you are attempting to use an inline HTML event attribute, which in this particular case completely fails to work.

    Instead, you should assign an event from the scripting code instead.

    Let's say that you are starting with this CSS and HTML code:

    Code css:
    .hidden {
        display: none;
    }

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Untitled page</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
    <form id="choice">
        <p><input type="radio" name="free_choice" value="yes"> For Free</p>
        <div id="free_paid">Free paid message here</div>
    </form>
    <script type="text/javascript" src="script.js"></script>
    </body>
    </html>

    It is the job of scripting to attach events on to elements of the page.

    Code javascript:
    function close(item) {
        alert('I am closing: ' + item);
        document.getElementById(item).className = 'hidden';
        if (item == 'free_paid') {
            document.getElementById('reason_paid').className = 'hidden';
        }
    }
     
    var form = document.getElementById('choice'),
         freeChoice = form.elements.free_choice; // use .free_choice[0] if there's more than one input with the same name
    freeChoice.onclick = function () {
        close('reason_paid');
    };

    If it's not inside of a form, you can use querySelector instead:

    Code javascript":
    var freeChoice = document.querySelector('[name="free_choice"]');
    ...

    If you need to support IE7 or oler, you can use getElementsByName instead:

    Code javascript":
    var freeChoice = document.getElementsByName('free_choice')[0];
    ...

    Quote Originally Posted by WorldNews View Post
    Also, is there a good Javascript Editor / Debugger you recommend?
    So long as the editor uses syntax highlighting, that's about all that's needed from a JavaScript editor.

    The debuggers built in to web browsers are the best ones to use. My favourite is Google Chrome's one, but Firefox (with Firebug) and IE also have perfectly serviceable debugging facilities.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •