javascript - 将文本从一个框移动到另一个框

Question

我最近开始学习 JavaScript，但我无法将输入文本从一个 div 移动到另一个。 我可以毫无问题地输入我的名字并显示在方框 A 中。 唯一的问题是移动文本。 我对 CSS 和 HTML 领域没有任何问题，但是，如果您认为我可以在以下领域(HTML 和 CSS)进行改进并提出提示，我将不胜感激。 我是错过了还是做错了？请指教。

下面是我的代码:

// `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>

我这里没问题。我认为我的主要问题在于脚本部分。

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>