Вход

Просмотр полной версии : Помогите пожалуйста))

Valper
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>
рони
25.07.2016, 21:37
Valper,
Пожалуйста, отформатируйте свой код!

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


... ваш код...



О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Decode
25.07.2016, 23:55
У тебя разметка сырая.
Decode
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>
рони
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('.question s__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
26.07.2016, 01:08
рони, а зачем в цикле навешивать onchange?
рони
26.07.2016, 01:20
Decode,
мне удобнее без делегирования в данном случае