Week 6 Example Button Toggle

addEventListener() click Example

Cheese of the UK

Banbury Cheese

Once one of Banbury's most prestigious exports, and nationally famous, its production went into decline by the 18th-century, and eventually ceased. The cheese is best known today through an insult in Shakespeare's Merry Wives of Windsor (1597).

Cheddar Cheese

The UK's most famous cheese, and one of the most popular. Aging is the only difference between mild and sharp Cheddars. The longer cheese is aged naturally, the sharper and more pronounced the Cheddar flavor becomes. Mild Cheddar cheese is generally aged for 2 to 3 months, whereas an extra sharp might be aged for as long as a year.

Stilton Cheese

Stilton is produced in two varieties: Blue, which has had Penicillium roqueforti added to generate a characteristic smell and taste, and White, which has not. Stilton is only made in three Counties in England: Derbyshire, Nottinghamshire and Leicestershire, and is is a protected cheese. Stilton is protected by a Certification Trade Mark and EU Protected Designation of Origin (PDO).

Stinking Bishop Cheese

Perhaps the UK's most notorious cheese, known for its distinctive odour. The colour of Stinking Bishop ranges from white/yellow to beige, with an orange to grey rind. It is moulded into wheels 2 kilograms (4.4 lb) in weight, 20 centimetres (7.9 in) in diameter, and 4 centimetres (1.6 in) deep. Only about 20 tonnes are produced each year. The distinctive odour comes from the process with which the cheese is washed during its ripening; it is immersed in perry made from the local Stinking Bishop pear (from which the cheese gets its name) every four weeks while it matures. To increase the moisture content and to encourage bacterial activity, salt is not added until the cheese is removed from its mould.

		
001window.onload = function(){
		
002	// start search position for h2 nodes (as there are h2's in the html above!)
		
003	const containerDiv = document.getElementById('pagewrapperLight');
		
004	// We create a collection of all the H2 nodes
		
005	const headingsElements = containerDiv.getElementsByTagName('h2');
		
006
		
007	// Get target section to place list
		
008	const targetElement = document.getElementById('cheese-list');
		
009
		
010	// We create the UL that wil hold the list items
		
011	const ulElement = document.createElement('ul');
		
012	
		
013	 //Go through the h2 node collection and 
		
014	// for each node found, we create 
		
015	// 1)   create a new LI element
		
016	// 2)   create a new A element
		
017	// 3)   create a new text Node - using the H2 node inner text
		
018	// 4)	add href link attribute to A element
		
019	// 5)   append the  text node to the A element created
		
020	// 6)   append the  A element created to the LI element created
		
021	// 7)   append the LI with text to the UL element created
		
022	// 8)   add id attribute to heading elements
		
023	
		
024	for(let i = 0; i < headingsElements.length; i++)
		
025	{ 
		
026
		
027/*1*/	const liElement = document.createElement('li');
		
028/*2*/	const aElement = document.createElement('a');
		
029/*3*/	const aText = document.createTextNode((headingsElements[i].innerText).replace(' Cheese',''));
		
030/*4*/	aElement.setAttribute('href','#link'+i);
		
031/*5*/	aElement.appendChild(aText);
		
032/*6*/	liElement.appendChild(aElement);	
		
033/*7*/	ulElement.appendChild(liElement);
		
034/*8*/	headingsElements[i].setAttribute('id','link'+i);
		
035	 }
		
036
		
037	//the new ul with the list is appended to the DOM!
		
038	targetElement.appendChild(ulElement);
		
039	
		
040	const btn = document.getElementById("darkmode");
		
041	btn.addEventListener('click',function(){
		
042		if(this.innerHTML =="Button Clicked")
		
043		{
		
044			this.innerHTML = "Clicked again";
		
045		}
		
046		else
		
047		{
		
048			this.innerHTML = "Button Clicked";
		
049		}
		
050	});
		
051}

JavaScript 2022

Term 3 Wednesday