Почему value у input type = radio равен undefined?

Question

JackShcherbakov @JackShcherbakov

JavaScript

Почему value у input type = radio равен undefined?

Здравствуйте! Не могу понять, почему код ниже при клике на чекбокс выводит undefined?

<body>
<form>
	<label>Вы не робот <input type="radio" name="oss" value="i'mrobot" onchange="change()"></label><br>
	<label>Я согласен с правилами <input type="radio" name="oss" value="I'magree" onchange="change()"></label>
</form>
</body>
<script>
function change(e){
	alert(this.value);
}
</script>

UPD:
А вот так работает:

for(var i = 0; i<document.forms[0].elements.oss.length; i++){
	document.forms[0].elements.oss[i].onclick = function change(e){
	alert(this.value);
	}
}

Вопрос задан более трёх лет назад
565 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 2

5 комментариев

13 комментариев

JackShcherbakov @JackShcherbakov Автор вопроса
this определяется в момент вызова функции. Соответственно event.target.value тоже не работает. Консоль говорит, что не может прочитать свойство target of undefined.
Вот так вот работает:
for(var i = 0; i<document.forms[0].elements.oss.length; i++){ document.forms[0].elements.oss[i].onclick = function change(e){ alert(this.value); } }
Написано более трёх лет назад
Антон Спирин @rockon404

JackShcherbakov, вот демо https://jsfiddle.net/48gx3fh5/ . Все отлично работает.

Написано более трёх лет назад
Данил Разумков @razumkov2015

JackShcherbakov, посмотри что в e.

Написано более трёх лет назад
Антон Спирин @rockon404

Данил Разумков, как и полагается, в e передается Event.

Написано более трёх лет назад
Данил Разумков @razumkov2015

Антон Спирин, ты при вызове делаешь onchange="change(), а надо "change(event)"

Написано более трёх лет назад
Антон Спирин @rockon404

Данил Разумков, покажите где? У меня передается onchange="change(event)". А onchange="change(el)" работать не будет, так как объекта el нет в глобальном скоупе.

Написано более трёх лет назад

Данил Разумков @razumkov2015

Антон Спирин,

<form>
  <label>Вы не робот <input type="radio" name="oss" value="i'mrobot" onchange="change(event)"></label><br>
  <label>Я согласен с правилами <input type="radio" name="oss" value="I'magree" onchange="change(event)"></label>
</form>
<script>

function change(e){
  alert(e.target.value);
}
</script>

Написано более трёх лет назад

Антон Спирин @rockon404

Данил Разумков, вы какой-то маразм сейчас написали, простите.
Вот мое решение https://jsfiddle.net/48gx3fh5/
Оно же в ответе. А у вас какая-то туфта. Вы зачем-то передаете аргументом выражение:
<b>event</b>t
смысл которого понятен, видимо, только вам.
Не знаю, что вы этим хотели сказать.

Написано более трёх лет назад
Данил Разумков @razumkov2015

Антон Спирин, я жирным выделить хотел)

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Антон Спирин,Мне все равно не совсем понятно почему this равен window. Разве функция не вызывается в контексте элемента, у которго стоит обработчик на onchange

Написано более трёх лет назад
Антон Спирин @rockon404
Данил Разумков, там все передается, но можно и не передавая аргумент, ловить event прямо в
теле функции:
function change() { alert(event.target.value); }

У меня так было в первой версии ответа, вы видимо увидели и не сообразили.
event глобальный объект - он доступен всегда и везде.
Демо: https://jsfiddle.net/6w09fauc/
Написано более трёх лет назад
Антон Спирин @rockon404
JackShcherbakov, в этом отличие inline html хандлеров.
С ними может быть два варианта:
<input type="radio" name="oss" value="i'mrobot" onchange="change(event)">

<script> function change(e){ console.log(this); // тут this ссылается на window } </script>

<script> "use strict"; // активируем строгий режим function change(e){ console.log(this); // тут this ссылается на undefined } </script>

Мой вам совет, вообще никогда не используйте inline хандлеры. Как минимум, ваш код будет читаемей.
Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

Антон Спирин, Спасибо! Теперь все ясно!

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 11 часов назад
- 87 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 12 часов назад
- 52 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 12 часов назад
- 32 просмотра
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 17 часов назад
- 56 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 67 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- 22 апр.
- 87 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 593 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Запуск установки приложения PWA при загрузке страницы?
- 2 подписчика
- 21 апр.
- 217 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Разработать программу для работы с PCI-E

24 апр. 2024, в 11:18

10000 руб./за проект

В wordpress подключить модуль по рассрочке (документацию дам)

24 апр. 2024, в 10:58

4500 руб./за проект

Развернуть болванку мултиплеерной игры unity на сервере

24 апр. 2024, в 09:59

5000 руб./за проект

Вешай на инпуты класс или еще какой аттрибут. а потом querySelectorAll по классу и addEventListener.
Или делегирование на форму.
Про все эти инлайн js и onchange onclick лучше забыть.

Answer 1 · 2018-01-13 21:00:18

Данил Разумков @razumkov2015

"Программист" https://vk.com/cgs_game

$(this).val()

Ответ написан более трёх лет назад

5 комментариев

Answer 2 · 2018-01-13 21:05:22

Потому что this в вашей функции ссылается на объект window, используйте e.target.value:

<input type="radio" name="oss" value="i'mrobot" onchange="change(event)">

function change(e){
  alert(e.target.value);
}

Почему value у input type = radio равен undefined?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт