Chcę wymusić wywołanie zdarzenia change na radio buttonie i nie rozumiem, dlaczego EventListener, który łapie to zdarzenie inaczej je widzi, niż ja je utworzyłem oraz, oczywiście, nie reaguje na nie, tylko pokazuje błąd (poniżej screen z konsoli):
HTML:
<form id="manage-accounts">
<label class="options"><input type="radio" name="choose-option" value="chooseAccount" checked>Wybierz konto</label>
<label class="options"><input type="radio" name="choose-option" value="createAccount">Stwórz konto</label>
<button type="button" id="submit-account" class="only">Zatwierdź</button>
</form>
JavaScript:
document.getElementById('manage-accounts').addEventListener('change', switchRadios, false);
document.getElementById('manage-accounts').addEventListener('click', submitNewCustomer, false);
function switchRadios(ev, triggered)
{
console.log('RADIO change?', ev);
if (ev.target.type === 'radio' || triggered) // w konsoli pojawia sie blad "Cannot read property 'type' of null"
{
if (ev.target.value === 'createAccount')
{
/* kod */
}
else
{
/* kod */
}
}
}
function submitNewCustomer(ev)
{
var event = new CustomEvent('change', {
isTrusted: true,
target: ev.target.querySelector('input'),
currentTarget: ev.target.parentNode
});
switchRadios(event, true); // chce wywolac funkcje programowo
}
Konsola (na czerwono wymuszony event, który nie działa; na zielono, gdy ja klikam i jest ok): http://imgur.com/ECPVmgO
Czy źle robię podając w CustomEvent dane, których de facto oczekuje EventListener? Bo nie wiem jak w inny sposób uruchomić funkcję switchRadios(), która sprawdza ev.target.type. Próbowałem wykonać (zamiast wywołania funkcji switchRadios(event, true))
ev.target.parentNode.dispatchEvent(event);
, ale to nie przynosi żadnego efektu. Chcę po prostu programowo wywołać zdarzenie zmiany stanu radio buttona - tak jakbym kliknął w niego i zmienił na inny. Bo gdy sam klikam i zmieniam, to wszystko działa.