如何在html中的2個彩色框之間切換輸入的文本

Question

到目前為止，我只有能夠創建2個框的代碼，創建4個按鈕的代碼，但是實際上只有1個按鈕可以執行某些操作，而這是開始按鈕，其中有一個彈出窗口要求輸入名稱，然后輸入該名稱，它將出現在第一個框中。

<html>
  <head>
    <script>
      function myTask1() {
        var sentence = prompt("Please enter a name");
        var arrSentence = sentence.split(" ");
        if (arrSentence != null) {
          document.getElementById("answer1").innerHTML = arrSentence.sort(); //so we can use Array.sort() function 
        }
        console.log(sentence);
        return sentence;
      }

      function myFunction() {
        var x = document.getElementById()
      }

    </script>
    <style> </style>
  </head>

  <body>
    <p><button type="button" onclick="myTask1()">Click me!</button></p> 
    <button type="button" onclick="ClearFields();">Clear</button> 
    <button type="button" onclick="myFunction()"> --> </button> 
    <button type="button" onclick="myTask4()"><-- </button> 
      <div clas="box" style="background-color:red; height:200px; margin:20px auto;">
        <center>
          <p id="answer1"></p>
          <center>
        </div>
        <div class="box1" style="background-color:grey; height:200px; margin:20px auto;"> </div>
  </body>
</html>

Answer 1

我為您制作了一些演示代碼。 我認為您是一個初學者，因為這個問題是基本的。 不過，這不是問題，開始新的事物是很棒的。 您可以在互聯網上找到答案，最好的程序員通常是對Google滿意的人。 但我希望通過向您展示解決方案，您仍能對結構有所了解。 嘗試了解每一行。 無論如何，請嘗試從頭開始編寫它。 這是一個很好的練習。

代碼： https ： //github.com/Bunpasi/stackoverflow-answers/blob/master/js-listbox-selector/index.html

需要注意的事情：-我將腳本放在頁腳中，以免干擾頁面的加載時間。 -我已將所有代碼放在匿名函數中以避免全局函數。 -我改變clas到class 。 -我使用事件監聽器而不是屬性。 -我沒有重復兩個框的邏輯，而是使用了一個可以在兩個框上使用的功能。

了解代碼后，您可以對代碼進行一些改進。 -確保更新后選擇不會消失。 您也可以將其存儲在數據中。 現在，數據是ID的數組，但是您可以將其變成包含甚至更重要的數據（例如是否選中）的對象數組。 -將樣式從元素移動到標題。

不要因不贊成而灰心。

祝好運！

更新資料

如果您想一直移動所有名稱。 這是您需要做的。

此行查找所有選定的元素：

var selectedElements = boxes[fromId].querySelectorAll('.list_item.selected');

刪除selected .selector：

var selectedElements = boxes[fromId].querySelectorAll('.list_item');

如何在html中的2個彩色框之間切換輸入的文本

問題描述

1 個解決方案

解決方案1
1 已采納 2019-11-25 20:11:36

如何在html中的2個彩色框之間切換輸入的文本

問題描述

1 個解決方案

解決方案1 1 已采納 2019-11-25 20:11:36

解決方案1
1 已采納 2019-11-25 20:11:36