Форум

Valper · #1 (**permalink**) 25.07.2016, 21:23

Здравствуйте, помогите профану. Нужно что-бы при выборе 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>

рони · #2 (**permalink**) 25.07.2016, 21:37

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

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

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Decode · #3 (**permalink**) 25.07.2016, 23:55

У тебя разметка сырая.

Decode · #4 (**permalink**) 25.07.2016, 23:56

<!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

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>

Decode · #6 (**permalink**) 26.07.2016, 01:08

рони, а зачем в цикле навешивать onchange?

рони · #7 (**permalink**) 26.07.2016, 01:20

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

Форум

Справочник

Discord чат

Курсы javascript