时间戳

首页 > 解决方案 > 如何使用两个按钮在两个框之间移动文本？

javascript - 如何使用两个按钮在两个框之间移动文本？

问题描述

鉴于这种：

function moveRight() {
  var tmp = document.getElementById("lefttext").innerText;

  if (document.getElementById("lefttext").innerText != null) {
    document.getElementById("lefttext").innerText = document.getElementById("righttext").innerText;
    document.getElementById("righttext").innerText = tmp;
  }
}
<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>

我正在尝试使用两个按钮（左、右）在表格列的左右移动占位符文本。目前，我正在一侧进行测试（仅向右移动），但我想出的方法允许在两个位置之间交换文本，而不是仅仅将其向右移动并停止。

如果我的“lefttext”innerText 为空（空），“IF”不是应该阻止这种情况吗？我应该采取什么正确的方法？

谢谢。

标签： javascripthtml

解决方案

从我的评论

null和空（空字符串）之间有区别。尽管它们都等效地“虚假”，但它们并不是一回事。尝试使用 console.log 注销 document.getElementById("lefttext").innerText 看看你得到了什么。你不会null得到一个空字符串，那!=就是null，

你可以改变你原来的

if (document.getElementById("lefttext").innerText != null)对此

if (!!document.getElementById("lefttext").innerText) 将!!处理null空字符串和undefined

function moveRight() {
  var tmp = document.getElementById("lefttext").innerText;

  if (!!document.getElementById("lefttext").innerText) {
    document.getElementById("lefttext").innerText = document.getElementById("righttext").innerText;
    document.getElementById("righttext").innerText = tmp;
  }
}
<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>

推荐阅读