javascript - 将随机选择的值显示到类中的段落标签中

我有5个带有类名框的框和一个具有12个值的名为items的数组，我使用rvalue()函数随机选择了它，而无需重复。

我想在框中显示随机选择的标签值
在<p>标记内

我应该如何最好地做到这一点？

这是我的代码：

var array2=[];
rvalue();
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();


var item;


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

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

      ptags[index].textContent = item.label;

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

}

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;
}

<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>

最佳答案

问题

 定义rvalue后应调用array2函数


  注意：行item = array2.splice(randomIndex, 1);返回包含对象{ label: ... , url: ... }的数组。这是由于return value of Array.splice() method


 为了获得label属性，您可以执行以下操作：item[0].label

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 < 3; 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;
  }

}

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;
}

<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>

关于javascript - 将随机选择的值显示到类中的段落标签中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52902598/