请教下为什么我的按钮不起作用？
逐梦凡
2015-05-18 15:50
<!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="changeColor()">
<input type="button" value="改变宽高" onclick="changeSize()">
<input type="button" value="隐藏内容" onclick="hidetext()">
<input type="button" value="显示内容" onclick="changeColor()">
<input type="button" value="取消设置" onclick="rec()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
var hello=document.getElementById("txt");
changeColor:function(){
hello.style.color="red";
hello.style.backgroundColor="green";}
//定义"改变宽高"的函数
changeSize:function(){
hello.style.width="400px";
hello.style.height="200px";}
//定义"隐藏内容"的函数
function hidetext() {
hello.style.display="none";}
//定义"显示内容"的函数
function showtext() {
hello.style.display="block";}
//定义"取消设置"的函数
vir mess=confirm("取消设置")；
function rec(){
if(mess=true){hello.className="txt";}
else{}
}}
</script>
</body>
</html>
2回答
-
- Perona
- 2015-05-18 16:34:58
vir mess=confirm("取消设置")；这个分号错了，定义变量的关键字也敲错了，应该改为
var mess=confirm("取消设置");还有定义的mess应该放在rec()里面，这样只有调用rec()函数才会引用到mess变量，一般不推荐定义全局变量。把mess定义成全局对象，那么页面一开始就会弹出这个对话框。
changeColor:function(){
hello.style.color="red";
hello.style.backgroundColor="green";}
//定义"改变宽高"的函数
changeSize:function(){
hello.style.width="400px";
hello.style.height="200px";}
这里我理解为你是想定义为一个函数表达式，那么之前应该定义个变量。2个函数之间也应该有逗号分隔。
所以改为：
var change={changeColor:function(){ hello.style.color="red"; hello.style.backgroundColor="green";}, //定义"改变宽高"的函数 changeSize:function(){ hello.style.width="400px"; hello.style.height="200px";} }<input type="button" value="改变颜色" onclick="changeColor()">
<input type="button" value="改变宽高" onclick="changeSize()">
<input type="button" value="隐藏内容" onclick="hidetext()">
<input type="button" value="显示内容" onclick="changeColor()">
<input type="button" value="取消设置" onclick="rec()">
这里调用的函数也出错了，改变颜色和显示内容的函数都是changeColor(),还有就是我把你下面的改变颜色和改变宽高的函数给改了，所以这里也得改改。
<input type="button" value="改变颜色" onclick="change.changeColor()"> <input type="button" value="改变宽高" onclick="change.changeSize()"> <input type="button" value="隐藏内容" onclick="hidetext()"> <input type="button" value="显示内容" onclick="showtext()"> <input type="button" value="取消设置" onclick="rec()">
下面是修改后的全部代码，你看看。
<!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="change.changeColor()"> <input type="button" value="改变宽高" onclick="change.changeSize()"> <input type="button" value="隐藏内容" onclick="hidetext()"> <input type="button" value="显示内容" onclick="showtext()"> <input type="button" value="取消设置" onclick="rec()"> </form> <script type="text/javascript"> //定义"改变颜色"的函数 var hello=document.getElementById("txt"); var change={changeColor:function(){ hello.style.color="red"; hello.style.backgroundColor="green";}, //定义"改变宽高"的函数 changeSize:function(){ hello.style.width="400px"; hello.style.height="200px";}} //定义"隐藏内容"的函数 function hidetext() { hello.style.display="none";} //定义"显示内容"的函数 function showtext() { hello.style.display="block";} //定义"取消设置"的函数 function rec(){ var mess=confirm("取消设置"); if(mess=true){ hello.removeAttribute('style'); }else{} } </script> </body> </html> -
- 筱灰灰
- 2015-05-18 16:21:06
changeColor()方法定义错误 function changeColor（）{}这样的 那种写法是对象的方式
<input type="button" value="显示内容" onclick="changeColor()"> 方法掉错了
changeSize:function(){ 和第一个一样
"取消设置"的函数错了
function rec(){
if(confirm("取消设置")){
hello.removeAttribute('style');
}
}
JavaScript入门篇
739817 学习 · 9566 问题
相似问题
回答 1
回答 4
回答 2
回答 3
回答 3