Question

我最近使用了JavaScript，但无法将输入文本从一个div移到另一个// `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"; }上。我没有问题，输入我的名字，并在框中显示A. 唯一的问题是移动的文本。我在CSS和HTML方面没有问题，但是，如果您认为我可以在以下方面（HTML和CSS）有所改进并提出建议，我将不胜感激。我丢失了或错做什么呢？请指教。

下面是我的代码：

#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>

.to_csv

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

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>

从一个框移动文本到另一个

1 个答案: