HTML5文本框在画布上的位置

Question

I am trying to change Text Box position when the button is clicked. 单击按钮时，我试图更改文本框的位置。 I get the following error message : "Cannot set property 'top' of undefined" 我收到以下error message : "Cannot set property 'top' of undefined"

when I remove the following line: " var user = document.getElementById("user").value;" 当我删除以下行时： " var user = document.getElementById("user").value;" it works fine 它工作正常

any suggestions 有什么建议么

#canvas{
position: absolute;
background-color: red;
margin-left: 50px;
margin-top: 10px;
}

#user{
top:160px;
right:1000px;
position: absolute;
border-radius: 10px ; 
width: 180px;
border: 3px solid #BADA55;
-webkit-box-shadow: 
  inset 0 0 8px  rgba(0,0,0,0.1),
        0 0 16px rgba(0,0,0,0.1); 
-moz-box-shadow: 
  inset 0 0 8px  rgba(0,0,0,0.1),
        0 0 16px rgba(0,0,0,0.1); 
box-shadow: 
  inset 0 0 8px  rgba(0,0,0,0.1),
        0 0 16px rgba(0,0,0,0.1); 

background: rgba(255,255,255,0.0);
color: blue;
font-size: 40px;
font-weight: bold;
margin: 0 0 10px 0;
display: inline;
visibility: visible;

}

#btn{
position: absolute;
bottom :200px;
right:1100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="main.css">
     <script>

         function changePosition(){
            var user = document.getElementById("user").value;
            user.style.top= "100px";
            user.style.rigth = "100px";
            console.log(user);
         }
     </script>
</head>

<body>   
    <div id="wra">
    <canvas id="canvas" width="350" height="350"></canvas>
    <input type="text" id="user" value=""><br>

    </div>
    <button  onclick ="changePosition()" id="btn" type="button">Submit</button></p>
</body>
</html>

Answer 1

Change 更改

 function changePosition(){
    var user = document.getElementById("user").value;
    user.style.top= "100px";
    user.style.rigth = "100px";
    console.log(user);
 }

To 至

 function changePosition(){
    var user = document.getElementById("user");
    user.style.top= "100px";
    user.style.right = "100px";
    console.log(user.value);
 }

HTML5文本框在画布上的位置

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-12-17 05:03:30

HTML5文本框在画布上的位置

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-12-17 05:03:30

解决方案1
1 已采纳 2013-12-17 05:03:30