突然发现只看书不练习也是不行的，这么简单的我竟然都不会写了。

要注意innerHTML，innerText和outText之间的异同。

同时也要会使用DOM2的添加事件，移除事件等

<!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 btn1=document.getElementById('aqi-input');

var btn2=document.getElementById('aqi-display');

var btn3=document.getElementById('button');

btn3.addEventListener('click',function(){

if (btn1.value)

{

btn2.innerHTML=btn1.value;

}

else{

btn2.innerHTML='尚无录入';

}

},false);

})();

</script>

</body>

</html>

百度前端技术学院task13源代码的更多相关文章

  1. 百度前端技术学院task16源代码

    欢迎访问我的github:huanshen 做这道题目的时候遇到了很多困难. 1.怎么给空对象添加数据,愣是不知道从哪里下手:遍历对象,一个个输出操作: 2.中英文的正则表达式不知道,赶紧去百度: 3 ...

  2. 百度前端技术学院task35源代码——听指令的小方块3

    任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当text ...

  3. 百度前端技术学院task15源代码

    这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件. 刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点.再通过schildNode[ ...

  4. 百度前端技术学院task14源代码

    刚开始理解错误,以为是读取对象,结果后面才发现是二维数组. 另外对于数组排序,创建新的节点啊,输入到doM中啊,都不是很熟悉. <!DOCTYPE html> <html> & ...

  5. 百度前端技术学院-task1.3源代码

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  6. 百度前端技术学院（IFE）2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  7. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  8. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

  9. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

随机推荐

  1. 苹果电脑Mac系统如何安装Adobe Flash Player

    一)安装/更新Adobe Flash Player 开系统偏好设置 , Flash player  更新,立即检查/立刻安装: Flash插件官方每月常规更新1~2次,为避免频繁过期,建议设置为允许A ...

  2. SpringMVC中控制器接收JSP页面表单的参数接收方式详解及细节注意（400错误）

    控制器方法中参数的接收 (1)以前的参数接收: String  param = req.getParameter(name): (2)SpringMVC简化这个操作,只需要给控制器方法添加参数即可 a ...

  3. Python基础（一）--变量、注释、文件头

    一.变量 1.什么是变量 变量是变化的量,用来保存程序执行的状态以及状态的变化 2.变量定义规范 #1. 变量名只能是:字母.数字或下划线的任意组合 #2. 变量名的第一个字符不能是数字 #3. 关键 ...

  4. javascript之BOM对象（一window对象）

    javascript包含三个部分,ECMAScript,BOM和DOM.ECMAScript是javascript的核心,包含javascript的基础语法.在Web中使用javascript,BOM ...

  5. xdvipdfmx:fatal: Unable to open "xxx.pdf". Output file removed. fwrite: Broken pipe xelatex.exe

    解决方法: 关闭外部PDF阅读器,重新编译运行下就好了. 参考:https://github.com/James-Yu/Atom-LaTeX/issues/109

  6. socket小程序写一个客户端，实现给服务端发送hello World字符串，将客户端发送的数据变成大写后返回

    写一个客户端,实现给服务端发送hello World字符串,将客户端发送的数据变成大写后返回 本机id是192.168.xx.xy 服务端 import socket soc = socket.soc ...

  7. luoguP4197:Peaks（Kruskal重构树+主席树）或者（点分树+离线）

    题意:有N座山,M条道路.山有山高,路有困难值(即点权和边权).现在Q次询问,每次给出(v,p),让求从v出发,只能结果边权<=p的边,问能够到达的山中,第K高的高度(从大到小排序). 思路:显 ...

  8. 负载均衡环境：nginx + 2tomcat

    部署两个服务 安装两个tomcat,tomcat安装,参考:https://www.cnblogs.com/uncleyong/p/10742650.html 两个tomcat的端口要不一样(shut ...

  9. mybatis框架-使用resultMap实现高级结果映射，collection属性的使用

    需求:获取指定用户的用户信息和地址列表 修改user实体类  添加集合的引用. /** * 根绝用户id,获取该角色下的地址信息 * @param userID * @return */ public ...

  10. Taro-UI 2.0样式在H5上生效，微信小程序不生效？

    答案: https://taro-ui.aotu.io/#/docs/questions taro-ui 自定义样式覆盖小程序组件样式使用到了 globalClass 这个微信小程序特性,由于微信小程 ...