第二十到第二十一天：让你和页面对话

task1 控制元素的显示及隐藏

实现以下功能：

  • 当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
  • 当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项
 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>IFE ECMAScript</title>

 6     <style>

 7         select {

 8             display: none;

 9         }

10     </style>

11 </head>

12 <body>

13     <label>

14         <input id="school" name="status" type="radio">

15         School

16     </label>

17     <label>

18         <input id="company" name="status" type="radio">

19         Company

20     </label>

21

22     <select id="school-select">

23         <option>北京邮电大学</option>

24         <option>黑龙江大学</option>

25         <option>华中科技大学</option>

26     </select>

27

28     <select id="company-select">

29         <option>百度</option>

30         <option>爱奇艺</option>

31     </select>

32     <script>

33       var d1 = document.querySelector('#school');

34       var d2 = document.querySelector('#company');

35       var s1 = document.querySelector('#school-select');

36       var s2 = document.querySelector('#company-select');

37       d1.addEventListener('click', function(){

38         if (d1.checked == true){

39             s1.style.display = 'inline';

40             s2.style.display = 'none';

41         }

42       })

43       d2.onclick = function(){

44         s2.style.display = 'inline';

45         s1.style.display = 'none';

46       }

47     </script>

48 </body>

49 </html>

task2

百度前端技术学院-基础-day20-21的更多相关文章

  1. 百度前端技术学院-基础-day1

    2020.9.14 今天我开始在百度前端技术学院学习基础课程. 先立一个Flag,希望我能在30天之内学完前四十天的课程,后续课程再一天一节. 第一天的内容主要是提供了很多基础学习的网页,比如W3sc ...

  2. 百度前端技术学院-基础-day2

    2020.9.15 今天是学习前端基础技术的第二天,今天制作了一个在线简历,纯html的那种.帮助我复习了以前的基础知识,也增加了新的知识点,比如制作列表可以用fieldset来整合数据. 我的在线简 ...

  3. 百度前端技术学院-基础-day17-18

    JavaScript小练习 task 1 基于上一个任务中,关于加减乘除的任务,加上对于特殊情况的判断,比如判断两个输入框是否都是正常输入了数字类型的内容,比如除法的时候除数是否为0,当判断到输入有异 ...

  4. 百度前端技术学院-基础-day22-24

    第二十二天到第二十四天:JavaScript里面的居民们 task1 题目: <div> <label>Number A:<input id="radio-a& ...

  5. 百度前端技术学院-基础-day25-27

    倒数开始 滴答滴 滴答滴 task1 题目: 我们现在来做一个最简单的时钟,通过小练习来学习 Date,复习定时,然后再练习一下函数的封装具体需求如下: 在页面中显示当前日期及时间,按秒更新 格式为 ...

  6. 百度前端技术学院-基础-day7.8

    任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...

  7. 百度前端技术学院-基础-day3

    2020.9.15 第三天的课程内容,复习了一些CSS的基础属性(果然不用就会忘). 学习了一些新的属性,比如text-shadow.text-indent(还不是很清楚).font-style等等. ...

  8. 百度前端技术学院-基础-day5.6

    今天学习了关于盒模型.浮动等页面布局的方法. 受到同学的启发,顺便学习了flex的布局. 还了解了一些编码的基本规则. 对我接下来的学习帮助很大. 交作业: HTML : https://github ...

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

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

随机推荐

  1. c语言 ：write与read系统调用总结

    在学习的时候总是有点迷糊于是在网上找到一些比较好的分享一下  下面举一个例子: 1 #include <stdio.h> 2 #include <unistd.h> 3 #in ...

  2. 在Linux深度系统deepin下安装docker

    wget -qO- https://get.docker.com/ | sh wget -qO- https://get.docker.com/ | sh

  3. Python中的matplotlib xticks

    文章来自 Claroja的CSDN博客,仅做搬运.原文链接 在matplotlib中ticks表示的是刻度,而刻度有两层意思,一个是刻标(locs),一个是刻度标签(tick labels).在作图时 ...

  4. 当年使用dpdk干的事

    mark一下  晚点上传 先不上传 ....0727

  5. mysql之优化器、执行计划、简单优化

    mysql之优化器.执行计划.简单优化 2018-12-12 15:11 烟雨楼人 阅读(794) 评论(0) 编辑 收藏 引用连接: https://blog.csdn.net/DrDanger/a ...

  6. 记最近一次ceph故障修复

    前言 所谓吃一堑长一智,每次面对问题才是最好的学习机会,在面对问题的时候,尽量是能够自己去解决,或者去尝试能够最接近答案,确实无法解决再去寻求他人帮助,这样成长的会更快一些,在学校读书做题的时候,老师 ...

  7. Linux下如何创建loop device

    在Linux中,有一种特殊的块设备叫loop device,这种loop device设备是通过映射操作系统上的正常的文件而形成的虚拟块设备 因为这种设备的存在,就为我们提供了一种创建一个存在于其他文 ...

  8. linux笔记【简版】

    1.linux简介 kernel 内核 shell 外壳 (类似win上的cmd) sh,Bash:#root,$user csh:#root,%user filesystem 文件管理系统 2.优势 ...

  9. PID算法的C语言实现

    1.根据我控制算法类文章中关于PID的理论的一些描述,同时也根据网络上一些其他的PID文章,以及自己最近一个项目的实践后,总结了几套基于C语言的PID算法,由于网络中很少有人进行分享完整的PID算法实 ...

  10. tp5 跨域问题

    只需要三行代码,写到入口文件public/index.php处即可解决 header("Access-Control-Allow-Origin:*"); header(" ...