Javascript和HTML：以升序还是降序生成单个数组项？

Question

我的第一个网站包括设计多项选择器。用户将能够从四个数组（奇数乐曲，奇数视频，奇数绘图和奇数曲）以及生成每种事物的模式（随机，旧-新-新，新-旧）中选择一个类别。每次按下按钮时，函数“ newThing”都会从四个数组之一（用户曾经选择过）中提取一个项目并显示出来。我已经有了“随机模式”，像梦一样工作，请参见下文：

Javascript：

function newThing() {
if(mode1.checked) {
    if(musicCheck.checked) {
        var randomMusic = Math.floor(Math.random() * (oddmusic.length));
        document.getElementById("thingDisplay").innerHTML = oddmusic[randomMusic];
    }
    if(videoCheck.checked) {
        var randomVideo = Math.floor(Math.random() * (oddvideo.length));
        document.getElementById("thingDisplay").innerHTML = oddvideo[randomVideo];
    }
    if(drawingCheck.checked) {
        var randomDrawing = Math.floor(Math.random() * (odddrawing.length));
        document.getElementById("thingDisplay").innerHTML = odddrawing[randomDrawing];
    }
    if(haikuCheck.checked) {
        var randomHaiku = Math.floor(Math.random() * (oddhaiku.length));
        document.getElementById("thingDisplay").innerHTML = oddhaiku[randomHaiku];
    }
}

HTML：

<body>
<div class="container">
    <div class="cell cell-1">
        <div align="center" id='thingDisplay'></div>
    </div>
    <div class="cell cell-2">
        <button class="box" id="button01" onclick="newThing()">New Thing</button>
    </div>
    <div class="cell cell-3">
        <form id="mode">
        <label><input type="radio" name="modes" id="mode1" checked="yes" /> Random </label>
        <br /><label><input type="radio" name="modes" id="mode2" /> Old - New </label>
        <br /><label><input type="radio" name="modes" id="mode3" /> New - Old </label>
        </form>
    </div>
    <div class="cell cell-5" align="right">
        <form id="categories">
        <label> Music <input type="radio" name="thing" id="musicCheck" /></label>
        <br /><label> Videos <input type="radio" name="thing" id="videoCheck" /></label>
        <br /><label> Drawings <input type="radio" name="thing" id="drawingCheck" /></label>
        <br /><label> Haiku <input type="radio" name="thing" id="haikuCheck" /></label>
        </form>
    </div>
</div>
<script src="javascript.js"></script>

我在设计“新旧”和“新旧”模式时遇到了障碍。每个阵列中的项目已经按日期“ 20200616_1216”进行了组织（并命名）。将以下JavaScript添加到函数'newThing'中无效：

if(mode2.checked) {
    if(haikuCheck.checked) {
        for(i=0;i<oddhaiku.length;i++) {
        document.getElementById("thingDisplay").innerHTML = (oddhaiku[i]);
        }
    }
}

我如何告诉'newThing'以特定的顺序从阵列中提取项目，一次将其显示在'thingDisplay'中？谢谢。

Answer 1

您需要先对数组进行排序，然后再将其添加到dom中，而且就像注释者所写的那样，您每次都覆盖相同的元素。

尝试对“旧的-新的”进行类似的操作，然后对“新的-旧的”进行逆转，或者编写更好的功能，编写一个同时检查两者的函数。

if (mode2.checked) {
  if (haikuCheck.checked) {
    oddhaiku.sort((a, b) => {
      // I'm assuming your date column is called date here, replace it with the real key
      if (a.date > b.date) {
        return 1;
      }
      if (b.date > a.date) {
        return -1;
      }
      return 0;
    })
    for (i = 0; i < oddhaiku.length; i++) {
      // use += so the innerHTML is concatinated instead of replaced
      document.getElementById("thingDisplay").innerHTML += (oddhaiku[i]);
    }
  }
}

希望有帮助！

Javascript和HTML：以升序还是降序生成单个数组项？

问题描述投票：1回答：1

1个回答

最新问题

Javascript和HTML：以升序还是降序生成单个数组项？

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1