Javascript-форум - Вывод новых значений к старым в текстовое поле

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вывод новых значений к старым в текстовое поле (https://javascript.ru/forum/misc/77573-vyvod-novykh-znachenijj-k-starym-v-tekstovoe-pole.html)

Вывод новых значений к старым в текстовое поле

Как выводить раз за разом новые значения в текстовое поле, при этом, чтобы старые не стирались

function func1(){ 
 for (i=1;i<=5;i++){
  var RANKS = ranks[Math.floor(Math.random()*ranks.length)];
  var SUITS = suits[Math.floor(Math.random()*suits.length)];
  var blabla = RANKS + " " + SUITS;
  document.getElementById("random").value = blabla;
 }
}

У меня стираются старые значения и выводятся новые, а нужно, чтобы они добавлялись

ProgYoung,

Цитата:

Сообщение от ProgYoung

value += blabla;

function func1(){ 
	for(var i = 1, message = ""; i <= 5; i++) {
		var RANKS = ranks[Math.floor(Math.random() * ranks.length)];
		var SUITS = suits[Math.floor(Math.random() * suits.length)];
		message += RANKS + " " + SUITS;
	}
	
	document.getElementById("random").value = message;
}

Malleys, рони,
Спасибо большое!
Но если я буду в каждое текстовое поле (всего 5) выводить два рандомных значения, то чтобы мне не писать одно и то же для каждого id, я решила создать отдельную функцию, которая будет возвращать готовые рандомные элементы массивом. Правда у меня выводится undefined... Что не так работает?

var ranks = ["двойка","тройка","четверка","пятерка","шестерка", "семерка","восьмерка","девятка","десятка","валет","дама","король","туз"];
var suits = ["пик","червей","треф","бубен"];

function func(){
   while(true){
      try{
         var RANKS = ranks[Math.floor(Math.random()*ranks.length)];
  	 var SUITS = suits[Math.floor(Math.random()*suits.length)];
 	 var blabla = RANKS + " " + SUITS;
  	 return blabla;
      } catch(e) {
        alert("No game!");
      } finally {
        if (confirm("Продолжить?")) break;
        else break;
      }
   }
}

function func1(){
   document.getElementById("random1").value = func();
}
function func2(){
   document.getElementById("random2").value = func();
}
function func3(){
   document.getElementById("random3").value = func();
}
function func4(){
   document.getElementById("random4").value = func();
}
function func5(){
   document.getElementById("random5").value = func();
}

ProgYoung,
а где ranks и suits?

рони,
исправил выше

Я не понял в коде, что вы хотите... но

Цитата:

Сообщение от ProgYoung

я буду в каждое текстовое поле (всего 5) выводить два случайных значения

можно так...

<textarea id="random1"></textarea>
<textarea id="random2"></textarea>
<textarea id="random3"></textarea>
<textarea id="random4"></textarea>
<textarea id="random5"></textarea>

<script>var ranks = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var suits = "♣♦♥♠";
function func() {
	for(var i = 1, message = ""; i <= 2; i++) {
		var RANKS = ranks[Math.floor(Math.random() * ranks.length)];
		var SUITS = suits[Math.floor(Math.random() * suits.length)];
		message += RANKS + "" + SUITS;
	}
	
	return message;
}

for(var i = 1; i <= 5; i++) {
	document.getElementById("random" + i).value += func();
}

</script>

ProgYoung,

function func(){
   var blabla = [];
   while(confirm("количество карт:" +blabla.length + " продолжить?")){
     var RANKS = ranks[Math.floor(Math.random()*ranks.length)];
  	 var SUITS = suits[Math.floor(Math.random()*suits.length)];
 	 blabla.push(RANKS + " " + SUITS);
      }
   return blabla;
}

рони, Malleys,
Мне как раз нужно использовать try, catch, finally. При нажатии на кнопку в текстовых полях появляются рандомные значения карт, например, "двойка пики". Но выводит undefined.

<input type="button" value="Кликни!" onclick="func1()">
  <p><input type="text" id="random1" readonly></p>
  <p><input type="text" id="random2" readonly></p>
  <input type="text" id="random3" readonly>
  <p><input type="text" id="random4" readonly></p>
  <input type="text" id="random5" readonly>

<script>

 // это все возможные номиналы
var ranks = ["двойка","тройка","четверка","пятерка","шестерка",
"семерка","восьмерка","девятка","десятка","валет","дама","король","туз"];
var suits = ["пик","червей","треф","бубен"];

function func(){
   while(true){
      try{ 
         var RANKS = ranks[Math.floor(Math.random()*ranks.length)];
  	 var SUITS = suits[Math.floor(Math.random()*suits.length)];
  	 return RANKS + " " + SUITS;
      } catch(e) {
        alert("No game!");
      } finally {
        if (confirm("Продолжить?")) break;
        else break;
      }
   }
}

function func1(){  
   for(var i = 1; i <= 5; i++) {
       document.getElementById("random" + i).value = func();
   }
}
</script>

Цитата:

Сообщение от ProgYoung

нужно использовать try, catch, finally

return нужно размещать в finally

Dilettante_Pro,
аааа, спасибо большое! Все работает, как надо)

Dilettante_Pro, рони, Malleys,
возник еще вопрос...
Как теперь мне считать эти данные с текстовых полей в библиотеку, например, чтобы получилось так:

