JS funktion som inte fungerar i IE win... tips?

Tråden skapades och har fått 8 svar. Det senaste inlägget skrevs .
1
  • Oregistrerad
  • 2006-03-16 19:21

Jag har följande funktioner som jag labbar med:

Denna funkar fin-fint i Firefox:

function updateColor() {
var sbox = document.getElementById("colorbox");
var font = sbox.options[sbox.selectedIndex].text;
flashMovie.updateColorFlash(font);
}

Ett försök att få igång samma funktion i IE för windows: (fungerar inte...)

function updateColor() {
var sbox = document.all["colorbox"];
var font = sbox.options[sbox.selectedIndex].text;
flashMovie.updateColorFlash(font);
}

Jag gissar på att på problemet ligger i sbox.options[sbox.selectedIndex].text . Att man helt enkelt måste "anropa" droplistan på annat sätt i IE. Kan det vara så? Och i så fall hur?

Tips tack

  • Medlem
  • 2006-03-16 20:19

Det ska inte vara "value" du tar ifrån?
sbox.options[sbox.selectedIndex].value

Själv kör jag med (min motsvarighet till) sbox.value kort och gott, och har för mig att det går hem även i IE.

  • Oregistrerad
  • 2006-03-16 20:51

Hum, verkar inte fungera det heller...

Så här ser formen ut som jag vill komma åt:

<form action="index.php" method="post" name="addtobasket" target="_self">
<select name="productOptions[]" id="colorbox">
<option value="27" onclick="updateColor()">G01 Vit</option>
</select>
</form>

  • Medlem
  • 2006-03-16 21:09

onclick på option-element vet jag har brister i vissa webbläsare. Testa med onchange på select-elementet istället.

Håller med ovanstående talare, det ska vara en onChange på select-elementet, inte en onclick på option-elementet.. och vad gäller "sbox" ska sbox.value fungera fint.

  • Medlem
  • Mölndal
  • 2006-03-17 19:17

loobiac, i såna här lägen är det bra att isolera var problemet finns. Det första du bör göra är att ta reda på om updateColor() alls anropas, t ex genom att lägga till

alert('updateColor anropas!');

först i din funktion.

document.getElementById() fungerar utmärkt även i IE 5,6,7 så du behöver inte använda document.all.

Håller också med ovanstående om onchange. När man ändrar det börjar dessutom koden att fungera i Safari.

'text' och 'value' ger ju olika saker. 'text' ger 'S01 Röd', 'value' ger '27'. Du vet själv bäst vilket du är ute efter.

Select-elementet har även det 'text'- och 'value'-egenskaper som (återspeglar valt option-element). Använd dem! (som SirN nämnde)

Baserat på ovanstående och med lite förenkling får du följande kod, som fungerar i Firefox, Safari och IE:

function updateColor() {
	var font = document.getElementById("colorbox").value;
	flashMovie.updateColorFlash(font);
}

Ett par tillgänglighetstips:

1. Tänk på att det kan bli riktigt irriterande för den som använder tangentbordet för att navigera när man lägger onchange på ett select-element. Testa själv i Opera eller IE/Win. Beroende på vad som utförs vid onchange kan det också vara omöjligt att komma förbi det första valet utan att använda mus.

2. Komplettera med en submitknapp för den som inte har JavaScript.

  • Medlem
  • Mölndal
  • 2006-03-18 10:32

Håller helt med om dessa punkter. Utgick väl närmast från att onchange mer var "rich functionality" och att det även fanns vanliga sätt att skicka iväg formet.

  • Medlem
  • Mölndal
  • 2006-03-27 18:44

loobiac, vore intressant med en liten hint ifall våra tips hjälpte.

1
Bevaka tråden