4 Replies - 374 Views - Last Post: 21 October 2015 - 12:04 PM

#1 howardbc14  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 21-October 15

Event handler only works once.

Posted 21 October 2015 - 11:35 AM

The event handler function seems to work only once. The first 'mouseover' event opens up the text description and then the first 'click' event closes the text description. However, the second time that the mouseover event happens, the text description is no longer displayed, thus making it impossible for the 'click' event to occur.

I wrote an alternative version that calls for the page to reload itself (reload() method) after every 'mouseover' event so that the 'mouseover' and 'click' events can occur an infinite number of times.

However, how do I allow the event handler functions to work an infinite number of times without having to include the reload() method?

HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="macaron-flavours.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="macaron-label"><h2>TODAY'S MACARON FLAVOURS</h2></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<ul id="flavour-list">
	<li id="three-berry" class="class1">THREE BERRY</li>
	<li id="tropical-paradise" class="class1">TROPICAL PARADISE</li>
	<li id="dark-chocolate" class="class1">DARK CHOCOLATE</li>
	<li id="vanilla" class="class1">VANILLA</li>
	<li id="espresso" class="class1">ESPRESSO</li>
	<li id="green-tea" class="class1">GREEN TEA</li>
	<li id="cinnamon" class="class1">CINNAMON</li>
	<li id="taro" class="class1">TARO</li>
	<li id="earl-grey" class="class1">EARL GREY</li>
	<li id="hazelnut" class="class1">HAZELNUT</li>
	<li id="pistachio" class="class1">PISTACHIO</li>
	<li id="honey" class="class1">HONEY</li>
	<li id="mint" class="class1">MINT</li>
	<li id="milk-chocolate" class="class1">MILK CHOCOLATE</li>
</ul>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<p>PRICES ARE €3.00 PER MACARON UNLESS OTHERWISE NOTED.</p>
<p>CLICK ON EACH MACARON FOR ADDITIONAL DETAILS.</p>
<p class="legend"><span class="yellow-block">yel</span>YELLOW BACKGROUND = TODAY'S SPECIALS. (€2.00/MACARON INSTEAD OF €3.00/MACARON.)</p>
<p class="legend"><span class="red-block">yel</span>RED BACKGROUND = SEASONAL AVAILABILITY (PRICES MAY VARY.)</p>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
<div id="empty-space"></div>
</div>
<script src="macaron-flavours.js"></script>
</body>
</html>



Javascript code
function close(e){
	var event_target=e.target;
	if (event_target==document.getElementById('three-berry'))
	{
		event_target.className='';
		event_target.innerHTML='<li id="three-berry">'+'THREE BERRY'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('tropical-paradise')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="tropical-paradise">'+'TROPICAL PARADISE'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('dark-chocolate')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="dark-chocolate">'+'DARK CHOCOLATE'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('vanilla')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="vanilla">'+'VANILLA'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('espresso')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="espresso">'+'ESPRESSO'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('green-tea')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="green-tea">'+'GREEN TEA'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('cinnamon')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="cinnamon">'+'CINNAMON'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('taro')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="taro">'+'TARO'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('earl-grey')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="earl-grey">'+'EARL GREY'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('hazelnut')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="hazelnut">'+'HAZELNUT'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('pistachio')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="pistachio">'+'PISTACHIO'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('honey')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="honey">'+'HONEY'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('mint')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="mint">'+'MINT'+'</li>';
		event_target.className='class1';
	}
	if (event_target==document.getElementById('milk-chocolate')) 
	{
		event_target.className='';
		event_target.innerHTML='<li id="milk-chocolate">'+'MILK CHOCOLATE'+'</li>';
		event_target.className='class1';
	}
}

