Получение текстового контента
Приветствую.
В коде, приведенном ниже, я получаю значение (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');
}
|
| Часовой пояс GMT +3, время: 04:53. |