HTML5 Текстовое поле на холсте

Я пытаюсь изменить положение текстового поля при нажатии кнопки. Я получаю следующее error message : "Cannot set property 'top' of undefined"HTML5 Текстовое поле на холсте

, когда я удалить следующую строку: " 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>

источник

2013-12-17 Karish Karish

Изменить

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); 
}

источник

2013-12-17 05:03:30

жаль, что я ошибся слово «право», также причина, по которой я использую «.value», потому что я хочу распечатать или сохранить значение текстового поля –

, а затем использовать 'user.value' –

ohh wow Я провел HOURS, чтобы понять это, спасибо! –

HTML5 Текстовое поле на холсте

ответ

Смежные вопросы