What is problem with this JS & JS Editor/Debugger

**WorldNews** · Jun 15, 2012 13:13

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,

**paul_wilkins** · Jun 15, 2012 16:35

Originally Posted by WorldNews

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];
...

Originally Posted by WorldNews

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.

User Tag List

Thread: What is problem with this JS & JS Editor/Debugger

Thread Tools

Display

What is problem with this JS & JS Editor/Debugger

Bookmarks

Bookmarks

Posting Permissions