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,

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:


.hidden {
    display: none;
}


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


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:


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

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


var freeChoice = document.getElementsByName('free_choice')[0];
...

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.