Отображение случайно выбранных значений тегов абзаца внутри класса

голоса
0

У меня есть 5 ящиков с именем класса коробки и массив , имеющий 12 значений , названные элементы, Im выбрав его в случайном порядке без повторений с помощью 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>

Задан 20/10/2018 в 05:03
источник пользователем
На других языках...                            


2 ответов

голоса
1
array2.splice(randomIndex, 1); 

Возвращаемый массив с 1 объектом, чтобы ваша деталь в вашем коде массив использование объекта элемента [0]

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(); 


var item;


function rvalue() 
{
ptags = document.querySelectorAll('.box');

for (var index = 0; index <3; index++) 
{
      randomIndex = Math.floor(Math.random() * array2.length);
      item = array2.splice(randomIndex, 1);
	    
      ptags[index].children[0].textContent = item[0].label;
 
	//  ptags[index].dataset.itemIndex = randomIndex;
    }

}

rvalue() 
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>

Ответил 20/10/2018 в 05:16
источник пользователем

голоса
0

Проблемы

  • Вы должны вызвать rvalueфункцию после того, как array2определен
  • Примечание : Линия item = array2.splice(randomIndex, 1);возвращает массив , содержащий объект { label: ... , url: ... }. Это происходит из - за возвращаемое значение Array.splice () метод

  • Для того , чтобы получить 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>

    Ответил 20/10/2018 в 05:11
    источник пользователем

    Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more