educative.io

Style css onclick explanation

Please explain below

function handleClick(node) { ### what exact values are passed var value = node.getAttribute('class') || ''; value = value === '' ? 'clicked' : ''; ### what is this syntax node.setAttribute('class', value); } ALso h1.clicked {. #### what is h1.clicked ....please explain in detail color: navy; background-color: lightgray; }

Hi, @Zaki_Sheikh Basically, node.getAttribute is getting the value of an attribute named class, and if there’s no such attribute, then null will be passed to it (null is passed here). The following line will check that the value is either empty or clicked. If empty, then it will pass clicked value to the value variable. Finally, this clicked value is set as an attribute, and on setting this value, the style will be changed of all elements containing h1 headings.