Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.07.2016, 21:23
Новичок на форуме
Отправить личное сообщение для Valper Посмотреть профиль Найти все сообщения от Valper
 
Регистрация: 25.07.2016
Сообщений: 1

Помогите пожалуйста))
Здравствуйте, помогите профану. Нужно что-бы при выборе type="radio" текст из его label подставлялся в свободную область </span>"___".

<ul class="questions__list">
<li class="questions__item">
<span>1.</span>I __________ a teacher.
<div class="anwers">
<div class="option-group"></br>
<input type="radio" value="1" name="1" id="1-1" required="" />
<label for="1-1">am</label>
<input type="radio" value="2" name="1" id="1-2" required="" />
<label for="1-2">are</label>
<input type="radio" value="3" name="1" id="1-3" required="" />
<label for="1-3">be</label>
<input type="radio" value="4" name="1" id="1-4" required="" />
<label for="1-4">is</label>
<div class="option-group option-group--dont-know">
<input type="radio" value="0" name="1" id="1-0" required="" />
<label for="1-0">я не знаю ответ</label>
</div>
</div>
</div>
</li>
</ul>
Изображения:
Тип файла: jpg Безымянный.jpg (13.7 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 25.07.2016, 21:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Valper,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2016, 23:55
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

У тебя разметка сырая.
Ответить с цитированием
  #4 (permalink)  
Старый 25.07.2016, 23:56
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
  <style>
    .questions__text {
      display: inline-block;
      min-width: 50px;
      border-bottom: 1px solid #000;
    }
  </style>
</head>
<body>
  <ul class="questions__list">
    <li class="questions__item">
      <div>1. I <span class="questions__text"></span> a teacher.</div>
      <div class="answers">
        <div class="option-group"></br>
        <input type="radio" value="1" name="1" id="one" required="" />
        <label for="one">am</label>
        <input type="radio" value="2" name="1" id="two" required="" />
        <label for="two">are</label>
        <input type="radio" value="3" name="1" id="three" required="" />
        <label for="three">be</label>
        <input type="radio" value="4" name="1" id="four" required="" />
        <label for="four">is</label>
        <div class="option-group option-group--dont-know">
          <input type="radio" value="0" name="1" id="zero" required="" />
          <label for="zero">я не знаю ответ</label>
        </div>
      </div>
    </div>
  </li>
  </ul>

  <script>
    document.querySelector('.answers').onchange = function(e) {
      if (e.target.tagName.toLowerCase() != 'input')
        return;
      
      var id = e.target.id;
      var spanElem = document.querySelector('.questions__text');
      spanElem.innerText = document.querySelector('label[for=' + id + ']').innerText;
    };
  </script>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 26.07.2016, 00:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Valper,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
<ul class="questions__list">
 <li class="questions__item">
 <span>1.</span>I __________ a teacher.
 <div class="anwers">
 <div class="option-group"></br>
 <input type="radio" value="1" name="1" id="1-1" required="" />
 <label for="1-1">am</label>
 <input type="radio" value="2" name="1" id="1-2" required="" />
 <label for="1-2">are</label>
 <input type="radio" value="3" name="1" id="1-3" required="" />
 <label for="1-3">be</label>
 <input type="radio" value="4" name="1" id="1-4" required="" />
 <label for="1-4">is</label>
 <div class="option-group option-group--dont-know">
 <input type="radio" value="0" name="1" id="1-0" required="" />
 <label for="1-0">я не знаю ответ</label>
 </div>
 </div>
 </div>
 </li>
 </ul>
<script>
  window.addEventListener('DOMContentLoaded', function() {
      [].forEach.call(document.querySelectorAll('.questions__item'), function(li) {
          var span = li.querySelector('span'),
              text = span.nextSibling.textContent,
              dont = li.querySelector('.option-group--dont-know label');
          [].forEach.call(li.querySelectorAll('[type="radio"]'), function(input) {
              input.addEventListener('change', function() {
                  var label = li.querySelector('[for="' + this.id + '"]');
                  span.nextSibling.textContent = label == dont ? text : text.replace(/_+/, label.textContent)
              });
          });

      });
  });
</script>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 26.07.2016, 01:08
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

рони, а зачем в цикле навешивать onchange?
Ответить с цитированием
  #7 (permalink)  
Старый 26.07.2016, 01:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Decode,
мне удобнее без делегирования в данном случае
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слайдер - карусель блоков (помогите пожалуйста) Viktor.Poberezhniy Общие вопросы Javascript 3 22.07.2014 12:46
Помогите пожалуйста вычислить общую сумму katalizator Общие вопросы Javascript 15 22.03.2013 16:26
Помогите пожалуйста разобраться со скриптом Shalty Opera, Safari и др. 1 21.01.2013 16:41
Помогите пожалуйста правильно написать скрипт raffx Events/DOM/Window 17 16.10.2012 20:31
Помогите пожалуйста Как к картинке приделать ссылку в js volk_bio Элементы интерфейса 9 11.07.2012 14:16