Question

单击按钮时，我正在尝试更改文本框位置。我得到以下error message : "Cannot set property 'top' of undefined"

当我删除以下行时：" var user = document.getElementById("user").value;" 它工作正常

任何建议

#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

更改

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

要

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

HTML5文本框在画布上的位置

1 个答案: