任务1
阅读
首先学习了解 JavaScript 事件的知识
JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
（即对发生了什么事做出反应）
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时
所有 HTML DOM 事件的列表，请访问完整的 HTML DOM 事件对象参考手册
编码
<input id="name" type="text">
<button id="submit-btn">Submit</button>
在HTML中增加上面的代码，然后通过JavaScript编写如下功能：
- 当点击按钮 submit-btn 时，在console中输出 name 中的内容
- 在输入过程中，如果按回车键，则同样执行上一条的需求
- 在输入过程中，如果按 ESC 键，则把输入框中的内容清空
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE 20</title>
</head>
<body onkeyup='whichbutton(event)'>
<input id="name" type="text">
<button id="submit-btn">Submit</button>
<script>
document.getElementById('submit-btn').onclick=function() {
console.log(document.getElementById('name').value);//HTML text 对象的value属性
}
function whichbutton(event) {
if (event.keyCode===13) {
console.log(document.getElementById('name').value);
}else if (event.keyCode===27) {
console.clear();//清空console
}
}
</script>
</body>
</html>
<!-- 在HTML中增加上面的代码，然后通过JavaScript编写如下功能：
当点击按钮 submit-btn 时，在console中输出 name 中的内容
在输入过程中，如果按回车键，则同样执行上一条的需求
在输入过程中，如果按 ESC 键，则把输入框中的内容清空 -->
这边翻了犯了一个错误是 document.getElementById 前没有带上 document 。堪比上次写function忘带括号。
任务2
接下来学习如何用 JavaScript 操作 DOM 样式（CSS style）
控制元素的显示及隐藏
阅读
- W3School 样式
- W3School HTML DOM Style 对象
- javascript 动态修改css样式方法汇总(四种方法)
- cssText的用法以及特点
- JavaScript之ClassName属性学习
编码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
<style>
/*select {
display: none;
}*/
</style>
</head>
<body>
<label>
<input id="school" name="status" type="radio">
School
</label>
<label>
<input id="company" name="status" type="radio">
Company
</label>
<select id="school-select">
<option>北京邮电大学</option>
<option>黑龙江大学</option>
<option>华中科技大学</option>
</select>
<select id="company-select">
<option>百度</option>
<option>爱奇艺</option>
</select>
<script>
document.getElementById('school').onclick = function() {
document.getElementById('company-select').style.display= 'none';
document.getElementById('school-select').style.display= 'inline';
}
document.getElementById('company').onclick = function() {
document.getElementById('school-select').style.display= 'none';
document.getElementById('company-select').style.display= 'inline';
}
</script>
</body>
</html>
<!-- 基于如上 HTML，实现以下功能：
s
当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项 -->
之前一直在找button对象的那个圆点被按下的属性，没找到，就绑的onclick。
网友评论