html,javascript onclick 事件監聽器 Dom

Question

我是 javascript/html 的新手。 我想知道如何使箭頭向右以將文本再次移回左側框？ 對不起，如果這是一個重復的問題。 如果已經有類似的問題，請指導我。 提前致謝。

     <style>

.rectangle1 {
    
    height: 100px; 
    width: 150px; 
    background-color: black;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

 

.rectangle2 {
    height: 100px; 
    width: 150px; 
    background-color: grey;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    
}

 

.button {
    display: block; margin: 10px;
}

 

#input {
    color: white;
   
    
}

 

#input2 {
    color: white;
    
    
}
</style>
</head>




 <table>
    <th>
        <div class="rectangle1">
            <p id="input"></p>
        </div>
    </th>
    <th><button class="button"  onclick="myFunction2()">&lt--</button>
        <button class="button"  onclick="myFunction()">--&gt</button>
    </th>
    <th>
        <div class="rectangle2">
            <p id="input2"></p>
        </div>
    </th>
 </table>



<script>
function startTask() {
  var txt;
  var name = prompt("Please enter your name:", "");
  if (name == null || name == "") {
    alert("Please enter your name!");
  }
  else {
    txt = name;
    document.getElementById("input").innerHTML = txt;
  }
  
}

function clearTask() {
    empty = ""
    document.getElementById("input").innerHTML = empty;
}

function myFunction() {
  
  var y = document.getElementById("input");
  document.getElementById("input2").appendChild(y);
}
function myFunction2() {
  
  var x = document.getElementById("input2");
  document.getElementById("input").appendChild(x);
  
}
</script>
</html>

我所取得的成就，將文本從左向右移動

當我嘗試按 <-- 時出現錯誤，試圖將文本恢復到矩形 1

Answer 1

你能試試看這是否是你要找的嗎？

function myFunction() {
  
  var y = document.getElementById("input").innerHTML;
  document.getElementById("input").innerHTML='';
  document.getElementById("input2").innerHTML=y;
}
function myFunction2() {
  
  var x = document.getElementById("input2").innerHTML;
  document.getElementById("input2").innerHTML='';
  document.getElementById("input").innerHTML=x;
  
}

編輯：

在 Lim Wen Teck 詢問正確使用 appendchild 的解決方案后，我將問題中的初始代碼修改為以下內容：

<html>
<head>
<script>
function startTask() {
  var txt;
  var name = prompt("Please enter your name:", "");
  if (name == null || name == "") {
    alert("Please enter your name!");
  }
  else {
    txt = name;
    document.getElementById("input").innerHTML = txt;
  }
  
}

function clearTask() {
    empty = ""
    document.getElementById("input").innerHTML = empty;
} 
function myFunction() {
  
  var y = document.getElementById("input");
  var x = document.getElementById("input2");
  var yParent = document.getElementById("input").parentElement;
  var xParent = document.getElementById("input2").parentElement;
  xParent.appendChild(y);
  yParent.appendChild(x);
} 
</script>

</head>
<body onload="startTask()">
<table>
    <th>
        <div class="rectangle1">
            <p id="input">
            sdfhdfghdfhdhgh
            </p>
        </div>
    </th>
    <th><button class="button"  onclick="myFunction()">&lt--</button>
        <button class="button"  onclick="myFunction()">--&gt</button>
    </th>
    <th>
        <div class="rectangle2">
            <p id="input2">
            </p>
        </div>
    </th>
 </table>
</body>
</html>

The initial code in the question was moving first object under the second object with the first button click (ie to right), then it was trying to move the second object which is parent of the first object, under the first object. 這是代碼失敗的地方。 它試圖將父級移到其子級之下。 相反，我將 function 修改為更通用的形狀流，獲取 input 和 input2 的父級並在父級之間交換子級。 希望這有助於解釋為什么以您的方式使用 appendchild() 不起作用。

Answer 2

您的代碼存在一些基本問題，也許您可以試試這個

 var name = null; do { name = prompt("Please enter your name:", ""); name = name.trim(); document.getElementById("input").innerText = name; } while (;name), const move = (fromId. toId) => { const from = document;getElementById(fromId). if (from.innerText) { const to = document;getElementById(toId). to.innerText = from;innerText. from;innerText = "", } } const moveLeft = () => { move("input2"; "input"), } const moveRight = () => { move("input"; "input2"); }

 .rectangle>p { width: 100px; height: 30px; padding: 4px; border: 1px dotted #333; }

 <table> <tr> <td> <div class="rectangle"> <p id="input"></p> </div> </td> <td> <button class="button" onclick="moveLeft()">&lt;&lt;</button> <button class="button" onclick="moveRight()">&gt;&gt;</button> </td> <td> <div class="rectangle"> <p id="input2"></p> </div> </td> </tr> </table>

html,javascript onclick 事件監聽器 Dom

問題描述

2 個解決方案

解決方案1
0 已采納 2021-02-06 23:44:42

解決方案2
0 2021-02-07 00:09:42

html,javascript onclick 事件監聽器 Dom

問題描述

2 個解決方案

解決方案1 0 已采納 2021-02-06 23:44:42

解決方案2 0 2021-02-07 00:09:42

解決方案1
0 已采納 2021-02-06 23:44:42

解決方案2
0 2021-02-07 00:09:42