var hand = [
      { "rank":"семерка", "suit":"пик" },
      { "rank":"четверка", "suit":"червей" },
      { "rank":"двойка", "suit":"треф" },
      { "rank":"семерка", "suit":"пик" },
      { "rank":"восьмерка", "suit":"бубен" }
   ];

Так, как делаю я, не получается:

var hand = [];
   var all1 = String(document.getElementById("random1").value);
   var all2 = String(document.getElementById("random2").value);
   var all3 = String(document.getElementById("random3").value);
   var all4 = String(document.getElementById("random4").value);
   var all5 = String(document.getElementById("random5").value);
   var als1 = all1.split(" ");
   var als2 = all2.split(" ");
   var als3 = all3.split(" ");
   var als4 = all4.split(" ");
   var als5 = all5.split(" "); 

   hand[0].suit=als1[1];
   hand[0].rank=als1[0];
   hand[1].suit=als2[1];
   hand[1].rank=als2[0];
   hand[2].suit=als3[1];
   hand[2].rank=als3[0];
   hand[3].suit=als4[1];
   hand[3].rank=als4[0];
   hand[4].suit=als5[1];
   hand[4].rank=als5[0];
alert(hand);

ProgYoung,
Проще сразу запоминать при генерации значений

ProgYoung, может всё-таки использовать циклы и массивы? Вы же не хотите повторении! Например последний ваш код может выводить hand так...

var hand = [];

for(var i = 0; i < 5; i++) {
	var all = String(document.getElementById("random" + (i + 1)).value);
	var als = all.split(" ");
	hand[i].suit = als[1];
	hand[i].rank = als[0];
}

alert(hand);

Malleys,
не работает почему-то
я сделал так:

<p><input type="button" value="Кликни!" onclick="func2()"></p>
<script type="text/javascript">
function func2(){
   var hand = [];
   for(var i = 0; i < 5; i++) {
      var all = String(document.getElementById("random" + (i + 1)).value);
      var als = all.split(" ");
      hand[i].suit = als[1];
      hand[i].rank = als[0];
   }
   document.getElementById('solve').value = hand;
}

Цитата:

Сообщение от ProgYoung

не работает почему-то

Да я просто показал идею, как работать с циклами на основе вашего неработающего кода выше!

Цитата:

Сообщение от ProgYoung

if (confirm("Продолжить?")) break;
else break;

А какой смысл спрашивать, если оно всё-равно break?

Вот исправил и трансформировал ваш код из поста №9...

<input type="button" value="Кликни!" onclick="func1();">
<p><input type="text" id="random1" readonly></p>
<p><input type="text" id="random2" readonly></p>
<p><input type="text" id="random3" readonly></p>
<p><input type="text" id="random4" readonly></p>
<p><input type="text" id="random5" readonly></p>

<script>
	// это все возможные номиналы
	var ranks = ["двойка", "тройка", "четверка", "пятерка", "шестерка",
		"семерка", "восьмерка", "девятка", "десятка", "валет", "дама", "король", "туз"
	];
	var suits = ["пик", "червей", "треф", "бубен"];

	function func() {
		var RANKS = ranks[Math.floor(Math.random() * ranks.length)];
		var SUITS = suits[Math.floor(Math.random() * suits.length)];
		return RANKS + " " + SUITS;
	}

	function func1() {
		for (var i = 1; i <= 5; i++) {
			document.getElementById("random" + i).value = func();
		}
	}

</script>

То?

Цитата:

Сообщение от ProgYoung

Как теперь мне считать эти данные с текстовых полей в библиотеку, например, чтобы получилось так:

Так может сразу писать и в поля и в DOM? Вот объединённый пример...

<input type="button" value="Кликни!" onclick="func1();">
<p><input type="text" id="random1" readonly></p>
<p><input type="text" id="random2" readonly></p>
<p><input type="text" id="random3" readonly></p>
<p><input type="text" id="random4" readonly></p>
<p><input type="text" id="random5" readonly></p>
<p id="solve"></p>

<script>
	// это все возможные номиналы
	var ranks = ["двойка", "тройка", "четверка", "пятерка", "шестерка",
		"семерка", "восьмерка", "девятка", "десятка", "валет", "дама", "король", "туз"
	];
	var suits = ["пик", "червей", "треф", "бубен"];

	function func() {
		return {
			rank: ranks[Math.floor(Math.random() * ranks.length)],
			suit: suits[Math.floor(Math.random() * suits.length)]
		};
	}
	
	var hand = [];

	function func1() {
		for (var i = 0; i < 5; i++) {
			var card = func();
			hand[i] = card;
			document.getElementById("random" + (i + 1)).value = card.rank + " " + card.suit;
		}

		document.getElementById("solve").textContent = hand.map(function(card) { return card.rank + " " + card.suit; }).join(", ");
	}

</script>

Malleys,
Т.к. в задании сказано использовать конструкцию try, catch,finally, то пришлось хоть что-то добавить в finally, но сейчас там return, поэтому удалил.

Сейчас бы разобраться как в библиотеку это все добавить

Цитата:

Сообщение от ProgYoung

Сейчас бы разобраться как в библиотеку это все добавить

Я уже ответил на этот вопрос, посмотрите последнюю часть поста №16.

Malleys,
спасибо большое!