IFE_Task/JS_task_one.html at master · Jer-X/IFE_Task · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>

  <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
  <button id="button">确认填写</button>

  <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>

<script type="text/javascript">

(function() {
  /*
  在注释下方写下代码
  给按钮button绑定一个点击事件
  在事件处理函数中
  获取aqi-input输入的值，并显示在aqi-display中
  */
  var btn = document.querySelector('#button'),
      aqi_input = document.querySelector('#aqi-input'),
      aqi_display = document.querySelector('#aqi-display');
  btn.addEventListener('click', function(){
      var val = aqi_input.value;
      if (val === ''){
        alert('请输入数据');
      } else {
        aqi_display.innerHTML = val;
      }

  });

})();

</script>
</body>
</html>