DOM onclick event?

[shooter2749]

var p = document.createElement("P");
             var textP = document.createTextNode("awd awd aw da wd aw da wd aw dawdawd awd awdaw dawd awdawda wdawda dsa dacds ")
             p.appendChild(textP);
             document.body.appendChild(p);
             
             var btnS = document.createElement("BUTTON");        
             var tS = document.createTextNode("smaller");      
             btnS.appendChild(tS);                               
             document.body.appendChild(btnS);

             var btnN = document.createElement("BUTTON");        
             var tN = document.createTextNode("normal");      
             btnN.appendChild(tN);                               
             document.body.appendChild(btnN);

             var btnB = document.createElement("BUTTON");   
             var tB = document.createTextNode("bigger");      
             btnB.appendChild(tB);                               
             document.body.appendChild(btnB);

so I have this DOM code and I need to make the text in the oaragraph bigger and smaller but I dont know how to create onclick events in DOM

[alexemilberg]

You would want something like the onclick-event, like so:

 

// clickElement = the element getting clicked
clickElement.onclick = function() {
  	// toByStyledElement = The element to be styled
	toBeStyledElement.style.fontSize = "20px";
};

 

[Narley]

It is easy to use the element's `addEventListener` function like so:

function clickHandler(event) {
	// do something that increased or decreases the size	
}

const clickElement = document.querySelector('button.button');

// clickElement could be nothing
if (clickElement) {
	clickElement.addEventListener('click', clickHandler);
}