任务一：零基础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是什么