9 Replies - 910 Views - Last Post: 04 September 2014 - 04:56 AM

#1 MrBeavis   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 34
  • Joined: 29-August 14

JavaScript help

Posted 04 September 2014 - 04:04 AM

hello!
I need a little help with my Javascript, its a pretty basic idea of creating an accordion effect in a webpage. I did a tutorial on this and have attempted to turn the code I learnt into something I could use on this page, I understand what the code is doing and when I run it, the console says "TypeError: h2 is undefined". Can anyone see what my eyes cant? thanks!

Javascript
var dropdownItems = new Array();

function get(){
	var divs = document.getElementsByTagName('fieldset');
	for(var i = 0; i < divs.length; i++)
	{
		if(divs[i].className == 'dropdown')
		{
			dropdownItems.push(divs[i]);
		}
	}
	for(var i = 0; i < dropdownItems.length; i++)
	{
		var h2 = getFirstChildWithTagName(dropdownItems[i], 'H2');
		h2.onclick = toggleItem;
	}
	for(var i = 1; i < dropdownItems.length; i++)
	{
		dropdownItems[i].className = 'dropdown hide';
	}

}

function toggleItem(){
	var itemClass = this.parentNode.className;
	
	for(var i = 0; i < dropdownItems.length; i++)
	{
		dropdownItems[i].className = 'dropdown hide';
	}
	
	if(itemClass == 'dropdown hide')
	{
		this.parentNode.className = 'dropdown';
	}
	
}

function getFirstChildWithTagName(element, tagName){
	for(var i = 0; i < element.childNodes[i].length; i++)
	{
		if(element.childNodes[i].nodeName == tagName)
		{
			return element.childNodes[i];
		}
	}
}




CSS
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: blue;
}

.dropdown h2{
	color: red;
}

.dropdown h2:hover{
	cursor: pointer;
}

.dropdown.hide div{
	display: none;
}

.dropdown div{
	
}





