如何用Javascript实现随机选中div文本渲染至侧边栏并堆叠展示

核心问题分析 #

• 重复ID错误：所有创意项都使用了id="isolate"，但DOM中ID必须唯一，导致getElementById永远只返回第一个匹配元素。
• 内容覆盖问题：使用innerHTML = text会直接替换原有内容，无法实现堆叠效果，需要改为追加内容。
• 未记录最终选中项：定时器循环结束后，没有保存最后一次选中的随机创意，而是直接读取固定ID的内容。

修复步骤及代码 #

1. 修正HTML结构

移除所有重复的id="isolate"，仅保留class="idea"，同时确保侧边栏容器和触发按钮存在：

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Body -->
<div id="ideas">
  <div class="idea">A website where you can make a wish</div>
  <div class="idea">A website that you can rewrite</div>
  <div class="idea">A website that feels analog</div>
  <div class="idea">A website where you perform a ritual</div>
  <div class="idea">A website that is a single image</div>
  <div class="idea">A website with no concept</div>
  <div class="idea">A website that feels illegal</div>
  <div class="idea">A website that hosts banned materials</div>
  <div class="idea">A website playing you music from a boombox</div>
  <div class="idea">A website that's only a concept</div>
  <div class="idea">A website that feels like a B movie</div>
  <div class="idea">A website that keeps growing</div>
  <div class="idea">A website that keeps freezing</div>
  <div class="idea">A website with a timer</div>
  <div class="idea">A website that's running out of time</div>
  <div class="idea">A website with a traffic jam</div>
  <div class="idea">A website that feels like a walkable city</div>
  <div class="idea">A website that other people are walking over</div>
  <div class="idea">A website that loops</div>
  <div class="idea">A website that forgets you</div>
  <div class="idea">A website about your last dream</div>
  <div class="idea">A website wishlist</div>
  <div class="idea">A website with links to other websites</div>
  <div class="idea">A website to distract you for three minutes</div>
  <div class="idea">A website with your personal announcements</div>
  <div class="idea">A website that you need to make smaller</div>
  <div class="idea">A website wikipedia</div>
  <div class="idea">A website that's a platformer</div>
  <div class="idea">A website that you need to highlight to read</div>
  <div class="idea">A website that feels like a campfire</div>
  <div class="idea">A website that you can adjust the temperature of</div>
  <div class="idea">A website where you can smell the zaza</div>
  <div class="idea">A website that's a screensaver</div>
</div>
<!-- 侧边栏容器 -->
<div id="hellomessage"></div>
<!-- 触发按钮 -->
<button onclick="getIdea()">生成创意</button>

2. 修复JavaScript逻辑

记录最终选中的创意文本，使用追加方式实现堆叠，修正元素选择索引：

function getIdea() {
  var numElements = $('.idea').length;
  $("button").prop("disabled", true);

  var t = 0;
  let finalIdeaText = ''; // 保存最终选中的创意文本
  var repeat = setInterval(function() {
    // nth-child从1开始计数，所以随机数要加1
    var randomNum = Math.floor(Math.random() * numElements) + 1;
    $('.idea').css("background", "none");
    var selectedIdea = $('.idea:nth-child(' + randomNum + ')');
    selectedIdea.css("background", "skyblue");
    finalIdeaText = selectedIdea.text(); // 更新当前选中的文本
    t += 1;

    if (t == 5) {
      clearInterval(repeat);
      $("button").prop("disabled", false);
      // 用div包裹实现堆叠，追加到侧边栏
      document.getElementById("hellomessage").innerHTML += `<div>${finalIdeaText}</div>`;
    }
  }, 300);
}

关键修复点说明 #

• ID唯一性：移除重复ID后，通过nth-child选中随机元素，确保每次能获取到正确的选中项文本。
• 内容堆叠：用innerHTML +=替代innerHTML =，新内容会追加在旧内容下方，实现堆叠效果。
• 索引修正：nth-child选择器从1开始计数，所以随机数需要加1，避免选中不存在的第0个元素。

内容的提问来源于stack exchange，提问作者Sarah Chekfa