显示随机选择的项目

时间：2018-10-24 08:26:11

标签： javascript html css

我有5个盒子和一系列物品。如何在5个框中显示5个项目，这些项目是随机选择而不重复的？

存在问题吗？

ptags[index].textContent = item[0].label;

它没有显示在框中吗？

我尝试了很多方法都没有成功。我将DreamWeaver用作IDE，这可能有问题吗？

var array2 = [];
var items = [{
    label: '1',
    url: '1.png'
  },
  {
    label: '2',
    url: '2.png'
  },
  {
    label: '3',
    url: '3.png'
  },
  {
    label: '4',
    url: '4.png'
  },
  {
    label: '5',
    url: '5.png'
  },
  {
    label: '6',
    url: '6.png'
  },
  {
    label: '7',
    url: '7.png'
  },
  {
    label: '8',
    url: '8.png'
  },
  {
    label: '9',
    url: '9.png'
  },
  {
    label: '10',
    url: '10.png'
  },
  {
    label: '11',
    url: '11.png'
  },
  {
    label: '12',
    url: '12.png'
  }
];

array2 = items.slice();
console.log(array2);
rvalue();

var item;

function rvalue() {
  ptags = document.querySelectorAll('[name="values"]');
  console.log(ptags);
  for (var index = 0; index < 5; index++) {
    var randomIndex = Math.floor(Math.random() * array2.length);
    item = array2.splice(randomIndex, 1);
    console.log(item);

    ptags[index].textContent = item[0].label;

    ptags[index].dataset.itemIndex = randomIndex;
  }

}

console.log(array2);
body {
  overflow: hidden;
  background-size: 100vw 100vh;
}

#container {
  white-space: nowrap;
  text-align: center;
  border: px solid #CC0000;
  margin: 2px;
  margin-right: 2px;
}

.box {
  width: calc(15.4% - 4px);
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  background-color: #0F6;
}

.box p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 30px;
  color: #005ce6;
  text-align: center;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}
<div id="container">
  <div class="box" id="10">
    <p name="values"></p>
  </div>
  <div class="box" id="11">
    <p name="values"></p>
  </div>
  <div class="box" id="12">
    <p name="values"></p>
  </div>
  <div class="box" id="13">
    <p name="values"></p>
  </div>
  <div class="box" id="14">
    <p name="values"></p>
  </div>
</div>

2 个答案:

答案 0 :(得分：4)

您有一个正确的代码，只需将其放入就绪函数中，或仅将其移至HTML标记后的正文末尾，以确保在脚本运行之前已加载DOM。

为此，我建议使用DOMContentLoaded事件：

document.addEventListener("DOMContentLoaded", function() {
    //Your code here 
});

注意：：要在下次自行检测此类错误，可以先检查结果的长度，例如：

console.log( document.querySelectorAll('[name="values"]').length );

如果长度为零，并且选择器正确，则需要检查DOM可用性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>

  <style>
    body {
      overflow: hidden;
    }
    
    .heading {
      margin-left: 20%;
      margin-right: 20%;
      margin-top: -2%;
    }
    
    .box {
      width: calc(15.4% - 4px);
      display: inline-block;
      border-radius: 5px;
      border: 2px solid #333;
      border: #000 border-color: #e6e600;
      margin: -2px;
      background-color: #0F6;
    }
    
    .box {
      height: 15vh;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }
    
    #container {
      white-space: nowrap;
      text-align: center;
      border: px solid #CC0000;
      margin: 2px;
      margin-right: 2px;
    }
    
    .box p {
      font-size: calc(2vw + 10px);
    }
    
    p {
      font: "Courier New", Courier, monospace;
      font-size: 30px;
      color: #005ce6;
      text-align: center;
    }
    
    .text {
      padding: 20px;
      margin: 7 px;
      margin-top: 10px;
      color: white;
      font-weight: bold;
      text-align: center;
    }
    
    body {
      background-size: 100vw 100vh;
    }
  </style>
</head>

