如何用两个按钮在两个盒子间移动文本？代码问题排查

我懂你的问题了——现在点击右移按钮时，文本是在两个div之间来回交换，但你想要的是单向移动后就停在目标位置：比如点右移就把左边的文本移到右边，左边变空，再点右移也不会有变化，对吧？

为什么原来的判断没生效？ #

你代码里的if (document.getElementById("lefttext").innerText != null)这个条件几乎永远为true。因为哪怕元素内容为空，innerText返回的是空字符串""，而不是null。所以这个判断根本拦不住交换逻辑，每次点击都会执行文本互换。

正确的实现方法 #

要实现单向移动，我们需要调整两个核心点：

1. 判断条件改为源容器有内容，且目标容器为空
2. 移动逻辑改成「把源容器的文本转移到目标容器，然后清空源容器」，而非交换

下面是完整的修正代码：

function moveRight() { 
  const leftEl = document.getElementById("lefttext");
  const rightEl = document.getElementById("righttext");
  
  // 仅当左边有文本、右边为空时，执行右移
  if (leftEl.innerText.trim() !== "" && rightEl.innerText.trim() === "") {
    rightEl.innerText = leftEl.innerText;
    leftEl.innerText = "";
  }
} 

function moveLeft() { 
  const leftEl = document.getElementById("lefttext");
  const rightEl = document.getElementById("righttext");
  
  // 仅当右边有文本、左边为空时，执行左移
  if (rightEl.innerText.trim() !== "" && leftEl.innerText.trim() === "") {
    leftEl.innerText = rightEl.innerText;
    rightEl.innerText = "";
  }
} 

<table width="250px" border="1"> 
  <tr> 
    <td> 
      <div id="lefttext">Placeholder</div> 
    </td> 
    <td> 
      <button onClick="moveRight()" id="moveright">Right</button> 
      <button onClick="moveLeft()" id="moveleft">Left</button> 
    </td> 
    <td> 
      <div id="righttext"></div> 
    </td> 
  </tr> 
</table>

额外优化说明 #

• 用trim()忽略文本中的空白字符，避免用户输入空格后被误判为有内容
• 提前获取DOM元素引用，不用每次调用getElementById，性能更优
• 左移函数也遵循同样逻辑实现，现在两个按钮都能完成单向移动的效果

这样修改后，点击右移按钮文本会从左边移到右边，再点击无变化；点击左移按钮文本会从右边移回左边，完全符合你的需求~

内容的提问来源于stack exchange，提问作者SunnyBoiz