[JS/FF] document.getElementById() is eigenwijs

[Av3ng3rtje]

Hallo,

Op het moment ben ik bezig met het volgende javascript:

JavaScript:

function swapImage(thisForm,idElement) {

    var checkBoxArr = thisForm['markedFunc[]'];

    for(var i = 0; i < checkBoxArr.length; i++) {

        if(checkBoxArr[i].value == idElement) {

            if(checkBoxArr[i].checked) {
                document.getElementById('process_' + idElement).background = "{C_URL_IMG}/matrix/selected.gif";
            } else {
                document.getElementById('process_' + idElement).background= "{C_URL_IMG}/matrix/notselected.gif";
            }
        }
    }
}

In combinatie met:

HTML:

<td background="{C_URL_IMG}/matrix/notselected.gif" width="100" height="56" id="process_{mtToepassingID}">
    <div align="center"> 
        <table border="0" width="90%" cellspacing="0" cellpadding="0" height="100%">
            <tr>
                <td><div align="center"><font face="Tahoma" size="1"><div align="center">{mtToepassingNaam}</div></font></td>
            </tr>
            <tr>
                <td height="20">
                <input type="checkbox" name="markedFunc[]" value="{mtToepassingID}" onClick="swapImage(this.form,{mtToepassingID});" style="float: right"></td>
            </tr>
        </table>
    </div>
</td>

{C_URL_IMG} wordt door PHP toegewezen maar dat even terzake. Waar het omgaat is dat document.getElementById('process_' + idElement) het TD element ophaalt er vervolgens de background aanpast. In IE is dit echter geen probleem, maar in firefox schijnt ie niet defined te zijn, want als ik bv:

code:

window.alert(getElementById('process_2').background);

doe krijg ik "undefined" terug. Echter als ik:

code:

window.alert(getElementById('process_2').width);

Doe krijg ik netjes 100 terug in FireFox. Wat dus het probleem is dat Firefox het hele element background niet ziet? De functie werkt wel in Internet Explorer maar niet in FireFox. Ook wat mij opvalt is dat Firefox geen custom tags ondersteunt en IE weer wel... zoals blijkt.. Deze functie gebruikte ik eerst om een image te wisselen:

JavaScript:

function moveImage(object) {

    var objectImage = document.getElementById('process_' + object);

    temp = objectImage.background;
    objectImage.background = objectImage.onCheck;
    objectImage.onCheck = temp;
    
}

In combinatie met:

HTML:

<td background="{C_URL_IMG}/matrix/notselected.gif" onCheck="{C_URL_IMG}/matrix/selected.gif"  width="100" height="56" id="process_{mtToepassingID}">

Wat zie ik over het hoofd , of kan het nog veel eenvoudiger ?

[Sappie]

background is geen valid attribuut van een td element (in html4.01 strict iig). Gebruik daarvoor gewoon css

code:

document.getElementById("blaat").style.backgroundImage = "url(achtergrond.gif)";

Of beter maak je er zoiets van (als je functie er slechts toe dient de backgrounds te vervangen en afgezien van het feit dat je html behoorlijk bloated is):

code:

function swapImage(inputElement) {
  if (document.getElementById("selected")) document.getElementById("selected").removeAttribute("id");
  inputElement.parentNode.parentNode.parentNode.parentNode.setAttribute("id", "selected");
}

en geef je aan de functie het inputElement mee (aanroepen dus met swapImage(this)) Vervolgens style je deze mbv css:

code:

#selected { background-image: url("achtergrond.gif"); }

[ Voor 111% gewijzigd door Sappie op 03-10-2005 12:35 ]

[Av3ng3rtje]

Bedankt!, kan je op w3c schools terug vinden of op de site van w3c of een bepaald attribuut niet in firefox wordt gepakt ?

Of beter maak je er zoiets van (als je functie er slechts toe dient de backgrounds te vervangen en afgezien van het feit dat je html behoorlijk bloated is):

code:

function swapImage(inputElement) {
  if (document.getElementById("selected")) document.getElementById("selected").removeAttribute("id");
  inputElement.parentNode.parentNode.parentNode.parentNode.setAttribute("id", "selected");
}

Als ik swapImage(this) doe , schrijf ik dan het hele HTML D.O.M. object weg of slechts het input object? Want als ik window.alert(inputElement.value) doe krijg ik niks terug.

en waarom doe je 4 keer achter elkaar parentNode ? (sorry maar ik ben nogal een D.O.M. object n00bje )

De code die ik nu gebruik en werkt in firefox en IE

JavaScript:

function swapImage(idElement) {

    var checkBoxArr = document.form['markedFunc[]'];

    for(var i = 0; i < checkBoxArr.length; i++) {

        if(checkBoxArr[i].value == idElement) {

            if(checkBoxArr[i].checked) {
                document.getElementById('process_' + idElement).style.backgroundImage = "url({C_URL_IMG}/matrix/selected.gif)";
            } else {
                document.getElementById('process_' + idElement).style.backgroundImage = "url({C_URL_IMG}/matrix/notselected.gif)";
            }
        }
    }
}

[ Voor 6% gewijzigd door Av3ng3rtje op 03-10-2005 13:31 ]

[Michali]

Av3ng3rtje schreef op maandag 03 oktober 2005 @ 13:23:
Bedankt!, kan je op w3c schools terug vinden of op de site van w3c of een bepaald attribuut niet in firefox wordt gepakt ?

Kijk gewoon in deze lijst of het attribuut voorkomt. Maak verder gewoon zo veel mogelijk gebruik van css en dus de element.style.{attribuut} methode in js om ze een waarde te geven op op te vragen. Bij de td tag zie je bijvoorbeeld geen background, maar wel bgcolor. bgcolor zou ik overigens gewoon links laten liggen en gewoon de background css property gebruiken.

[Verwijderd]

http://www.w3.org/TR/html401/index/attributes.html