Moving text from one box to another

Question

I recently picked up JavaScript and I have trouble moving my input text from one div to another. I have no issues inputting my name and displaying in box A. The only issue is moving the text. I have no issues with CSS and HTML area, however, if you feel that I can improve in the areas below (HTML & CSS) and dish out tips I would greatly appreciate it. Am I missing out or doing it wrong? Please advice.

Below is my code:

 // `name` is a global var for use in functions below this comment. // var name; function requestname() { var name = prompt("Enter your name"); var para = document.createElement("p"); var node = document.createTextNode(name); para.appendChild(node); document.getElementById("boxa").appendChild(para); } function movetext() { var name = document.getElementById("nameinput"); var pos = 0; var moveText = setInterval(move, 50); } function move() { pos++; e.style.top = pos + "px"; e.style.left = pos + "px"; } 

 #container { width: 100%; overflow: hidden; } #boxa { background-color: black; width: 20%; height: 200px; float: left; margin: auto; text-align: center; vertical-align: middle; line-height: 150px; color: white; } #button { background: white; width: 10%; height: 200px; float: left; margin-left: 15px; margin-right: 15px; text-align: center; vertical-align: middle; line-height: 150px; } #boxb { background: grey; width: 20%; height: 200px; float: left; margin-left: 15px; text-align: center; vertical-align: middle; line-height: 150px; } 

 <button onClick="requestname()">Start</button> <button onClick="clear()">Clear</button> <br /> <!-- There will be 1 main DIV(container) and 3 sub DIV(boxa, button and boxb) --> <!-- Div button have 2 buttons allowing me to move name from box A to box B --> <div id="container"> <div id="boxa"></div> <div id="button"> <button onClick="movetext()">&#62;</button> <br /> <button onClick="movetext2()">&#60;</button> </div> <div id="boxb"> <span id="nameinput" style="position:absolute" ;></span> </div> </div> 

I have no problem here on. I think my main issue lies in script part.

Answer 1

 // Var name is a global var for use in functions below this comment. // var name var pos=0; var para; var node; var m; function requestname() { name = prompt("Enter your name"); para = document.createElement("p"); para.setAttribute('id','remove'); node = document.createTextNode(name); para.appendChild(node) ; document.getElementById("boxa").appendChild(para); } function movetext () { para = document.createElement("p"); node = document.createTextNode(name); para.appendChild(node); document.getElementById("boxb").appendChild(para); name = document.getElementById("nameinput"); var element = document.getElementById('remove'); element.parentNode.removeChild(element) pos = 0; move(name) } function move(name) { pos++; name.style.top = pos + 'px'; name.style.left = pos + 'px'; } 

 #container { width: 100%; overflow: hidden; } #boxa { background-color: black; width: 20%; height: 200px; float: left; margin: auto; text-align: center; vertical-align: middle; line-height: 150px; color: white; } #button { background: white; width: 10%; height: 200px; float: left; margin-left: 15px; margin-right: 15px; text-align: center; vertical-align: middle; line-height: 150px; } #boxb { background: grey; width: 20%; height: 200px; float: left; margin-left: 15px; text-align: center; vertical-align: middle; line-height: 150px; } 

 <button onClick="requestname()">Start</button> <button onClick="clear()">Clear</button> <br /> <div id="container"> <div id="boxa"> </div> <div id="button"> <button onClick="movetext()">&#62;</button> <br /> <button onClick="movetext2()">&#60;</button> </div> <div id="boxb"> <span id="nameinput" style="position:absolute";></span> </div> </div>