Error: document.getElementByClass is not a function - Softwareontwikkeling

dinsdag 20 november 2007 08:03

Acties:

Topicstarter

De volgende code werkt niet en geeft deze error: "document.getElementByClass is not a function"
Ziet iemand misschien wat hier fout is.(Heb google geprobeerd)

In een externe bestand.js file heb ik deze functie staan die een property in een CSS file aanpast:

code:

function changeStyle()
{
document.getElementByClass('mijnKlasse_01_01').style.backgroundColor = "red";
}

Deze functie wordt aangeroepen in een php bestand:

code:

<html>

<head>
<script language="javascript" type="text/javascript" src="bestand.js"></script>
</head>

<body>

<div class="mijnKlasse_01_01" onmouseover="changeStyle()">Text</div>

</body>
</html>

dinsdag 20 november 2007 08:11

Acties:

TERW_DAN

Met een hamer past alles.

vervang het eens door document.getElementsByClassName (dan krijg je namelijk gelijk alles terug met die className) of hang een ID aan het ding en doe het dmv document.getElementById. Dat laatste is imho wat netter, elementen netjes een ID geven en die aanspreken.

dinsdag 20 november 2007 08:23

Acties:

Arcane Apex

Topicstarter

Terw_Dan schreef op dinsdag 20 november 2007 @ 08:11:
vervang het eens door document.getElementsByClassName (dan krijg je namelijk gelijk alles terug met die className) of hang een ID aan het ding en doe het dmv document.getElementById. Dat laatste is imho wat netter, elementen netjes een ID geven en die aanspreken.

Ik heb zowel document.getElementsByClassName als document.getElementById geprobeerd, maar dan treedt dezelfde error op.

dinsdag 20 november 2007 08:28

Acties:

Erkens

Fotograaf

Arcane Apex schreef op dinsdag 20 november 2007 @ 08:03:
De volgende code werkt niet en geeft deze error: "document.getElementByClass is not a function"
Ziet iemand misschien wat hier fout is.(Heb google geprobeerd)

Ja, die functie bestaat ook niet. Het is getElementsByClassName zoals Terw_Dan al aangaf.

Overigens zou je in jouw geval ook dit kunnen doen:

JavaScript:

function changeStyle(e)
{
    e.style.backgroundColor = "red";
}

HTML:

<html>
  <head>
    <script type="text/javascript" src="bestand.js"></script>
  </head>

  <body>
    <div class="mijnKlasse_01_01" onmouseover="changeStyle(this)">Text</div>
  </body>
</html>

Arcane Apex schreef op dinsdag 20 november 2007 @ 08:23:
[...]

Ik heb zowel document.getElementsByClassName als document.getElementById geprobeerd, maar dan treedt dezelfde error op.

Als je dan dezelfde error krijgt dan heb je het niet geprobeerd of op je server geupload

dinsdag 20 november 2007 08:34

Acties:

Arcane Apex

Topicstarter

Ik snap al waarom document.getElementById niet werkte. Ik typte ID ipv Id. Nu werkt het script wel.
Echter heb ik veel classes en ik zou niet graag alles naar ID willen veranderen, maar gewoon classes aanhouden.

document.getElementsByClassName geeft echter nog steeds dezelfde error.

[ Voor 34% gewijzigd door Arcane Apex op 20-11-2007 08:40 ]

dinsdag 20 november 2007 08:51

Acties:

P.O. Box

ik zet 5 fake-euros op dat je de 's' van getElementsByClassName bent vergeten....

dinsdag 20 november 2007 08:52

Acties:

Erkens

Fotograaf

Arcane Apex schreef op dinsdag 20 november 2007 @ 08:34:
Echter heb ik veel classes en ik zou niet graag alles naar ID willen veranderen, maar gewoon classes aanhouden.

Je kan classes ook niet eventjes omzetten naar ID's aangezien classes niet uniek zijn. Vandaar ook dat die getElementsByClassName meerdere elementen terug geeft en getElementById slechts 1 element.

dinsdag 20 november 2007 08:54

Acties:

Arcane Apex

Topicstarter

Edwardvb schreef op dinsdag 20 november 2007 @ 08:51:
ik zet 5 fake-euros op dat je de 's' van getElementsByClassName bent vergeten....

Eerst was ik het wel vergeten, maar vervolgens heb ik het verbeterd en toen kreeg ik nog steeds dezelfde error, namelijk(copy/paste): document.getElementsByClassName is not a function