html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="review.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="./review.js"></script>
        <title>Restaurant Review</title>
    </head>
    <body onload="get()">
        <img src="./images/inner-banner-restaurant.png"/>
        <h1>Restaurant Review</h1>
        <br />
        <form>
        	<fieldset class="dropdown">
        		<legend><h2>Restaurant Details</h2></legend>
				<div>
					<h4>Restaurant Name</h4>
        				<input type="text" size="128"/>
        			<h4>City</h4>
        				<input type="text" size="32" />
        			<h4>State/Territory</h4>
        				<select value="Specify State or Territory">
        					<option value="nsw">NSW</option>
        					<option value="act">ACT</option>
        					<option value="qld">QLD</option>
        					<option value="nt">NT</option>
        					<option value="wa">WA</option>
        					<option value="sa">SA</option>
        					<option value="vic">VIC</option>
        					<option value="tas">TAS</option>
        				</select>
        			<h4>Postcode</h4>
        				<input type="text" size="4"/>
				</div>    				
        	</fieldset>
        	
        	<fieldset class="dropdown">
        		<legend><h2>Cuisine</h2></legend>
				<div>
        			<h4>Select Restaurant Cuisine</h4>
        				<select value="Cuisine">
        					<option value="american">American Cuisine</option>
        					<option value="african">African Cuisine</option>
        					<option value="asian">Asian Cuisine</option>
        					<option value="australian">Australian Cuisine</option>
        					<option value="chinese">Chinese Cuisine</option>
        					<option value="desert">Dessert Cuisine</option>
        					<option value="ethnic">Ethinic Cuisine</option>
        					<option value="europe">European Cuisine</option>
        					<option value="exotic">Exotic Cuisine</option>
        					<option value="fusion">Fusion Cuisine</option>
        					<option value="indian">Indian Cuisine</option>
        					<option value="indonesian">Indonesian Cuisine</option>
        					<option value="international">International Cuisine</option>
        					<option value="japanese">Japanese Cuisine</option>
        					<option value="korean">Korean Cuisine</option>
        					<option value="malay">Malay Cuisine</option>
        					<option value="mediterranean">Mediterranean Cuisine</option>
        					<option value="middleeast">Middle Eastern Cuisine</option>
        					<option value="mongolian">Mongolian Cuisine</option>
        					<option value="peranakan">Peranakan Cuisine</option>
        					<option value="southamerica">South American Cuisine</option>
        					<option value="thai">Thai Cuisine</option>
        					<option value="vietenamese">Vietnamese Cuisine</option>
        					<option value="western">Western Cuisine</option>
        					<option value="halal">Halal Food</option>
        				</select>
        			<h4>Average cost per Main:</h4>
        				<input type="text" size="4" />					
				</div>
        	</fieldset>
        	
        	<fieldset class="dropdown">
        		<legend><h2>Ratings</h2></legend>
				<div>
        			<p>Please rate your experience at this restaurant for the following aspects:</p>
        				<h5>Food</h5>
        					<select value="Rate">
        						<option value="f1">1</option>
        						<option value="f2">2</option>
								<option value="f3">3</option>
								<option value="f4">4</option>
								<option value="f5">5</option>
								<option value="f6">6</option>
								<option value="f7">7</option>
								<option value="f8">8</option>
								<option value="f9">9</option>
								<option value="f10">10</option>
        					</select>
        				<h5>Service</h5>
        					<select value="Rate">
        						<option value="s1">1</option>
        						<option value="s2">2</option>
        						<option value="s3">3</option>
        						<option value="s4">4</option>
        						<option value="s5">5</option>
        						<option value="s6">6</option>
        						<option value="s7">7</option>
        						<option value="s8">8</option>
        						<option value="s9">9</option>
        						<option value="s10">10</option>
        					</select>
        				<h5>Ambience</h5>
        					<select value="Rate">
        						<option value="a1">1</option>
        						<option value="a1">2</option>
        						<option value="a1">3</option>
        						<option value="a1">4</option>
        						<option value="a1">5</option>
        						<option value="a1">6</option>
        						<option value="a1">7</option>
        						<option value="a1">8</option>
        						<option value="a1">9</option>
        						<option value="a1">10</option>
        					</select>
        				<h5>Value</h5>
        					<select value="Rate">
        						<option value="v1">1</option>
        						<option value="v1">2</option>
        						<option value="v1">3</option>
        						<option value="v1">4</option>
        						<option value="v1">5</option>
        						<option value="v1">6</option>
        						<option value="v1">7</option>
        						<option value="v1">8</option>
        						<option value="v1">9</option>
        						<option value="v1">10</option>
        					</select>					
				</div>
        	</fieldset>	
        				
        	<fieldset class="dropdown">
        		<legend><h2>Your Review</h2></legend>
				<div>
        			<h4> Date of your last visit (dd-mm-yyyy):</h4>
        				<input type="text" size="10"/>
        			<h4>Your Comments</h4>
        				<input type="text" size="128"/>					
				</div>
        	</fieldset>
        	<fieldset>
        		<legend><h2>Actions</h2></legend>
        			<input type="button" onclick="" value="Submit" />
        	</fieldset>
        </form>
    </body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript help

#2 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: JavaScript help

Posted 04 September 2014 - 04:21 AM

First, h2 and H2 aren't the same. Would suggest lower-casing the tag name in your getFirstChildWithTagName function.

Also, I would suggest returning null from that function after the for loop for when the tag name is not found, then checking and handling the null condition in the caller.
Was This Post Helpful? 0
  • +
  • -

#3 DarenR   User is offline

  • D.I.C Lover

Reputation: 593
  • View blog
  • Posts: 3,823
  • Joined: 12-January 10

Re: JavaScript help

Posted 04 September 2014 - 04:24 AM

i dont see a <script> set anywhere in your html page
Was This Post Helpful? 0
  • +
  • -

#4 MrBeavis   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 34
  • Joined: 29-August 14

Re: JavaScript help

Posted 04 September 2014 - 04:33 AM

<script> is on line 007 of the html :)