//function to be executed when the 'mouseover' event occurs.
function pop_out(e) //The event object is involved as a parameter.
{
	var event_target=e.target; //Use the event object's target property to select the HTML element impacted by the event.
	
	if (event_target==document.getElementById('three-berry')) 
	{
		event_target.className='todays_specials';
		var first_part='3-berry is a flavour built from the finest naturally grown raspberries, blueberries, and blackberries.'; 
		var second_part=' We crush a combination of the 3 using a blender, resulting in all natural flavours. No preservatives used.';
		event_target.textContent=first_part+second_part;
	}
	//If the impacted HTML element's id attribute value is 'three-berry', change the class attribute value to 'todays_specials'.
	//Then add the text for the description.
	
	if (event_target==document.getElementById('tropical-paradise')) 
	{
		event_target.className='tropical-paradise';
		event_target.textContent='Crushed, dried, & naturally grown mangoes and pineapples from the Philippines are used.';
	}

	if (event_target==document.getElementById('dark-chocolate')) 
	{
		event_target.className='dark-chocolate';
		event_target.textContent='The filling is entirely composed of chocolate produced by La Maison du Chocolat.';
	}
	
	if (event_target==document.getElementById('vanilla')) 
	{
		event_target.className='vanilla';
		event_target.textContent='Made using certified vanilla beans from Madagascar, long renowned for the world\'s best vanilla.';
	}
	
	if (event_target==document.getElementById('espresso')) 
	{
		event_target.className='espresso';
		event_target.textContent='Jamaica\'s famed Blue Mountains are the source of the coffee beans used to make the espresso filling.';
	}
	
	if (event_target==document.getElementById('green-tea')) 
	{
		event_target.className='green-tea';
		event_target.textContent='Flavour sourced from China\'s renowned, original Dragon Well Tea.';
	}
	
	if (event_target==document.getElementById('cinnamon')) 
	{
		event_target.className='cinnamon';
		event_target.textContent='Sri Lanka\'s Ceylon cinnamon, which, unlike Cassia cinnamon, has negligible amounts of coumarin (potentially toxic in high amounts).';
	}
	
	if (event_target==document.getElementById('taro')) 
	{
		event_target.className='taro';
		event_target.textContent='Taro is a nutritional superfood, offering low Glycemic Index (GI) levels, high levels of fiber, Vitamin A, Vitamin C, and so on; crushed organic taro root, rather than artificial flavours, is used for the macaron filling.';
	}
	
	if (event_target==document.getElementById('earl-grey')) 
	{
		event_target.className='earl-grey';
		event_target.textContent='The earl grey tea leaves used in producing this macaron\'s flavour contain authentic oil from Bergamot trees grown in Calabria, Italy.';
	}
	
	if (event_target==document.getElementById('hazelnut')) 
	{
		event_target.className='hazelnut';
		event_target.textContent='Authentic Giresun hazelnuts from Turkey\'s Giresun province are in both the macaron shells and the fillings.';
	}
	
	if (event_target==document.getElementById('pistachio')) 
	{
		event_target.className='pistachio';
		event_target.textContent='Hazelnut cultivated from the Greek island Aegina are used to produce both macaron shells and its filling, giving it an all-around pistachio flavour.';
	}
	
	if (event_target==document.getElementById('honey')) 
	{
		event_target.className='honey';
		event_target.textContent='World-class acacia honey is used to create the honey consistency in the filling.';
	}
	
	if (event_target==document.getElementById('mint')) 
	{
		event_target.className='mint';
		event_target.textContent='Filling ingredients vary between spearmint & peppermint.';
	}
	
	if (event_target==document.getElementById('milk-chocolate')) 
	{
		event_target.className='milk-chocolate';
		event_target.textContent='Callebaut milk chocolate is the exclusive supplier.';
	}
}

var list=document.getElementsByTagName('ul')[0]; //Obtain the first <ul> element; in this case, there is only 1.

list.addEventListener('mouseover',pop_out,false); //this event listener follows the principle of event delegation.
list.addEventListener('click',close,false);



CSS code
*{
	font-family: Chalkboard;
	text-align: center;
	color: rgb (0,0,0);
} /*The asterisk means that it is to be applied to all elements in the page.*/

div#wrapper{
	width: 960px;
	height: 1500px;
	margin: 0px auto;
	background-image: url('file:///C:/Users/NAVIGATOR/Documents/macaron-bakery-website/images/chalkboard.jpg');
	background-repeat: repeat;
	border-radius: 10px;
	border: solid 10px rgb(0,0,0);
}

#empty-space{
	width: 960px;
	height: 10px;
	background-image: url('file:///C:/Users/NAVIGATOR/Documents/macaron-bakery-website/images/chalkboard.jpg');
	background-repeat: repeat;
}

#macaron-label{ 
	width: 400px;
	text-align: center;
	margin: 0px auto;
}

h2{
	color: rgb(0,0,0);
}

ul{
	text-align: center;
	margin: 0px auto;
	list-style: none;
	line-height: 250%;
	width: 900px;
	font-size: 12;
	color: rgb(0,0,0);
	background-image: url('file:///C:/Users/SILOVIKI/Documents/macaron-bakery-website/chalkboard.jpg');
	background-repeat: repeat;
}

li.class1{
	display: inline-block;
	margin-right: 50px;
	margin-bottom: 50px;
}

.todays_specials{
	background-color: yellow;
	border: solid 3px yellow;
	color: black;
	font-weight: bold;
	width: 190px;
	height: 170px;
	padding: 10px;
	line-height: 120%;
	padding: 10px;
} /*The block of CSS code to be applied when the 'click' event occurs on the elements representing the macaron flavours.*/

