Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Получение текстового контента (https://javascript.ru/forum/events/81151-poluchenie-tekstovogo-kontenta.html)

wrbanker 09.10.2020 16:40

Получение текстового контента
 
Приветствую.
В коде, приведенном ниже, я получаю значение (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>

Vlasenko Fedor 09.10.2020 16:54

var getRadio = document.querySelector('[name="radio-button"]:checked');
console.log(getRadio.value);

так можно попробовать

wrbanker 09.10.2020 17:02

Цитата:

Сообщение от Vlasenko Fedor (Сообщение 529632)
var getRadio = document.querySelectorAll('[name="radio-button"]:checked');
console.log(getRadio.value);

так можно попробовать

Увы. undefined

voraa 09.10.2020 17:05

Цитата:

Сообщение от Vlasenko Fedor
var getRadio = document.querySelectorAll('[name="radio-button"]:checked');
console.log(getRadio.value);

Ну не All же

document.querySelector('[name="radio-button"]:checked');
console.log(getRadio.value);

Vlasenko Fedor 09.10.2020 17:05

поправил
document.querySelector('[name="radio-button"]:checked')

wrbanker 09.10.2020 17:11

Выдает значение value. А нужен текст.

Vlasenko Fedor 09.10.2020 17:59

console.log(document.querySelector('[name="radio-button"]:checked').nextSibling.nodeValue)

voraa 09.10.2020 18:05

Текст не имеет никакого отношения к input. Это просто некий текст расположенный между двумя элементами. Это даже не элемент
Можно попробовать так
document.querySelector('[name="radio-button"]:checked');
console.log(getRadio.nextSibling.textContent);

Но там будут и переводы строк

Nexus 09.10.2020 18:55

Почему никто не вспомнил про тэг «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>

wrbanker 13.10.2020 16:33

Да, спасибо. Работает и так, и так. Но есть вопрос:
x1 = radioButtons[i].parentNode.textContent;

Переменной x1 присваивается правильное значение, но с переносом строки. Как мне правильно сравнить полученную переменную с нужной мне строкой?

if (x1 == 'Заданная строка') {
    alert ('true');
} else {
    alert ('false');
}


Часовой пояс GMT +3, время: 22:16.