<body>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var array2 = [];
      var items = [{
          label: '1',
          url: '1.png'
        },
        {
          label: '2',
          url: '2.png'
        },
        {
          label: '3',
          url: '3.png'
        },
        {
          label: '4',
          url: '4.png'
        },
        {
          label: '5',
          url: '5.png'
        },
        {
          label: '6',
          url: '6.png'
        },
        {
          label: '7',
          url: '7.png'
        },
        {
          label: '8',
          url: '8.png'
        },
        {
          label: '9',
          url: '9.png'
        },
        {
          label: '10',
          url: '10.png'
        },
        {
          label: '11',
          url: '11.png'
        },
        {
          label: '12',
          url: '12.png'
        }
      ];

      array2 = items.slice();
      rvalue();

      var item;

      function rvalue() {
        ptags = document.querySelectorAll('[name="values"]');

        for (var index = 0; index < 5; index++) {
          var randomIndex = Math.floor(Math.random() * array2.length);
          item = array2.splice(randomIndex, 1);

          ptags[index].textContent = item[0].label;

          ptags[index].dataset.itemIndex = randomIndex;
        }

      }
    });
  </script>


  <div id="container">

    <div class="box" id="10">
      <p name="values"></p>
    </div>
    <div class="box" id="11">
      <p name="values"></p>
    </div>
    <div class="box" id="12">
      <p name="values"></p>
    </div>
    <div class="box" id="13">
      <p name="values"></p>
    </div>
    <div class="box" id="14">
      <p name="values"></p>
    </div>

  </div>
</body>

</html>

答案 1 :(得分：2)

在元素出现之前运行脚本时，您会收到此错误。您需要按如下所述交换容器和脚本标签的位置：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>

body {
  overflow: hidden;
}

.heading {
  margin-left: 20%;
  margin-right: 20%;
  margin-top: -2%;
}

.box {
  width: calc(15.4% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  background-color: #0F6;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

#container {
  white-space: nowrap;
  text-align: center;
  border: px solid #CC0000;
  margin: 2px;
  margin-right: 2px;
}

.box p {
  font-size: calc(2vw + 10px);
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 30px;
  color: #005ce6;
  text-align: center;
}

.text {
  padding: 20px;
  margin: 7 px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

body {
  background-size: 100vw 100vh;
}

</style>
</head>

<body>

<div id="container">

  <div class="box" id="10">
    <p name="values"></p>
  </div>
  <div class="box" id="11">
    <p name="values"></p>
  </div>
  <div class="box" id="12">
    <p name="values"></p>
  </div>
  <div class="box" id="13">
    <p name="values"></p>
  </div>
  <div class="box" id="14">
    <p name="values"></p>
  </div>

</div>
<script>
var array2 = [];
var items = [{
    label: '1',
    url: '1.png'
  },
  {
    label: '2',
    url: '2.png'
  },
  {
    label: '3',
    url: '3.png'
  },
  {
    label: '4',
    url: '4.png'
  },
  {
    label: '5',
    url: '5.png'
  },
  {
    label: '6',
    url: '6.png'
  },
  {
    label: '7',
    url: '7.png'
  },
  {
    label: '8',
    url: '8.png'
  },
  {
    label: '9',
    url: '9.png'
  },
  {
    label: '10',
    url: '10.png'
  },
  {
    label: '11',
    url: '11.png'
  },
  {
    label: '12',
    url: '12.png'
  }
];

array2 = items.slice();
console.log(array2);
rvalue();

var item;

function rvalue() {
  ptags = document.querySelectorAll('[name="values"]');
console.log(ptags);
  for (var index = 0; index < 5; index++) {
    var randomIndex = Math.floor(Math.random() * array2.length);
    item = array2.splice(randomIndex, 1);
    console.log(item);

    ptags[index].textContent = item[0].label;

    ptags[index].dataset.itemIndex = randomIndex;
  }

}

console.log(array2);

</script>

</body>
</html>

或者，如果您不想交换职位，则只需将代码包装在DOMContentLoaded事件下即可。

document.addEventListener("DOMContentLoaded", function(event) { 
   // INSERT YOUR CODE HERE
});
相关问题
最新问题