iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列 第 26

#26 JS: HTML DOM Events - Part 4(Start Over Version)

  • 分享至 

  • xImage
  •  

After understanding the basic HTML DOM Event concept in the last article, now we move on to an example of inserting HTML language in <script>.

Step 1. Adding <div> and <input> tags in <body></body>

In the beginning, we write box in the division.
input is a tag allowing users to key in context in a single line.

    <div id="box">Box</div>
    <input id="input1" type="text"> 

Step 2.

  • Use innerHTML to replace the initial--box--with the new context--Welcome to HTML DOM v2.
  • Install a listener called keyup.
    (keyup = click a button of a keyboard and it bounces back right away.)

Usually when a function is used for calling back, the system will input an object--event--into it.
So we can name a parameter(I wrote "e") to output the value of the input frame.
Usage scenario: when creating a register page, we may need a listener to monitor the user's behavior, e.g. checking the value type of the password they key in.

<script type="text/javascript">
       const box1 = document.getElementById('box')
       box1.innerHTML= '<p>Welcome to HTML DOM v2.</p>'
       const in1 = document.getElementById('input1')
       in1.addEventListener('keyup',function(e) {
       console.log('e.target.value',e.target.value)
       })
})
</script>

https://ithelp.ithome.com.tw/upload/images/20210925/20130362WKcKXAZvg0.png


Music of Today: Hello, Anxiety by Phum Viphruit

Yes
PS, Use this song to look at the difficulty learning coding at its face :)


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./images/emoticon/emoticon12.gif


上一篇
#25 JS: HTML DOM Events - Part 3(Start Over Version)
下一篇
#27 JS: Timing Events - Part 1
系列文
Learn & Play JavaScript -- Entry-Level Front-End Web Development30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言