Element Properties

Goal

• ⚡ Understand (3) of the below code

js-test1.html

<script>

let demoElement = document.getElementById("demo"); --- (1)

demoElement.onclick = function changeContent () { --- (2)

demoElement.innerHTML = "Help me"; --- (3)

demoElement.style = "color: red"; --- (3)

}

</script>

Element Properties

To understand (3) we focus on Element Properties

As described here, HTML element has a lot of properties.

Ref: https://developer.mozilla.org/en-US/docs/Web/API/Element

You see innerHTML property.

And style property is not documented here. It is documented here https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style

Check properties in console

So, first let's check current <div#demo> properties.

Change properties

You can change these properties by assigning new values.

And we're doing the same thing inside function.

<script>

let demoElement = document.getElementById("demo"); --- (1)

demoElement.onclick = function changeContent () { --- (2)

demoElement.innerHTML = "Help me"; --- (3)

demoElement.style = "color: red"; --- (3)

}

</script>

Summery

I hope you understand this code! 🙋

<script>

let demoElement = document.getElementById("demo"); --- (1)

demoElement.onclick = function changeContent () { --- (2)

demoElement.innerHTML = "Help me"; --- (3)

demoElement.style = "color: red"; --- (3)

}

</script>

caution

If you understand the flow of this code, it is enough! 💯

70% understanding is enough! Let's go next! 👍