急！老师麻烦看一下，为什么不能获取到input标签里面的值？
来源：6-7 完成案例文字图片显示和变换
weixinapp_慕粉007
2019-03-03 16:24:36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice2</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
*{margin: 0;padding:0;}
#container{
width: 1000px;
height: 300px;
margin: 30px auto;
box-sizing: border-box;
clear: both;
overflow: hidden;
}
.left{
float: left;
width: 300px;
height: 100%;
background: green;
}
.left form{
width: 300px;
height: 300px;
padding: 30px 10px;
box-sizing: border-box;
position: relative;
}
.left input{
border:none;
width: 270px;
border-radius: 15px;
text-indent: 5px;
/*box-sizing: content-box;*/
padding: 5px;
margin: 10px 0;
}
#submit{
display: block;
width: 100px;
padding: 5px;
position: absolute;
left: 100px;
margin-top: 20px;
background: #000;
color: #fff;
border-radius: 15px;
border: none;
}
.right{
float: right;
width: 700px;
height: 100%;
background: #f00;
}
.box{
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div class="left">
<div class="box">
<form>
<input type="text" name="name" placeholder="姓名" value="">
<input type="adddress" name="email" placeholder="地址" value="">
<input type="text" name="work" placeholder="职业" value="">
<input type="text" name="slogan" placeholder="口号" value="">
<button id="submit">生成名片</button>
</form>
</div>
</div>
<div class="right">
<div class="box2">
<canvas id="canvas">
您的浏览器不支持canvas
</canvas>
</div>
</div>
</div>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 700;
canvas.height= 300;
ctx.fillStyle = "black";
ctx.fillRect(100,80,500,100);
var img = new Image();
img.src = "logo.jpg";
img.onload = function(){
ctx.drawImage(img,100,80,100,100);
}
var str1 = "请输入姓名",str2 = "请输入地址",str3 = "请输入职业",str4 = "请输入口号";
ctx.font = "30px 微软雅黑";
ctx.fillStyle = "#fff";
ctx.textBaseline = "middle";
//点击按钮得到数据
var message1 = document.getElementsByTagName("input")[0],
message2 = document.getElementsByTagName("input")[1],
message3 = document.getElementsByTagName("input")[2],
message4 = document.getElementsByTagName("input")[3];
var submit = document.getElementById("submit");
console.log(message1.value);
submit.onclick = function(){
if(message1.value){
str1 = message1.value;
}
if(message2.value){
str2 = message2.value;
}
if(message3.value){
str3 = message3.value;
}
if(message4.value){
str4 = message4.value;
}
}
ctx.fillText(str1,205,100);
ctx.font = "18px 微软雅黑";
ctx.fillText(str2,205,133);
ctx.font = "18px 微软雅黑";
ctx.fillText(str3,205,160);
ctx.font = "18px 微软雅黑";
ctx.fillText(str4,400,130);
var length1 = ctx.measureText(str1).width,
length2 = ctx.measureText(str2).width,
length3 = ctx.measureText(str3).width,
length4 = ctx.measureText(str4).width;
var Max = Math.max(length1,length2,length3);
</script>
</body>
</html>
1回答
-
好帮手慕星星
2019-03-04
你好，button标签本身具有提交的功能，所以一点击提交就是跳转刷新页面，所以获取不到内容。并且需要在点击事件中获取内容哦，否则在外面获取到的就是空的。
可以将button按钮添加type类型为button，这样就是一个普通的按钮，没有提交功能了，如下：
自己可以再测试下，如果有问题，可以参考一下源码：
里面的案例就是这个小例子的源码。
祝学习愉快！欢迎采纳！
0
相似问题
回答 1
回答 1