Помогите пожалуйста))
Вложений: 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> |
Valper,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
У тебя разметка сырая.
|
<!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>
|
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>
|
рони, а зачем в цикле навешивать onchange?
|
Decode,
мне удобнее без делегирования в данном случае |
| Часовой пояс GMT +3, время: 06:53. |