Basic javascript isn't working - display block

Question

If the user selects "House" I want a new select option box to pop up. Currently nothing is happening.

function showFamilies(){

if(pt.selectedIndex == 1)
document.getElementById('families').style.display = 'block';

if(pt.selectedIndex != 1)
document.getElementById('families').style.display = 'none';
}


<select id="pt" value="pt" name="pt" onChange="showFamilies()">
<option value="" name="">Select</option>
<option value="1" name="1">House</option>
<option value="2" name="2">Commercial</option>
</select>

<div id="families" style="display:none">Families: 
<select name="amin_families">
<option value="1" name="Condo">1</option>
<option value="2" name="Co-Op">2</option></select>
</div>

Are you sure? Its working in my browser. Did you use script tags? — Bhargav Ponnapalli, Aug 26 '13 at 05:45
Use `if(expression) statement; else statement2;` instead of `if(expression) statement; if(!expression) statement2;` — BLaZuRE, Aug 26 '13 at 05:45
@Mike , i have checked your code and for me its working fine , when user select house , family dropdown show perfectaly ? OR you want something else to do ? — Devang Rathod, Aug 26 '13 at 05:48
@Raubi I don't understand how that's working. Are browsers resolving undefined variable names to element IDs now? **Edit** Well I'll be - http://stackoverflow.com/questions/5515659/javascript-variable-corresponds-to-dom-element-with-the-same-id — Phil, Aug 26 '13 at 05:49
@Phil They do it since ever, but I really do not recommend using it that way. I just copied his code into a jsbin to see, if it is working. Either I would use `document.getElementById` or use jQuery. — Manuel Rauber, Aug 26 '13 at 05:51
Yea actually I feel like a noob but I put the same code in the actual head section of the PHP file and it is working fine. When I have it in an external javascript page and I link to that page — Mike, Aug 26 '13 at 06:00
@Mike Your URL looks wrong. Either use just the path, ie `/myjavascriptdirectory/scripts.js` or a full URL, ie `//www.mywebsite.com/myjavascriptdirectory/scripts.js`. Also, learn to use your browser's error console. — Phil, Aug 26 '13 at 06:03

Phil · Answer 1 · 2013-08-26T06:07:36.220

pt in your showFamilies function is potentially undefined (depending on your browser's interpretation of http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#named-access-on-the-window-object). Try

function showFamilies(pt) {
    document.getElementById('families').style.display = pt.selectedIndex === 1
        ? 'block' : 'none';
}

and in your HTML

<select id="pt" name="pt" onchange="showFamilies(this)">

P.S. The <select> element does not have a value attribute.

score 1 · Answer 2 · answered Aug 26 '13 at 05:47

1

U have to pass this

<select id="pt" value="pt" name="pt" onChange="showFamilies(this)">

Your Script:

function showFamilies(pt){

if(pt.selectedIndex == 1)
document.getElementById('families').style.display = 'block';

if(pt.selectedIndex != 1)
document.getElementById('families').style.display = 'none';
}

answered Aug 26 '13 at 05:47

Somnath Kharat

3,570
2
27
51

in your case pt is undefined i think? – The Mechanic Aug 26 '13 at 05:48

Shankar Narayana Damodaran · Accepted Answer · 2013-08-26T06:03:24.977

1

Redefined your if statement. It works fine now.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
    function showFamilies(pt){

    if(pt.selectedIndex == 1)
    {
    document.getElementById('families').style.display = 'block';
    }
    else
    {
    document.getElementById('families').style.display = 'none';
    }
    }
    </script>
    <title></title>
</head>
<body>



<select id="pt" value="pt" name="pt" onChange="showFamilies(this)">
    <option value="" name="">Select</option>
    <option value="1" name="1">House</option>
    <option value="2" name="2">Commercial</option>
</select>

<div id="families" style="display:none">Families:
    <select name="amin_families">
        <option value="1" name="Condo">1</option>
        <option value="2" name="Co-Op">2</option></select>
</div>
</body>
</html>

edited Aug 26 '13 at 06:03

answered Aug 26 '13 at 05:48

Shankar Narayana Damodaran

68,075
43
96
126

Redefined what *loop*? – Phil Aug 26 '13 at 05:55
2

It didn't work and you accepted the answer? Maybe you should show us the full code – Manuel Rauber Aug 26 '13 at 06:04
@Raubi, OP didn't enclose the JS in `script` tags. That was the actual problem. Read the comments. – Shankar Narayana Damodaran Aug 26 '13 at 06:06
1

@Mike why u accepted this as ans as u hv only commented its does not work,Accepted the proper ans so that users can get the appropriate ans .i think phil ans is most appropriate – Somnath Kharat Aug 26 '13 at 06:08
@ShankarDamodaran That does not appear to be the problem at all. The comments suggest the OP used an incorrect `src` attribute in his ` – Phil Aug 26 '13 at 06:16

Basic javascript isn't working - display block

3 Answers3