Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2020, 16:40
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

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

Последний раз редактировалось wrbanker, 09.10.2020 в 16:42.
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2020, 16:54
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,403

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

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

Последний раз редактировалось Vlasenko Fedor, 09.10.2020 в 17:04.
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2020, 17:02
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

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

так можно попробовать
Увы. undefined
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2020, 17:05
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 721

Сообщение от 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);
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2020, 17:05
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,403

поправил
document.querySelector('[name="radio-button"]:checked')
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2020, 17:11
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

Выдает значение value. А нужен текст.
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2020, 17:59
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,403

console.log(document.querySelector('[name="radio-button"]:checked').nextSibling.nodeValue)
Ответить с цитированием
  #8 (permalink)  
Старый 09.10.2020, 18:05
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 721

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

Но там будут и переводы строк
Ответить с цитированием
  #9 (permalink)  
Старый 09.10.2020, 18:55
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,395

Почему никто не вспомнил про тэг «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>
Ответить с цитированием
  #10 (permalink)  
Старый 13.10.2020, 16:33
Аспирант
Отправить личное сообщение для wrbanker Посмотреть профиль Найти все сообщения от wrbanker
 
Регистрация: 05.08.2020
Сообщений: 33

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

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

if (x1 == 'Заданная строка') {
    alert ('true');
} else {
    alert ('false');
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Работа с таймерами после обновления контента paulsk Элементы интерфейса 3 03.04.2015 15:24
Смена контента Iframe shurlik9999 Events/DOM/Window 6 09.01.2013 16:27
Загрузка контента без перезагрузки страницы vah-smile AJAX и COMET 3 30.03.2011 16:37
получение контента childNodes traa Events/DOM/Window 7 04.02.2011 20:25
Получение текстового содержимого из всех вложенных DOM EmDmAl Events/DOM/Window 8 02.12.2009 23:38