Очистить текстовое поле и радио кнопки на Javascript - PullRequest
Новая
       27

Очистить текстовое поле и радио кнопки на Javascript

0 голосов
/ 18 сентября 2018 
<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>

<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>

<input class="cityName" id="locationName" type="text"  value="" />

Так что в основном это мой HTML. Сейчас я хочу использовать JavaScript, а не jQuery, чтобы очищать поле ввода текста (если что-то было введено ранее) при каждом нажатии переключателей и снимать флажки, когда кто-то нажимает на текстовое поле. Я быстро нашел решение jQuery, но вместо этого получил задачу использовать JavaScript. Поскольку у меня нет большого опыта работы с JS, я не могу обернуть его вокруг, чтобы заставить его работать.

Есть мысли? Был бы очень признателен.

1 Ответ

0 голосов
/ 18 сентября 2018

Вы можете использовать .querySelectorAll () и .querySelector () , чтобы найти elemnts, и .addEventListener () , чтобы прикрепить обработчики событий:

document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
    ele.addEventListener('change', function(e) {
        document.querySelector('#locationName').value = '';
    });
});
document.querySelector('#locationName').addEventListener('input', function(e) {
    document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
       ele.checked=false;
    });
})
<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>

<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>

<input class="cityName" id="locationName" type="text"  value="" />
...