Блог

Главная - Вопросы по программированию - печать нескольких наборов чисел из массива

печать нескольких наборов чисел из массива

#javascript #arrays

#javascript #массивы

Вопрос:

 function numbersInBucket(setOfNumbers, numbersInArray) {
	var numbers = [];
	for (var i = numbersInArray; i > 0; i--){
		numbers.push(i);
	}
	numbers.sort(function(){
		return (Math.round(Math.random())-0.5);
		}
	);
	return numbers.slice(0, setOfNumbers).sort(function(a, b){return a - b});
}


function print(numbers){
	var html = "";
  	for (var i in numbers) {
    	html = html   '<li class="item">'   numbers[i]   '</li>';
  	}
  	document.getElementById("output").innerHTML = html;
} 

function rowOfNumbers(){
	for(var i = 0; i < 3; i  ){
		print(numbersInBucket(5, 75));
	}
}  
 .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
  }
  ul li {
    list-style: none;
    display: inline-flex;
    justify-content: center;
  }
  .item {
    border: 5px solid #E7F7F5;
    color: #E7F7F5;
    margin: 20px;  
    border-radius: 100px;
    font-size: 40px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 220%;
   justify-content: space-between;
  }  
 <div class="container">
		<ul id="output"></ul>
</div>
<input class="button" type="button" value="click " id="reload" onclick="rowOfNumbers()">

Привет всем;
Как я могу напечатать несколько наборов чисел. Например,
3 12 23 33 44, 2 5 13 22 36, 12 23 27 29 44. С моим текущим кодом я могу иметь один набор чисел в качестве вывода так, как я этого хочу. Но я хотел бы получить несколько наборов с разными номерами. Я пытаюсь использовать цикл for, но безуспешно. Набор чисел должен быть внутри тега li. Может кто-нибудь, пожалуйста, направить меня в правильном направлении, я пытаюсь изучить интерактивную веб-разработку.

Ответ №1:

В этой строке: document.getElementById("output").innerHTML = html; вы заменяете внутренний HTML-код элемента новым набором элементов. Это означает, что вы очищаете элемент перед добавлением вновь созданных элементов, поэтому их количество никогда не увеличивается.

Быстрым решением будет вместо перезаписи внутреннего HTML-кода добавление к нему с помощью: document.getElementById("output").innerHTML = html; .

Смотрите Пример проверки концепции ниже:

 function numbersInBucket(setOfNumbers, numbersInArray) {
	var numbers = [];
	for (var i = numbersInArray; i > 0; i--){
		numbers.push(i);
	}
	numbers.sort(function(){
		return (Math.round(Math.random())-0.5);
		}
	);
	return numbers.slice(0, setOfNumbers).sort(function(a, b){return a - b});
}


function print(numbers){
	var html = "";
  	for (var i in numbers) {
    	html = html   '<li class="item">'   numbers[i]   '</li>';
  	}
  	document.getElementById("output").innerHTML  = html;
} 

function rowOfNumbers(){
	for(var i = 0; i < 3; i  ){
		print(numbersInBucket(5, 75));
	}
}  
 .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
  }
  ul li {
    list-style: none;
    display: inline-flex;
    justify-content: center;
  }
  .item {
    border: 5px solid #E7F7F5;
    color: #E7F7F5;
    margin: 20px;  
    border-radius: 100px;
    font-size: 40px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 220%;
   justify-content: space-between;
  }  
 <div class="container">
		<ul id="output"></ul>
</div>
<input class="button" type="button" value="click " id="reload" onclick="rowOfNumbers()">