sorry jack you lost me

Quote

Also, I would suggest returning null from that function after the for loop for when the tag name is not found, then checking and handling the null condition in the caller.


I've debugged the page and the it freezes on line 18 with h2 being undefined, I'm confused with that, is it not defined right about it on line 17?

I'm new to Javascript and my lecturers teaching style leaves alot to be desired so I'm learning by doing and with you fine people's help
Was This Post Helpful? 0
  • +
  • -

#5 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: JavaScript help

Posted 04 September 2014 - 04:37 AM

You have this line:

var h2 = getFirstChildWithTagName(dropdownItems[i], 'H2');


But what gets assigned to h2 if the tag name is not found?
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: JavaScript help

Posted 04 September 2014 - 04:39 AM

View PostJackOfAllTrades, on 04 September 2014 - 11:21 AM, said:

First, h2 and H2 aren't the same. Would suggest lower-casing the tag name in your getFirstChildWithTagName function.

It is very common to compare nodeName using uppercase, although I haven't found any documentation that confirms that this is a requirement. (Admittedly, I haven't tried too hard ;))

View PostDarenR, on 04 September 2014 - 11:24 AM, said:

i dont see a <script> set anywhere in your html page

The script is attached and get() is run on load.




The 'h2' element is not a child of the dropdown, it is nested within the legend element so isn't found by your function.

You could use:
function getFirstChildWithTagName(element, tagName){
    /*for(var i = 0; i < element.childNodes[i].length; i++)
    {
        if(element.childNodes[i].nodeName == tagName)
        {
            return element.childNodes[i];
        }
    }*/
    return element.querySelector(tagName);
}

although this makes the function itself a little redundant.

This post has been edited by andrewsw: 04 September 2014 - 04:45 AM

Was This Post Helpful? 2
  • +
  • -

#7 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: JavaScript help

Posted 04 September 2014 - 04:46 AM

View Postandrewsw, on 04 September 2014 - 07:39 AM, said:

View PostJackOfAllTrades, on 04 September 2014 - 11:21 AM, said:

First, h2 and H2 aren't the same. Would suggest lower-casing the tag name in your getFirstChildWithTagName function.

It is very common to compare nodeName using uppercase, although I haven't found any documentation that confirms that this is a requirement. (Admittedly, I haven't tried too hard ;)/>)


Huh! Thanks, as I'm heading back into more front-end work, this is helpful to know. From https://developer.mo...I/Node.nodeName :

Quote

However, in HTML, text_field's value would read "DIV", because nodeName and tagName return in upper case on HTML elements in DOMs flagged as HTML documents.

Was This Post Helpful? 1
  • +
  • -

#8 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: JavaScript help

Posted 04 September 2014 - 04:47 AM

Note that nesting the h2 directly within the legend is a little unnecessary, I would use one or the other.

(Also, personally, I wouldn't use the identifier tagName as this is a pre-existing property.)

This post has been edited by andrewsw: 04 September 2014 - 04:51 AM

Was This Post Helpful? 0
  • +
  • -

#9 MrBeavis   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 34
  • Joined: 29-August 14

Re: JavaScript help

Posted 04 September 2014 - 04:53 AM

ah yes I did read about the uppercase lower case earlier today.

oh ok so if its nested that wont work.

I put in your code in to see what it would do and it hides them fine and I can click to hide the other, however I cant reopen them now.

is there a way I can find the nested h2? and go about it that way?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6560
  • View blog
  • Posts: 26,597
  • Joined: 12-December 12

Re: JavaScript help

Posted 04 September 2014 - 04:56 AM

Quote

is there a way I can find the nested h2?

element.querySelector does return a nested element, so I'm not sure what you are asking?

MDN said:

Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

I am not saying that the nesting is a problem, but that using <legend><h2>something</h2></legend> is unnecessary. That is, directly inserting one element inside another usually just adds bloat to the HTML, as all styling can just be added to one of these elements.

This post has been edited by andrewsw: 04 September 2014 - 05:00 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1