#25 JS: HTML DOM Events - Part 3(Start Over Version)
Since the knowledge I learned yesterday was over my head, I decided to try another tutorial video by Bruce, and start over again!
Two frequently used global variables
- window.alert(“”): for controlling the whole browser and its function, e.g. popup message display.
- document: for looking for tags or id of html file, inserting CSS.
Learning step by step
First of all, in <body></body>, write down <p> and <button> tags, and add id to them, so that we can get the tag id when coding in JavaScript.
<p id="title">Round 1 of HTML DOM</p>
<button id="btn">Button</button>
Secondly, let me explain by tags in the <script></script>.
1. tag <p>
Add an event listener--load--for this window to monitor this web page, so that when the page is fully loaded, the listener will call back(回呼) the function.
After we get the tag, we can revise the context easily.
For example: let’s revise the title by innerText property.
*Intro of "innerText": https://www.w3schools.com/jsref/prop_node_innertext.asp
<script type="text/javascript">
window.addEventListener('load', function() {
const p1 = document.getElementById('title')
console.log(p1)
p1.innerText="Round 2 of HTML DOM"
2. tag <button>
Add an event listener to monitor the behavior--click, so that when the button is clicked, the listener will call back the function and display clicking in the console of dev tool.
const b1 = document.getElementById('btn')
b1.addEventListener('click',function() {
console.log('Clicking')
})
})
Music of Today: Paper Throne by Phum Viphurit
Like/Share/Follow
Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.
<<: Day12_ISO31000:2009 风险管理原则与指导纲要~嘛嘛浩了~好多个ISO~XD"
>>: 30天学会C语言: Day 9-Arrrrrrrrrrrrray~~
[13th][Day13] docker file
相较於用 docker commit ，比较多人是使用 『Dockerfile』来建立 image ...
Day 26 [Python ML、资料清理] 资料缩放以及标准化
在这边我们会学到如何将资料做正规化(Normalization)及缩放(Scaling) 取得环境 ...
零风险（zero risks）
-ISO 31000 在风险管理社区中，人们普遍认为无法消除风险，并且“没有风险”是不可能的，因为...
建立前端开发准则，让团队能够有效率的开发好维护的程序码（by 均一前端工程师宜陞）
【前言】均一的程序码基础 junyiacademy 从 2013 年 fork Khan Acad...
第 1 集：转生到 Bootstrap 5 世界
30天转生到 bootstrap 5 的意识界 类型 前端切版 / Sass / Bootstrap...