Получение текстового контента
Приветствую.
В коде, приведенном ниже, я получаю значение (value) выбранной радио-кнопки. А вот получить текст (Радио 1 и т.п.) у меня не получается. Пытался через innerText и textContent - в консоли пустая строка. Наверняка, ошибаюсь в синтаксисе. Помогите, плиз, разобраться.
<form id="test-form">
<input type="radio" name="radio-button" value="r-first">Радио 1
<input type="radio" name="radio-button" value="r-second">Радио 2
<input type="radio" name="radio-button" value="r-third">Радио 3
<input type="submit" value="Обработать">
</form>
<script>
const form = document.querySelector('#test-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
let getRadio = this.querySelectorAll('[name="radio-button"]');
let x1;
for (let i=0; i<getRadio.length; i++) {
if (getRadio[i].checked) {
x1 = getRadio[i].value;
}
}
console.log (x1);
});
</script>
|
var getRadio = document.querySelector('[name="radio-button"]:checked');
console.log(getRadio.value);
так можно попробовать |
Цитата:
|
Цитата:
document.querySelector('[name="radio-button"]:checked');
console.log(getRadio.value);
|
поправил
document.querySelector('[name="radio-button"]:checked')
|
Выдает значение value. А нужен текст.
|
console.log(document.querySelector('[name="radio-button"]:checked').nextSibling.nodeValue)
|
Текст не имеет никакого отношения к input. Это просто некий текст расположенный между двумя элементами. Это даже не элемент
Можно попробовать так
document.querySelector('[name="radio-button"]:checked');
console.log(getRadio.nextSibling.textContent);
Но там будут и переводы строк |
Почему никто не вспомнил про тэг «label»?
<form id="test-form">
<label><input type="radio" name="radio-button" value="r-first">Радио 1</label>
<label><input type="radio" name="radio-button" value="r-second">Радио 2</label>
<label><input type="radio" name="radio-button" value="r-third">Радио 3</label>
<input type="submit" value="Обработать">
</form>
<script>
const form = document.querySelector('#test-form');
form.addEventListener('submit', function (event) {
event.preventDefault();
const radioButtons = this.querySelectorAll('[name="radio-button"]');
let x1;
for (let i=0; i<radioButtons .length; i++) {
if (radioButtons [i].checked) {
x1 = radioButtons[i].parentNode.textContent;
}
}
alert(x1);
});
</script>
|
Да, спасибо. Работает и так, и так. Но есть вопрос:
x1 = radioButtons[i].parentNode.textContent; Переменной x1 присваивается правильное значение, но с переносом строки. Как мне правильно сравнить полученную переменную с нужной мне строкой?
if (x1 == 'Заданная строка') {
alert ('true');
} else {
alert ('false');
}
|
wrbanker, значение группы radio можно получить и без цикла.
|
Цитата:
let x1 = (this.querySelector('[name="radio-button"]:checked').parentNode.textContent);
Но описанная проблема со значением x1 остается... |
Я не о тексте к кнопке, который, думаю, получать вообще не нужно, я о значении группы. Так как это вы делаете, выше, не требуется, radioNodeList имеет свойство value равное значению выбранной кнопки группы или будет не определено, если не выбрано ничего. То есть, в вашем случае, в обработчике это
this['radio-button'].value А так как каждая кнопка имеет свое значение, то почему вы его не сравниваете с чем-то, что намного проще и получить, и сравнить, а напрягаетесь с текстом? |
Цитата:
<label><input type="radio" name="radio-button" value="r-first">Радио 1</label> то не должно быть никаких переводов строк. Убрать их можно так x1 = radioButtons[i].parentNode.textContent.trim(); Но действительно непонятно, зачем это нужно, когда можно использовать value |
Текст нужен, так как пользователь в начале документа получит введённые им значения.
Ваше значение: Радио 1 |
Цитата:
|
Цитата:
После заполнения полей на странице пользователь нажимает кнопку "обработать" и получает документ. В начале документа он видит все ответы на свои вопросы, а далее - текст, который зависит от ответов на эти самые вопросы. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 10:02. |