abstract：基本思路:要完成聊天信息的生成,原理其實(shí)并不難.首先在<body>內(nèi)部創(chuàng)立一個(gè)文本框<ul>標(biāo)簽和一個(gè)<button>按鈕,再在之后創(chuàng)立一個(gè)空的有序列表<ol>.之后在腳本中分別獲取到這三個(gè)標(biāo)簽并存放在相應(yīng)的變量中,通過(guò)對(duì)此button綁定一個(gè)帶有函數(shù)功能的單擊事件而實(shí)現(xiàn)此功能.注意事項(xiàng):在此函數(shù)中,先創(chuàng)建一個(gè)<li>標(biāo)簽,并通過(guò)連接in
基本思路:要完成聊天信息的生成,原理其實(shí)并不難.首先在<body>內(nèi)部創(chuàng)立一個(gè)文本框<ul>標(biāo)簽和一個(gè)<button>按鈕,再在之后創(chuàng)立一個(gè)空的有序列表<ol>.之后在腳本中分別獲取到這三個(gè)標(biāo)簽并存放在相應(yīng)的變量中,通過(guò)對(duì)此button綁定一個(gè)帶有函數(shù)功能的單擊事件而實(shí)現(xiàn)此功能.
注意事項(xiàng):
在此函數(shù)中,先創(chuàng)建一個(gè)<li>標(biāo)簽,并通過(guò)連接innerHTML使獲得的值為文本框中輸入的值,再通過(guò)appendChild方法,使創(chuàng)立的li標(biāo)簽是之前空標(biāo)簽<ol>下方的子標(biāo)簽,從而可以輸出多行顯示多行.
在自己輸入代碼時(shí),在獲取相關(guān)元素時(shí)應(yīng)該是使用document.getElementsByName('name值')之類(lèi)的方法,但是第一次敲時(shí)忘記了在getElementsByName('name值')之前要加上document,使此功能無(wú)法實(shí)現(xiàn),需要多注意.
完整代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>聊天信息的生成原理</title>
</head>
<body>
<input type="text" name="text" placeholder="請(qǐng)輸入內(nèi)容">
<button style="border:none; background-color:#294; color: #fff;font-size:18px;font-family: 楷體;cursor:pointer;">點(diǎn)擊
</button>
<ol></ol>
<script type="text/javascript">
let input = document.getElementsByName('text').item(0);
let button = document.getElementsByTagName('button').item(0);
let ol = document.getElementsByTagName('ol').item(0);
button.onclick = function(){
let li = document.createElement('li');
li.innerHTML = input.value;
ol.appendChild(li);
input.value = '';
}
</script>
</body>
</html>
Correcting teacher：查無(wú)此人Correction time：2019-03-18 09:11:24
Teacher's summary：寫(xiě)的不錯(cuò)。做項(xiàng)目就是多想多做，繼續(xù)加油。