.three-berry{
	background: -moz-linear-gradient(bottom, red, #FC4952, blue); /*Firefox*/
	background:	-o-linear-gradient(bottom, red, #FC4952, blue); /*Opera*/
	background:	-ms-linear-gradient(bottom, red, #FC4952, blue); /*Internet Explorer*/	
	background:	-webkit-linear-gradient(bottom, red, #FC4952, blue); /*Chrome*/
	font-weight: bold;
    width: 190px;
	height: 80px;
	line-height: 120%;
	padding: 10px;
}

.tropical-paradise{
	background-color: orange;
	font-weight: bold;
	width: 190px;
	height: 80px;
	line-height: 120%;
	padding: 10px;
}

.dark-chocolate{
	background-color: rgb(97,62,2);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 80px;
	line-height: 120%;
	padding: 10px;
}

.vanilla{
	background-color: rgb(250,204,125);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 100px;
	line-height: 120%;
	padding: 10px;
	margin: 10px;
}

.espresso{
	border: solid 3px rgb(0,0,0);
	background-color: rgb(64,41,2);
	color: rgb(255,255,255);
	font-weight: bold;
	width: 190px;
	height: 80px;
	line-height: 120%;
	padding: 10px;
	margin: 10px;
}

.green-tea{
	background-color: rgb(169,250,137);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 60px;
	line-height: 120%;
	padding: 10px;
}

.cinnamon{
	background-color: rgb(252,190,43);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 120px;
	line-height: 120%;
	padding: 10px;
	margin: 10px;
}

.taro{
	background-color: rgb(220,168,255);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 170px;
	line-height: 120%;
	padding: 10px;
}

.earl-grey{
	background-color: rgb(212,69,8);
	color: rgb(255,255,255);
	font-weight: bold;
	width: 190px;
	height: 130px;
	line-height: 120%;
	padding: 10px;
}

.hazelnut{
	background-color: rgb(255,80,8);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 100px;
	line-height: 120%;
	padding: 10px;
}

.pistachio{
	border: solid 4px rgb(129,255,87);
	background-color: rgb(255,196,87);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 130px;
	line-height: 120%;
	padding: 10px;
}

.honey{
	background-color: rgb(252,228,66);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 70px;
	line-height: 120%;
	padding: 10px;
}

.mint{
	background-color: rgb(55,191,21);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 60px;
	line-height: 120%;
	padding: 10px;
}

.milk-chocolate{
	background-color: rgb(164,99,49);
	color: rgb(0,0,0);
	font-weight: bold;
	width: 190px;
	height: 50px;
	line-height: 120%;
	padding: 10px;
	margin: 10px;
}

p{
	color: rgb(0,0,0);
	text-align: left;
	text-indent: 140px;
}

.yellow-block{
	background-color: rgb(239,255,0);
	border-color: rgb(239,255,0);
	color: rgb(239,255,0);
	margin-right: 10px;
}

.red-block{
	background-color: rgb(255,0,0);
	border-color: rgb(255,0,0);
	color: rgb(255,0,0);
	margin-right: 10px;
}

a#order-link{
	text-align: center;
	color: rgb(0,0,0);
	text-decoration: none;
	font-weight: bold;
	font-size: 120%;
}



Is This A Good Question/Topic? 0
  • +

Replies To: Event handler only works once.

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1842
  • View blog
  • Posts: 5,796
  • Joined: 15-January 14

Re: Event handler only works once.

Posted 21 October 2015 - 11:49 AM

I would use a different name than close, as window.close is already defined (you're overwriting it). It's not valid to have more than one element with the same ID, if you really need an element to represent an empty space instead of just positioning the elements where you want them, then use a class instead of ID. Instead of all of those repetitive if statements, you can put data inside each element and then write your Javascript code so that it does the same thing for every element with the data in that element. e.g.:

<li id="three-berry" class="class1" data-clickclass="todays_specials" data-description="3-berry is a flavour built from the finest naturally grown raspberries, blueberries, and blackberries. We crush a combination of the 3 using a blender, resulting in all natural flavours. No preservatives used.">THREE BERRY</li>


It makes the HTML code longer, but it moves all of the data about each element so that it's all contained in the same element, and you can remove all of the superfluous Javascript code and just do something like this:

event_target.setAttribute('data-originalclass', event_target.className);
event_target.setAttribute('data-originalcontent', event_target.innerHTML);
event_target.className = event_target.getAttribute('data-clickclass');
event_target.textContent = event_target.getAttribute('data-description');


Now your code is simple and all of your data is in the same place in the page instead of being mixed between the HTML and Javascript.

Other than that, keep an eye on your browser's developer console for error messages related to the events firing more than once.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,074
  • Joined: 08-June 10

Re: Event handler only works once.

Posted 21 October 2015 - 11:57 AM

Quote

However, how do I allow the event handler functions to work an infinite number of times without having to include the reload() method?

the event handler does work an infinite number of times (easily proved by adding some logging statements). the issue lies in invalid HTML creation. your close() function nests <li> inside <li>, which is invalid and duplicates IDs. Therefore your event target is a completely different element than the element fetched through the ID.
Was This Post Helpful? 0
  • +
  • -

#4 howardbc14  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 109
  • Joined: 21-October 15

Re: Event handler only works once.

Posted 21 October 2015 - 12:03 PM

Thanks for your comments and insights regarding simplifying Javascript and HTML code. I am making changes to address this.

I am still uncertain regarding what causes the event handler function not to work more than once. I have checked the browser for any messages and no errors were returned for the Javascript code.
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4138
  • View blog
  • Posts: 13,074
  • Joined: 08-June 10

Re: Event handler only works once.

Posted 21 October 2015 - 12:04 PM

Quote

I am still uncertain regarding what causes the event handler function not to work more than once.

read post #3 again, Iíve explained it there.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1