<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{height:400px;width:600px; border:#333 solid 1px; padding:5px;}p{ line-height:18px; text-indent:2em;}</style></head><body><h2 id="con">JavaScript课程</H2><div id="txt"><h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5><p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p><p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p><p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p></div><form><!--当点击相应按钮,执行相应操作,为按钮添加相应事件--><input type="button" value="改变颜色" onclick="color()" > <input type="button" value="改变宽高" onclick="width()"><input type="button" value="隐藏内容"onclick="hide()" ><input type="button" value="显示内容"onclick="display()" ><input type="button" value="取消设置"onclick="reset()" ></form><script type="text/javascript">//定义"改变颜色"的函数var txt=doucument.getElementById("txt");function color(){txt.style.color="#ccc";txt.style.backgroundColor="red";}//定义"改变宽高"的函数function width(){txt.style.width="200px";txt.style.height="600px";}//定义"隐藏内容"的函数function hide(){txt.style.display="none";}//定义"显示内容"的函数function display(){txt.style.display="block";}//定义"取消设置"的函数function reset(){var message=confirm("Do you want reset all settings?");if(message=true) {txt.removeAttribute('style');}}</script></body></html>
亲,特地复制到编辑器帮你寻找问题了
两个问题!
1、注意单词拼写,你document拼写错了
2、注意JS中的关键字以及保留字,关键字以及保留字(有特殊含义的单词)不能用作变量名以及函数名
帮你改好了,你看一下吧
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body {font-size: 12px;}#txt {height: 400px;width: 600px;border: #333 solid 1px;padding: 5px;}p {line-height: 18px;text-indent: 2em;}</style></head><body><h2 id="con">JavaScript课程</H2><div id="txt"><h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5><p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p><p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p><p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p></div><form><input type="button" value="改变颜色" onclick="color()"><input type="button" value="改变宽高" onclick="changeWidth()"><input type="button" value="隐藏内容" onclick="hide()"><input type="button" value="显示内容" onclick="display()"><input type="button" value="取消设置" onclick="resetBtn()"></form><script type="text/javascript">// 定义"改变颜色"的函数var txt = document.getElementById("txt");console.log(txt)function color() {txt.style.color = "#ccc";txt.style.backgroundColor = "red";}//定义"改变宽高"的函数function changeWidth() {txt.style.width = "200px";txt.style.height = "600px";}//定义"隐藏内容"的函数function hide() {txt.style.display = "none";}// 定义"显示内容"的函数function display() {txt.style.display = "block";}//定义"取消设置"的函数function resetBtn() {var message = confirm("Do you want reset all settings?");if (message == true) {txt.removeAttribute('style');}}</script></body></html>
还有一个问题,忘记说了。
单等 = 是赋值
双等 == 以及三等 === 是比较,在if语句中,括号内要用两等或者三等