[ Voor 3% gewijzigd door Arcane Apex op 20-11-2007 08:56 ]

dinsdag 20 november 2007 09:02

Acties:

Arcane Apex

Topicstarter

document.getElementById werkt dus, document.getElementsByClassName echter niet.
En het is juist document.getElementsByClassName welke ik wil gebruiken.

dinsdag 20 november 2007 09:03

Acties:

P.O. Box

laat je code eens zien dan?

dinsdag 20 november 2007 09:10

Acties:

Arcane Apex

Topicstarter

code:

function changeStyle()
{
document.getElementsByClassName('mijnKlasse_01_01').style.backgroundColor = "red";
}

code:

<html>

<head>
<script language="javascript" type="text/javascript" src="bestand.js"></script>
</head>

<body>

<div class="mijnKlasse_01_01" onmouseover="changeStyle()">Text</div>

</body>
</html>

[ Voor 6% gewijzigd door Arcane Apex op 20-11-2007 09:12 ]

dinsdag 20 november 2007 09:19

Acties:

Verwijderd

Erhm,

getElementsByClassName bestaat volgens mij helemaal niet.

Je hebt getElementById, getElementsByName en getElementsByTagName...zie ook http://msdn2.microsoft.com/en-us/library/ms531073.aspx#

En getElementsbyName (en getElementsbyClassName ook als die zou bestaan) retourneert een Collection van objects. Een collection heeft geen style property (natuurlijk).

dinsdag 20 november 2007 09:19

Acties:

Verwijderd

Arcane Apex schreef op dinsdag 20 november 2007 @ 09:10:
code:
1
2
3
4
function changeStyle()
{
document.getElementsByClassName('mijnKlasse_01_01').style.backgroundColor = "red";
}

Zoals eerder aangegeven, getElementsByClassName geeft een array van elementen terug. Dus wat je hier probeert gaat al niet.

edit:
Lees op google dat deze functie niet bestaat, maar er zijn wel vele voorbeelden hiervan te vinden.

[ Voor 12% gewijzigd door Verwijderd op 20-11-2007 09:22 ]

dinsdag 20 november 2007 09:20

Acties:

killercow

eth0

Heb je ook ergens de moeite genomen om de functie te defineren?

getElementsByClassName is namenlijk geen standaart functie (iig nog niet), en bestaat dus niet.

Plak de volgende code in je script om de functie toe te voegen:

JavaScript:

function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|\\\\s)" + className + "(\\\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}

geplukt van: http://www.robertnyman.co...e-getelementsbyclassname/

Wat ook meteen het probleem aan geeft, je hele DOM wordt gescanned, en dat is natuurlijk langzaam.

Wat wellicht handiger is, is om de style zelf aan te passen in de stylesheet ipv de elementen waarop de style van toepassing is.

openkat.nl al gezien?

dinsdag 20 november 2007 09:21

Acties:

mux

99% efficient!

Daarbij moet gezegd worden dat alléén getElementById ook daadwerkelijk ecmascript is en de rest alleen in jscript werkt (met een beetje geluk dus in IE, opera en safari maar mozilla kun je vergeten).

dinsdag 20 november 2007 09:24

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

Waar wordt de functie 'getElementByClass' gedefinieerd?

het is namelijk géén standaard DOM methode in huidige browsers (het staat wel op de stapel, maar pas in firefox 3 is die standaard geimplementeerd, niet in de huidige browsers)

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

dinsdag 20 november 2007 09:26

Acties:

wboevink

Wat is er mis met de oplossing van 'Erkens'?
Zou in dit geval toch prima moeten werken, en geen gezeur met classes omzetten naar id's enzo.

function changeStyle(e)
{
e.style.backgroundColor = "red";
}

<div class="mijnKlasse_01_01" onmouseover="changeStyle(this)">Text</div>

dinsdag 20 november 2007 09:29

Acties:

Erkens

Fotograaf

Verwijderd schreef op dinsdag 20 november 2007 @ 09:19:
getElementsByClassName bestaat volgens mij helemaal niet.

Natuurlijk

Soms vergeet je gewoon dat je deze functies standaard altijd gedefinieerd hebt

