如何在html中的2个彩色框之间切换输入的文本

Question

So far I only have the code that is able to make 2 boxes, made the 4 buttons, but only 1 button actually does something, and that is the start button where a there is a popup that asks for a name, and after you input that name, it will appear in the first box. 到目前为止，我只有能够创建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

I've made some demo code for you. 我为您制作了一些演示代码。 I assume that you're a beginner because the question is basic. 我认为您是一个初学者，因为这个问题是基本的。 This is not a problem though, starting something new is great. 不过，这不是问题，开始新的事物是很棒的。 You can find the answer on the internet and the best programmers are often people who are good with Google. 您可以在互联网上找到答案，最好的程序员通常是对Google满意的人。 But I hope by showing you the solution anyway you get a feeling for structure. 但我希望通过向您展示解决方案，您仍能对结构有所了解。 Try to understand every line. 尝试了解每一行。 Try write it from scratch afterwards anyway. 无论如何，请尝试从头开始编写它。 It's a great exercise. 这是一个很好的练习。

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

Some things to notice: - I've put the script in the footer so it doesn't interfere with the loading time of the page. 需要注意的事情：-我将脚本放在页脚中，以免干扰页面的加载时间。 - I've put all code in an anonymous function to avoid global functions. -我已将所有代码放在匿名函数中以避免全局函数。 - I changed clas to class . -我改变clas到class 。 - I've used event listeners instead of even attributes. -我使用事件监听器而不是属性。 - I didn't duplicate the logic for both boxes but used one function which I can use on both. -我没有重复两个框的逻辑，而是使用了一个可以在两个框上使用的功能。

After your understand the code, there are some things you can improve on this code. 了解代码后，您可以对代码进行一些改进。 - Make sure the selection doesn't go away after the update. -确保更新后选择不会消失。 You can store this in the data as well. 您也可以将其存储在数据中。 Right now the data is an array of ID's, but you can turn it into an array of objects containing even more important data, like whether it's selected. 现在，数据是ID的数组，但是您可以将其变成包含甚至更重要的数据（例如是否选中）的对象数组。 - Move the style from the elements to the header. -将样式从元素移动到标题。

Don't be discouraged by down votes. 不要因不赞成而灰心。

Good luck! 祝好运！

Update 更新资料

If you want to move all names all the time. 如果您想一直移动所有名称。 This is what you need to do. 这是您需要做的。

This line looks for all selected elements: 此行查找所有选定的元素：

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

Remove the selected .selector: 删除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