任務(wù)一：零基礎(chǔ)JavaScript編碼（一）
任務(wù)描述
- 參考以下示例代碼，補(bǔ)充其中的JavaScript功能，完成一個(gè)JavaScript代碼的編寫
- 本任務(wù)完成的功能為：用戶可以在輸入框中輸入任何內(nèi)容，點(diǎn)擊“確認(rèn)填寫”按鈕后踊兜，用戶輸入的內(nèi)容會(huì)顯示在“您輸入的值是”文字的右邊
代碼
<label>請(qǐng)輸入北京今天空氣質(zhì)量：<input id="aqi-input" type="text"></label>
<button id="button">確認(rèn)填寫</button>
<div>您輸入的值是：<span id="aqi-display">尚無(wú)錄入</span></div>
(function() {
/*
在注釋下方寫下代碼
給按鈕button綁定一個(gè)點(diǎn)擊事件
在事件處理函數(shù)中
獲取aqi-input輸入的值，并顯示在aqi-display中
*/
// 獲取id的函數(shù)
function $(id){
return document.getElementById(id);
}
// 顯示結(jié)果函數(shù)
function renderResult(result) {
$('aqi-display').innerHTML = $('aqi-input').value;
}
// 給按鈕綁定點(diǎn)擊事件
function initEvent() {
$('button').addEventListener('click',renderResult,false);
}
// 執(zhí)行函數(shù)
initEvent();
})();
效果預(yù)覽
小結(jié)
- JavaScript初體驗(yàn)
- 初步明白JavaScript的簡(jiǎn)單基本語(yǔ)法，如變量族吻、函數(shù)
- 初步了解JavaScript的事件是什么
- 初步了解JavaScript中的DOM是什么
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
