Menu
I am wondering why the event handler functions only works once. In other words, after the first ‘mouseover’ event to open up the description and the first ‘click’ event to close the description, subsequent ‘mouseover’ and ‘click’ events won’t open up the description and necessarily prevents the opportunity to close the text description.
HTML code
[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
[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);