[JS] getElementById in combinatie met 'this' - Softwareontwikkeling

woensdag 30 augustus 2006 13:40

Acties:

Verwijderd

Topicstarter

Hoi,

Ik heb gezocht op google en op dit forum maar ik kan nergens vinden hoe ik de index kan krijgen van een object. Misschien een beetje vage uitleg.. een voorbeeldje

Ik heb de volgende afbeelding met html code:

<img id="images" onclick="javascript:clicked(this);" border="0" src="../thumbnails/IMG_3119.jpg" >

Nu wil ik in de javascript functie ''clicked'' erachter komen wat de index is van dit plaatje. Alle thumbnails hebben namelijk id="images". Met

document.getElementById("images")[index];

kan ik elke afbeelding apart aanspreken en aanpassen. Maar dan moet ik wel weten wat de index is van de afbeelding. Kan ik dit op een of andere manier opvragen? Het enige wat ik binnen krijg is dus een verwijzing naar het object (de afbeelding) via this. Een manier om dit probleem op te lossen is gewoon met oplopende ID's of NAME's te werken. Maar dat wil ik liever niet.

Ik had dus graag dat ik zoiets kon doen:

<script>

function clicked(obj) {

var img_index = obj.getIndex(); // dit bestaat dus helaas niet

document.getElementById("images")[img_index].style.visibility = "hidden";

}

</script>

Deze functie ziet er misschien wat nutteloos uit want dit had ik ook direct via obj kunnen doen maar dat komt omdat ik straks die tweede regel in een andere functie uitvoer.

Een alternatief waar ik aan gedacht heb is om this op te slaan als global en die later te gebruiken. Maar toch werk ik liever met die indexen als dat kan.

Weet iemand hoe ik die opvraag?

Alvast bedankt!

woensdag 30 augustus 2006 14:01

Acties:

giMoz

iets met meester...

obj.getAttribute("src") (niet goed gelezen)

Trouwens: al je images dezelfde ID geven is niet erg netjes!!! Foei!

maar je geeft het object al mee. waarom zou je dan nog een getElementById willen hebben,
je hebt het object immers al

[ Voor 44% gewijzigd door giMoz op 30-08-2006 14:02 ]

Of niet natuurlijk...

woensdag 30 augustus 2006 14:10

Acties:

Michali

JavaScript:

1
2
3

function clicked(obj) {
obj.style.visibility = "hidden";
}

Een ID moet overigens uniek zijn. Je zou ook naar getElementsByTagName kunnen gebruiken als je alle afbeeldingen wilt ophalen.

Wat die kerel (

) boven me dus ook zegt.

[ Voor 12% gewijzigd door Michali op 30-08-2006 14:11 ]

Noushka's Magnificent Dream | Unity

woensdag 30 augustus 2006 14:10

Acties:

frickY

Een ID behoort uniek te zijn in de gehele pagina.
Voeg er een volgnummer aan toe om datg te verhelpen, en je probleem is ook direct opgelost

woensdag 30 augustus 2006 14:11

Acties:

Verwijderd

JavaScript:

1
2
3

function clicked(obj) {
   obj.style.visibility = 'hidden';
}

woensdag 30 augustus 2006 14:12

Acties:

Verwijderd

Topicstarter

Ik heb het nu toch via het object geprobeerd.

Het probleem is nu dat het lijkt alsof ik een opgeslagen object niet meer kan gebruiken. Ik heb nu het volgende:

<script>

obj_selected_first = "";
obj_selected_second = "";

function clicked(obj) {

obj_selected_first = obj;

}

function changeborder() {

obj_selected_first.style.borderColor = "#000000";

}

<script>

Als ik nu na clicked de functie changeborder aanroep dan gebeurt er niets. Geen foutmelding helemaal niets

. Wat doe ik hier fout?

woensdag 30 augustus 2006 14:18

Acties:

Verwijderd

Topicstarter

Okeej ik zie dat dit niet ligt aan het opslaan van het object maar dat het eraan ligt dat hij de border color gewoon niet wil aanpassen

... Want visibility lukt wel??

woensdag 30 augustus 2006 14:20

Acties:

Verwijderd

Topicstarter

Volgens mij zie ik het al.. Ben style vergeten ertussen te zetten .. dom

woensdag 30 augustus 2006 14:29

Acties:

Arjan

ten eerste snap ik niet echt wat je aan het doen bent, dus laat ik maar aangeven hoe het volgens mij het makkelijkst kan.

HTML:

index.html
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<img class="images" onclick="clicked" src="een_heel_vet_plaatje1.jpg" />
<img class="images" onclick="clicked" src="een_heel_vet_plaatje2.jpg" />
<img class="images" onclick="clicked" src="een_heel_vet_plaatje3.jpg" />
</body>
</html>

JavaScript:

script.js

var Gobj_selected_first, Gobj_selected_second;

function clicked() {
    if(Gobj_selected_first) {
        Gobj_selected_second = this;
    } else {
        Gobj_selected_first = this;
    }
    var all_img = document.getElementsByTagName("img");
    for(var i=0; i<all_img.length; i++) {
        if(all_img[i] == this) alert("Dit is het " + (i + 1) + "de/ste plaatje");
    }
}
function changeBorder() {
    Gobj_selected_first.style.borderColor = "red";
    Gobj_selected_second.style.borderColor = "green";
}

En als je nu ook nog wat met een id en een teller wil doen dan geef je de images gewoon allemaal een ID (dat met een letter begint) met een getal, bv. plaatje1.

De hoofdletter G staat voor de variable om aan te geven dat het om een globale variabele gaat. Liefst vermijd je dat, door object georenteerd te schrijven, maar dat ligt weer helemaal aan wat je wil bereiken

[edit]
ik zie dat je zonder een ID de index wil weten, heb ik even toegevoegd.

[ Voor 10% gewijzigd door Arjan op 30-08-2006 14:37 ]

oprecht vertrouwen wordt nooit geschaad

woensdag 30 augustus 2006 14:59

Acties:

Verwijderd

Topicstarter

Ja ik weet dat het vaag is wat ik wilde.. Maar het is gelukkig gelukt.

Bedankt voor de hulp!

Pagina: 1

Reageer