webForumDet fria alternativet

event listener change

4 svar · 296 visningar · startad av Tinwëlint

TinwëlintMedlem sedan maj 2004451 inlägg
#1

Tänkte göra ett litet skript som skulle se till att en viss <select> är disabled tills en annan <select> får ett värde. Såhär:

javascript:

window.onload=function() {
	var r = document.getElementById("month");
	r.setAttribute("disabled","disabled");
	var s = document.getElementById("year");
	s.addEventListener("change", ena(), false);
}

function ena() {
	var s = document.getElementById("year");
	var r = document.getElementById("month");
	if (s.value != "") {
		r.removeAttribute("disabled")
	} else {
		r.setAttribute("disabled","disabled");
	}
}

html:

<div>
<label for="year">År</label>
<select name="year" id="year">
<option value="" selected="selected">-</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>

</select>

</div>

<div>
<label for="month">Månad (får bara väljas om år är valt)</label>
<select name="month" id="month">
	<option value="" selected="selected">-</option>
	<option value="01">januari</option>
	<option value="02">februari</option>
	<option value="03">mars</option>
	<option value="04">april</option>
	<option value="05">maj</option>
	<option value="06">juni</option>
	<option value="07">juli</option>
	<option value="08">augusti</option>
	<option value="09">september</option>
	<option value="10">oktober</option>
	<option value="11">november</option>
	<option value="12">december</option>
</select>

Det fungerade inte helt bra.
Har några frågor.
Händelsen change är en HTMLevent . Stöder alla läsare det? Ska man testa det innan man kör skriptet?

Mina variabler, hur definierar jag dem globalt så att jag kommer åt dem i båda funktionerna.?

Varför fungerar det så dåligt? Min eventlistener verkar inte anropas när jag ändrar selecten för år. Ska jag förresten definiera den utanför window.onload? Testade det och den anropas inte som den ska ändå.
Hoppas någon kan reda ut det här för mig. Inte särskilt van vid DOM och javascript.

dectgapMedlem sedan sep. 20021 655 inlägg
#2

Jag skulle valt att göra så här:

<script type="text/javascript">
// Genom att deklarera variablerna utanför någon funktion görs de globala
var r, s;

window.onload=function() {
	r = document.getElementById("month");
	r.disabled = true; // disabled är av typen Boolean
	s = document.getElementById("year");
	s.onchange = ena; // Se till att funktionen ena körs vid onchange
}

function ena() {
	r.disabled = !Boolean(s.selectedIndex);
}
</script>

Eftersom stödet för DOM-metoderna setAttribute och addEventListener inte är de bästa ser jag inget fel i att undvika dem när det finns fullgoda alternativ.

TinwëlintMedlem sedan maj 2004451 inlägg
#3

Så snyggt!
Synd med DOM-stödet men det där fungerar ju lika bra.

Gillar speciellt din lösning med:
!Boolean(s.selectedIndex)

Är det där så att:
Boolean(0 och -1) == false
och
Boolean(>0) == true
?

dectgapMedlem sedan sep. 20021 655 inlägg
#4

Talet noll, med godtyckligt antal decimaler (där samtliga decimaler är nollor), ger false. Alla andra tal, och då även negativa, ger true.

TinwëlintMedlem sedan maj 2004451 inlägg
#5

OK. Så om jag inte hade satt selected som attribut på en option (den med index 0) hade det blivit true i början (om ingen är vald ska index tydligen vara -1). MEn det kvittar ju nu.

128 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
125 ms — hämta tråd, inlägg och bilagor (db)