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');
}

laimas 13.10.2020 16:38

wrbanker, значение группы radio можно получить и без цикла.

wrbanker 14.10.2020 02:51

Цитата:

Сообщение от laimas (Сообщение 529730)
wrbanker, значение группы radio можно получить и без цикла.

Да, можно без цикла.
let x1 = (this.querySelector('[name="radio-button"]:checked').parentNode.textContent);

Но описанная проблема со значением x1 остается...

laimas 14.10.2020 05:13

Я не о тексте к кнопке, который, думаю, получать вообще не нужно, я о значении группы. Так как это вы делаете, выше, не требуется, radioNodeList имеет свойство value равное значению выбранной кнопки группы или будет не определено, если не выбрано ничего. То есть, в вашем случае, в обработчике это
this['radio-button'].value

А так как каждая кнопка имеет свое значение, то почему вы его не сравниваете с чем-то, что намного проще и получить, и сравнить, а напрягаетесь с текстом?

voraa 14.10.2020 08:42

Цитата:

Сообщение от wrbanker
Но описанная проблема со значением x1 остается

Если сделано
<label><input type="radio" name="radio-button" value="r-first">Радио 1</label>
то не должно быть никаких переводов строк.

Убрать их можно так

x1 = radioButtons[i].parentNode.textContent.trim();

Но действительно непонятно, зачем это нужно, когда можно использовать value

wrbanker 14.10.2020 12:19

Текст нужен, так как пользователь в начале документа получит введённые им значения.

Ваше значение: Радио 1

laimas 14.10.2020 12:36

Цитата:

Сообщение от wrbanker
пользователь в начале документа получит введённые им значения

Получит от кого и когда?

wrbanker 14.10.2020 13:11

Цитата:

Сообщение от laimas (Сообщение 529756)
Получит от кого и когда?

В форме несколько input с разными типами: date, number, checkbox, radio.
После заполнения полей на странице пользователь нажимает кнопку "обработать" и получает документ. В начале документа он видит все ответы на свои вопросы, а далее - текст, который зависит от ответов на эти самые вопросы.

wrbanker 14.10.2020 13:13

Цитата:

Сообщение от voraa (Сообщение 529749)
Убрать их можно так

x1 = radioButtons[i].parentNode.textContent.trim();

Метод trim() помог. Заодно я узнал о его существовании и прочёл документацию. Спасибо.

laimas 14.10.2020 15:37

Цитата:

Сообщение от wrbanker
В начале документа он видит все ответы на свои вопросы, а далее - текст

А зачем вы получаете значения кнопок, если оперирует только текстом к ним? Ну так седлайте значением этих кнопок текст, который и видит пользователь. И без всяких циклов и if получайте нужное и помещайте в свой документ.


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