任务一：零基础JavaScript编码（一）
任务描述
- 参考以下示例代码，补充其中的JavaScript功能，完成一个JavaScript代码的编写
- 本任务完成的功能为：用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边
代码
<label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
<button id="button">确认填写</button>
<div>您输入的值是：<span id="aqi-display">尚无录入</span></div>
(function() {
/*
在注释下方写下代码
给按钮button绑定一个点击事件
在事件处理函数中
获取aqi-input输入的值，并显示在aqi-display中
*/
// 获取id的函数
function $(id){
return document.getElementById(id);
}
// 显示结果函数
function renderResult(result) {
$('aqi-display').innerHTML = $('aqi-input').value;
}
// 给按钮绑定点击事件
function initEvent() {
$('button').addEventListener('click',renderResult,false);
}
// 执行函数
initEvent();
})();
效果预览
小结
- JavaScript初体验
- 初步明白JavaScript的简单基本语法，如变量、函数
- 初步了解JavaScript的事件是什么
- 初步了解JavaScript中的DOM是什么