ssj3gohan schreef op dinsdag 20 november 2007 @ 09:21:
Daarbij moet gezegd worden dat alléén getElementById ook daadwerkelijk ecmascript is en de rest alleen in jscript werkt (met een beetje geluk dus in IE, opera en safari maar mozilla kun je vergeten).

getElementsByTagName werkt gewoon met gecko hoor?

dinsdag 20 november 2007 09:40

Acties:

Arcane Apex

Topicstarter

wboevink schreef op dinsdag 20 november 2007 @ 09:26:
Wat is er mis met de oplossing van 'Erkens'?
Zou in dit geval toch prima moeten werken, en geen gezeur met classes omzetten naar id's enzo.

function changeStyle(e)
{
e.style.backgroundColor = "red";
}

<div class="mijnKlasse_01_01" onmouseover="changeStyle(this)">Text</div>

Deze oplossing werkt inderdaad goed. Bedankt mensen.

dinsdag 20 november 2007 11:05

Acties:

mux

99% efficient!

Erkens schreef op dinsdag 20 november 2007 @ 09:29:
[...]

Natuurlijk
Soms vergeet je gewoon dat je deze functies standaard altijd gedefinieerd hebt

[...]

getElementsByTagName werkt gewoon met gecko hoor?

Dan is dat onlangs als de-facto standaard opgenomen... het staat niet in de spec.

dinsdag 20 november 2007 12:33

Acties:

Erkens

Fotograaf

ssj3gohan schreef op dinsdag 20 november 2007 @ 11:05:
[...]

Dan is dat onlangs als de-facto standaard opgenomen... het staat niet in de spec.

Volgens mij haal je wat dingen door elkaar, ECMAScript heeft enkel bindings met DOM, vandaar dat het ook logisch is dat je functies als getElementById etc niet kan vinden

Zie ook http://www.w3.org/TR/DOM-.../ecma-script-binding.html

dinsdag 20 november 2007 13:32

Acties:

mux

99% efficient!

Bah! je hebt gelijk... Ik moet ook gewoon naar de javascript 1.x spec kijken...

(overigens, zekere getelement(s)byXXXX blijven uitvindingen van IE en zodanig brak met compatability, maar ik ben nu te lui om uit te zoeken welke dat dan zijn, iets met dat de JScript spec niet gelijk loopt met de algemener geaccepteerde javascript spec)

dinsdag 20 november 2007 14:07

Acties:

SchizoDuckie

Kwaak

ssj3gohan schreef op dinsdag 20 november 2007 @ 13:32:
Bah! je hebt gelijk... Ik moet ook gewoon naar de javascript 1.x spec kijken...

(overigens, zekere getelement(s)byXXXX blijven uitvindingen van IE en zodanig brak met compatability, maar ik ben nu te lui om uit te zoeken welke dat dan zijn, iets met dat de JScript spec niet gelijk loopt met de algemener geaccepteerde javascript spec)

www.mootools.net

don't re-invent wheels

kijk dan eens naaar de $$ functie enzo.

Stop uploading passwords to Github!

dinsdag 20 november 2007 14:58

Acties:

Erkens

Fotograaf

SchizoDuckie schreef op dinsdag 20 november 2007 @ 14:07:
don't re-invent wheels
kijk dan eens naaar de $$ functie enzo.

Gelukkig dat de functie "$$" een duidelijkere naamgeving heeft zodat de uiteindelijke code erg overzichtelijk gaat worden

dinsdag 20 november 2007 16:37

Acties:

SchizoDuckie

Kwaak

Erkens schreef op dinsdag 20 november 2007 @ 14:58:
[...]

Gelukkig dat de functie "$$" een duidelijkere naamgeving heeft zodat de uiteindelijke code erg overzichtelijk gaat worden

Duidelijker dan document.getElementsByClassName || document.getElementsBySelecter || documents.getElementsByCSSQuery || welkewashetookalweer

$$ geeft gewoon je een bak met elementen a.d.h.v. een selector, of dat nou css2 of css3 [in mootools 1.2 beta] is

Stop uploading passwords to Github!

dinsdag 20 november 2007 16:47

Acties:

Erkens

Fotograaf

Dus jij vind serieus de naam $$ een handig gekozen naam waaraan je direct kan zien wat het doet

Een functie als getElementsByClassName of getElementsByCSSQuery is iig duidijker in wat het doet, kan ik van $$ niet zeggen. Als ik dat zo zie staan zou ik echt niet weten wat het doet.

Pagina: 1

Reageer