按钮没绑定上是哪里出问题了
来源：6-7 完成案例文字图片显示和变换
Ting111
2020-07-06 14:34:05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
canvas{background-color:#EEEED1;
}
*{
margin: 0 auto;
}
#big{
height: 300px;
width: 1000px;
margin-top: 15%;
}
#left{
height: 300px;
width: 300px;
background-color: #CDBE70;
float: left;
}
#right{
float: right;
}
input{
height: 20px;
width: 240px;
border-radius: 10px;
display: block;
margin-top: 20px;
}
button{
height: 30px;
width: 80px;
margin-top: 20px;
margin-left: 100px;
border-radius: 10px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="big">
<div id="left">
<input type="text" name="" id="xm" placeholder=" 请输入姓名">
<input type="text" name="" id="dz" placeholder=" 请输入地址">
<input type="text" name="" id="zy" placeholder=" 请输入职业">
<input type="text" name="" id="kh" placeholder= " 请输入口号">
<button id="btn">提交</button>
</div>
<div id="right">
<canvas id="canvas" width="700px" height="300px">您的浏览器不支持canvas
</canvas>
</div>
</div>
<script>
var ct=canvas.getContext('2d');
ct.fillRect(80,80,500,100);
ct.strokeRect(80,80,500,100);
var img=new Image;
img.src='http://climg.mukewang.com/59a7df40000165fa06000600.jpg';
img.onload=function(){
ct.drawImage(img,80,80,100,100);
}
var a="姓名";
ct.font='25px 微软雅黑'
ct.fillStyle='white';
ct.fillText(a,200,105);
var b='地址';
ct.font='20px 微软雅黑';
ct.fillStyle='white';
ct.fillText(b,200,130);
var c='职业';
ct.font='20px 微软雅黑';
ct.fillStyle='white';
ct.fillText(c,200,160);
var d='口号';
ct.font='20px 微软雅黑';
ct.fillStyle='white';
ct.fillText(d,400,120);
btn.onclick=function(){
a.innerHTML=xm.value;
b.innerHTML=dz.value;
c.innerHTML=zy.value;
d.innerHTML=kh.value;
}
</script>
</body>
</html>
4回答
-
好帮手慕码
2020-07-06
同学你好，使用谷歌浏览器，测试你新粘贴的代码是不报错的：
另，新粘贴出来的代码中有一些问题：获取的value和默认值写反了：
建议同学使用其他的浏览器、或者是清楚浏览器的缓存再测试一下。
祝学习愉快~
0 -
Ting111
提问者
2020-07-06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style>
canvas{background-color:#EEEED1;
}
*{
margin: 0 auto;
}
#big{
height: 300px;
width: 1000px;
margin-top: 15%;
}
#left{
height: 300px;
width: 300px;
background-color: #CDBE70;
float: left;
}
#right{
float: right;
}
input{
height: 20px;
width: 240px;
border-radius: 10px;
display: block;
margin-top: 20px;
}
button{
height: 30px;
width: 80px;
margin-top: 20px;
margin-left: 100px;
border-radius: 10px;
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="big">
<div id="left">
<input type="text" name="" id="xm" placeholder=" 请输入姓名">
<input type="text" name="" id="dz" placeholder=" 请输入地址">
<input type="text" name="" id="zy" placeholder=" 请输入职业">
<input type="text" name="" id="kh" placeholder= " 请输入口号">
<button id="btn">提交</button>
</div>
<div id="right">
<canvas id="canvas" width="700px" height="300px">您的浏览器不支持canvas
</canvas>
</div>
</div>
<script>
var ct=canvas.getContext('2d');
ct.fillRect(80,80,500,100);
var img=new Image();
img.src='http://climg.mukewang.com/59a7df40000165fa06000600.jpg';
img.onload=function(){
ct.drawImage(img,80,80,100,100);
}
btn.onclick=function(){
var a='姓名'||xm.value;
ct.font='25px 微软雅黑'
ct.fillStyle='white';
ct.fillText(a,200,105);
var b='地址'||dz.value;
ct.font='20px 微软雅黑';
ct.fillStyle='white';
ct.fillText(b,200,130);
var c='职业'||zy.value;
ct.font='20px 微软雅黑';
ct.fillStyle='white';
ct.fillText(c,200,160);
var d='口号'||kh.value;
ct.font='20px 微软雅黑';
ct.fillStyle='white';
ct.fillText(d,400,120);
}
</script>
</body>
</html>
没有更改代码，就按着你给的改的。我这里一直都是这里报错
0 -
好帮手慕码
2020-07-06
同学你好，老师这边测试没有报错：
效果：
建议：新建提问，把修改后的代码粘贴到问答区域进行测试。
祝学习愉快~
0 -
好帮手慕码
2020-07-06
同学你好，代码中问题如下：
1、将代码包含在点击事件中：
2、更换输入的内容不对，如下；
效果：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-07-06
相似问题
回答 2
回答 4