                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

请问一下我这个代码为什么不能正常操作显示呢

<!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>

qq_慕函数0103986

2019-04-05

源自：JavaScript入门篇 4-1

关注问题我要回答

970

操作

收起

2 回答

魔仙堡下的老仙女回答被采纳 +2 积分
2019-04-06

亲，特地复制到编辑器帮你寻找问题了

两个问题！

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>