getElementsByClassName und set.Attribute

[Matthias Scharwies]

Ich möchte mittels onmouseover bestimmte span-Textelemente markieren.

Hier ist die Datei:
http://www.jsr-hersbruck.de/site/wes/englisch/writing/1_tasks/exam_tasks/example.html

Während die Überschrift verändert wird, funktioniert onmouseover="ColorTA(); nicht.

Das alert(markiert); findet die class="con" nicht.

function ColorTA()  
	{  
		var markiert = document.getElementsByClassName('con');  
		alert(markiert);  
		markiert.setAttribute("style","background:#66FF00;");  
		markiert.setAttribute("class","marked");  
}

Wie kann man alle <span class="con"> aufrufen?

Vielen Dank im Voraus!

Matthias

[Felix Riesterer]

Lieber Matthias Scharwies,

das Wort "class" ist in JavaScript ein reserviertes Wort, daher kann man nicht einfach <ElementOjekt>.class="string" notieren, sondern muss "className" als Eigenschaft verwenden:

<ElementOjekt>.className = "string";

function ColorTA()

{
var markiert = document.getElementsByClassName('con');
alert(markiert);
markiert.setAttribute("style","background:#66FF00;");
markiert.setAttribute("class","marked");
}

  
In Deiner Variablen "markiert" steht - [wenn der Browser die Methode getElementsByClassName unterstützt](http://caniuse.com/#search=getElementsByClassName) - keine Referenz auf ein Elementobjekt, sondern auf eine Liste (sogenannte "live node list") von solchen, die sich wie ein Array ansprechen lässt. Das lässt auch schon der Plural in getElement\_s\_ByClassName vermuten.  
  
Du brauchst also eine Schleife, um über die gefundenen Elemente zu iterieren:  
  
~~~javascript
function ColorTA() {  
    var markiert = document.getElementsByClassName('con');  
    var i;  
  
    for (i = 0; i < markiert.length; i++) {  
        markiert[i].className = "marked";  
        markiert[i].style = "background:#66FF00;";  
    }  
}

Liebe Grüße,

Felix Riesterer.

[Matthias Scharwies]

Vielen Dank für die schnelle Hilfe,

probiere seit 2 Wochen immer wieder herum, jetzt klappt's.

Liebe Grüße Matthias Scharwies

[MudGuard]

Hi,

/#search=getElementsByClassName@title=wenn der Browser die Methode getElementsByClassName unterstützt] - keine Referenz auf ein Elementobjekt, sondern auf eine Liste (sogenannte "live node list") von solchen, die sich wie ein Array ansprechen lässt. Das lässt auch schon der Plural in getElement_s_ByClassName vermuten.

Du brauchst also eine Schleife, um über die gefundenen Elemente zu iterieren:

Wäre es nicht wesentlich sinnvoller, nur in body eine zusätzliche Klasse zu setzen, und die Hintergrundfarbe dann per
body.marked span.con { background:#66FF00; }

(oder auch ohne "body" im Selector)

Das erspart die Schleife, und die Style-Information bleibt da, wo sie hingehört: beim restlichen CSS

cu,
Andreas

[Der Martin]

Hallo,

Während die Überschrift verändert wird, funktioniert onmouseover="ColorTA(); nicht.
Das alert(markiert); findet die class="con" nicht.

das alert() zeigt nur, was du ihm übergibst.

[code lang=javascript]var markiert = document.getElementsByClassName('con');[/con]

Beachte, dass getElementsByClassName() eine Collection (quasi ein Array) aller gefundenen Elemente liefert. Du tust im nachfolgenden Code aber so, als würdest du nur ein einzelnes Elementobjekt bekommen, und willst direkt auf seine Eigenschaften zugreifen.

Wie kann man alle <span class="con"> aufrufen?

Indem man Indem man die Collection (das Array) Eintrag für Eintrag durchgeht und jeden einzeln bedient.

Übrigens: Willst du das wirklich so veröffentlichen? Mit den zahlreichen Fehlern?
Und welche Gemeinsamkeit haben die mit span.con markierten Wörter? Ich erkenne keine.

[Matthias Scharwies]

Übrigens: Willst du das wirklich so veröffentlichen? Mit den zahlreichen Fehlern?
Und welche Gemeinsamkeit haben die mit span.con markierten Wörter? Ich erkenne keine.

Ja, dass soll ein "korrigierter" Aufsatz werden.

Bei onmouseover über die einzelnen Bereich sollen für's
1.  input-Feld die Inhaltspunkte,
bei
2. "Coherence und Cohesion" die Konjunktionen und Verbindungswörter

bei
3. "Grammar" die anspruchsvolleren Konstruktionen, wie der If3-Satz im 1. Absatz markiert werden.

die Fehler will ich alle rot markieren, so dass Schüler ungefähr sehen, was falsch ist und wie man trotz einiger Fehler möglichst viele der (zu erreichenden) Punkte bekommen kann.

Danke!

[Der Martin]

Hallo,

Bei onmouseover über die einzelnen Bereich sollen für's
1.  input-Feld die Inhaltspunkte,
bei
2. "Coherence und Cohesion" die Konjunktionen und Verbindungswörter

bei
3. "Grammar" die anspruchsvolleren Konstruktionen, wie der If3-Satz im 1. Absatz markiert werden.

ah, verstehe.

die Fehler will ich alle rot markieren, so dass Schüler ungefähr sehen, was falsch ist und wie man trotz einiger Fehler möglichst viele der (zu erreichenden) Punkte bekommen kann.

Dann hätte ich hier noch ein paar Fehler, wahlweise zum Korrigieren oder zum Markieren:

falsch:   ... reading competition where I took part in.
richtig:  ... reading competition I took part in.

falsch:   ... if the competition had'nt got ...
richtig:  ... if the competition hadn't had ...
sprachlich schöner: if there hadn't been that many problems with the competition.

Unsauber: Noone of your team ...
Besser:   None of your team members ... / Nobody of your team ...

falsch:   ... look after all thing myself
richtig:  ... look after everything myself

falsch:   competit nors
richtig:  competitors

falsch:   When I had finally read my out of my book, ...
richtig:  ? (Aussage unklar)

Mach das Beste draus,  :-)
 Martin

[Gunnar Bittersmann]

@@Matthias Scharwies:

nuqneH

  markiert.setAttribute("style","background:#66FF00;");  

Wieso setAttribute()? Dafür gibt es das [ref:self812;javascript/objekte/style.htm@title=style]-Objekt. Was man aber NICHT verwenden sollte.

Stattdessen ``.marked { background:#66FF00 }{:.language-css} ins Stylesheet. Gegenwärtig(!) gewünschte Darstellung hat im JavaScript-Code nichts zu suchen.

  markiert.setAttribute("class","marked");  

Wieso setAttribute()? Auf die className-Eigenschaft hat Felix ja schon hingewiesen.

Dass beim Überschreiben der Klasse die ursprüngliche Klasse "con" verlorengeht, ist dir bewusst? Zum gezielten Hinzufügen und Wegnehmen von Klassenzugehörigkeiten gibt es das [link:http://forum.de.selfhtml.org/archiv/2013/7/t214354/#m1466331@title=classList]-Objekt.

Und zur Auszeichnung von Markierungen gibt es das mark-Element. Das wäre hier vozugsweise anstelle von span einzusetzen, möglicherweise dann auch ohne Klasse "con"; Zugriff über getElementsByTagName() oder querySelectorAll().

Qapla'

[Matthias Scharwies]

Vielen Dank für Eure Verbesserungsvorschläge.

http://www.jsr-hersbruck.de/site/wes/englisch/writing/1_tasks/exam_tasks/example.html

Zuallererst:
Keine Sorge - diese Seite ist noch nicht mit dem cms verlinkt und noch lange nicht fertig!

@mudguard
Danke für den Tipp mit dem <mark> Element!
Das Script ändert jetzt die Klassen von x auf x-marked.

@Felix - Danke für den Tipp mit dem array und dem code-snippet mit der Schleife.

Meine Baustellen:
1. Leider scheint die Schleife bei jedem onmouseover nur jedes 2. <mark> zu ändern. Woran könnte das liegen?

2. Ich hatte eigentlich gehofft, dass die Markierungen wieder verschwinden. Soll ich
a. jedes input mit einem onmouseout() versehen.
b. die Markierungen nach ein paar Sekunden verschwinden lassen
oder habt ihr eine ganz andere Idee?

3. die eingekreisten Zahlen der Inhaltsabschnitte habe ich mittels
 class="task" rel="1"
und css:

.task:before {  
	padding:0 0.3em;  
	border:1px solid #666;  
	border-radius:10px;  
    content: attr(rel);  
    position: absolute;  
    left: -20px;  
    top: -15px;  
}

realisiert. findet ihr das ok oder habt ihr eine bessere Idee?

Vielen Dank im Voraus!

Matthias

[Matthias Scharwies]

Ich habe es fast geschafft:
http://www.jsr-hersbruck.de/site/wes/englisch/writing/1_tasks/exam_tasks/example.html

Anstatt alle Text-Stellen einzeln zu ersetzen wird nur die Id des Textes geändert. Alle anderen Prozesse laufen über css.
Ich hätte nicht gedacht, dass das so viel schneller geht als mit getElementsbyClassName. Soll man den eher meiden?

Gibt es anstelle der 2 Eventhandler onmouseover() und onmouseout() noch eine elegantere Lösung?

Vielen Dank für euer feedback

Matthias