如何在桌面上打印我的数组并替换为排序数组

how to print my array on desktop and replace by sorted array

本文关键字:数组 替换 排序 我的 打印 桌面      更新时间:2023-09-26

我编写在桌面上打印名称的代码。如果我单击按钮,它应该替换为排序的名称。
例如,我有:

  • 约翰尼
  • 琥珀
  • 迈克尔

按下按钮后应替换为:

  • 琥珀
  • 约翰尼
  • 迈克尔

我的代码:

<div>
<ul>
    <script>
        var Tab = new Array('Johny', 'Amber', 'Michael')
        for (x=0; x<Tab.length; x++) { 
            w= "<li>" + Tab[x] + "</li>"
            document.write(w);
        }
        function myFunc(){
        var str = document.getElementById(w).value;
        var res = str.replace(w, Tab.sort());
        document.getElementById(w).innerHTML = res;
        }
    </script>
</ul>
</div>
<button type="button"  id="sort" onclick="myFunc()">Sort</button>

我对 myFunc() 有问题。如何替换/覆盖它们?

如果你想多次编写你的列表,那就为它创建一个函数。您将节省时间和代码。我称之为printTab.要使用 JS 访问 ul 标签,我为其添加了一个 id:list 。现在myFunc:让我们简单地对数组进行排序并再次打印。

<div>
<ul id="list">
    <script>
        var Tab = new Array('Johny', 'Amber', 'Michael')
        function printTab() {
          var w = '';
          for (x=0; x<Tab.length; x++) { 
            w += "<li>" + Tab[x] + "</li>"
          }
          document.getElementById("list").innerHTML = w;
        }
        // we must be sure that DOM is loaded if we want to manipulate on it
        document.addEventListener("DOMContentLoaded", function(event) {
            printTab();
        });
        function myFunc(){
          Tab.sort();
          printTab();
        }
    </script>
</ul>
</div>
<button type="button"  id="sort" onclick="myFunc()">Sort</button>

我给你的建议是将脚本放在一个比一些随机标签更好的位置,因为它会使你的HTML文档混乱,页面加载顺序非常随机。JS脚本的最佳位置就在</body>之前。

您必须引用要修改其内部 HTML 的div 的 id。这是小提琴

  <html>
  <div id="stuff">
  </div>
  <button type="button" id="sort" onclick="myFunc()">Sort</button>
  <script>
    var Tab = new Array('Johny', 'Amber', 'Michael');
    function formList(Tab) {
      var w = "<ul>";
      for (x = 0; x < Tab.length; x++)
        w += "<li>" + Tab[x] + "</li>";
      w += "</ul>";
      return w;
    }
    document.getElementById("stuff").innerHTML = formList(Tab);
    function myFunc() {
      document.getElementById("stuff").innerHTML = formList(Tab.sort());
    }
  </script>
</html>