Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Копирование текста из <input> в <span> (https://javascript.ru/forum/dom-window/72773-kopirovanie-teksta-iz-input-v-span.html)

Exhaust_ 25.02.2018 08:34

Копирование текста из <input> в <span>
 
Подскажите как скриптом менять надпись "Пусто" на текст возле input "Текст 1" или "Текст 2" с помощью нажатия на input.
<span class="item_price">Пусто</span>
  <label class="btn btn-price">
	<input type="radio" name="2145715766" id="2145715766"> Текст 1
  </label>
  <label class="btn btn-price">
	<input type="radio" name="2145715766" id="2145715766"> Текст 2
  </label>

j0hnik 25.02.2018 09:04

<span class="item_price">Пусто</span>
  <label class="btn btn-price">
	<input type="radio" name="2145715766" id="2145715766"> Текст 1
  </label>
  <label class="btn btn-price">
	<input type="radio" name="2145715766" id="2145715766"> Текст 2
  </label>

<script>
document.querySelectorAll('input[name="2145715766"]').forEach(el=>el.onclick=e=>document.querySelector('.item_price').textContent = e.target.nextSibling.textContent);
</script>

рони 25.02.2018 09:34

Цитата:

Сообщение от j0hnik
e.target

а если покороче? :)

j0hnik 25.02.2018 09:36

рони,
el вместо e.target

рони 25.02.2018 09:48

j0hnik,
:yes:

Exhaust_ 25.02.2018 12:16

Подскажите еще как при выборе value скопировать его в span
<input type="radio" name="2145715766" id="2145715766" value="15">
<span class="item_Size"></span>

j0hnik 25.02.2018 14:28

document.querySelectorAll('input[name="2145715766"]').forEach(el=>el.onclick=e=>{
	document.querySelector('.item_price').textContent = e.target.nextSibling.textContent;
	document.querySelector('.item_Size').textContent = el.value;
});

Exhaust_ 25.02.2018 14:37

Спасибо
Но на выходе для item_Size выводит надпись [object HTMLSpanElement]

j0hnik 25.02.2018 16:46

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<label class="btn btn-price">
	 <input type="radio" name="2145715766" id="2145715766" value="15">А
  </label>
  <label class="btn btn-price">
	 <input type="radio" name="2145715766" id="2145715766" value="20">Б
  </label>

	<span class="item_price">А</span>
	<span class="item_Size">15</span>
	<script>
		document.querySelectorAll('input[name="2145715766"]').forEach(el=>el.onclick=e=>{
			document.querySelector('.item_price').textContent = e.target.nextSibling.textContent;
			document.querySelector('.item_Size').textContent = el.value;
			});
	</script>
</body>
</html>

Ищите проблему в другом месте, что то переписывает ваш .item_Size


Часовой пояс GMT +3, время: 16:50.