getElementById funktioniert nicht so richtig?

#0 :: 27.06.2011 - 20:40
  • GameOver
  • User

Hey,

hab ein Problem mit einer JS-Funktion.

<a id="c1" href="javascript:changeConfigContent('configWebsite', this.id)" title="Konfiguration - Website">Website</a>

Von diesen anchors habe ich noch 3 weitere, alle haben eine id namens c plus eine Zahl von 1 bis 4. Als hyper reference rufe ich immer die Funktion changeConfigContent auf, der erste Parameter ist eine id eines Containers (div-Element). Von diesen Containern gibt es 4 Stück, wie die id`s dieser Containers lauten, sieht man im Array in der JS-Funktion:
allConfigContentIds = new Array('configWebsite', 'configAcpAllgemein', 'configStatistics', 'configOwnComponents');

Die komplette JS-Funktion:

function changeConfigContent(configContentId, configLinkId) 
{
allConfigContentIds = new Array('configWebsite', 'configAcpAllgemein', 'configStatistics', 'configOwnComponents');
allConfigLinksIds = new Array('c1', 'c2', 'c3', 'c4');

if (configContentId != '' && configLinkId != '') {
// show choosen config container
document.getElementById(configContentId).style.display = 'block';
// display none for all other containers
for (i = 0; i < 5; i++) {
if (configContentId != allConfigContentIds[i]) {
document.getElementById(allConfigContentIds[i]).style.display = 'none';
}
}
// actual link
document.getElementById(configLinkId).style.color = '#ffffff';
document.getElementById(configLinkId).style.backgroundColor = '#aaaaaa';

// other links
for (i = 0; i < 5; i++) {
if (configLinkId != allConfigLinksIds[i]) {
document.getElementById(allConfigLinksIds[i]).style.color = '#000000';
document.getElementById(allConfigLinksIds[i]).style.backgroundColor = '#dddddd';
}
}
}
}

Ab dem Kommentar "// actual link" sollte die Farbe für den aktuellen Link neu bestimmt werden, was aber leider nicht klappt. Eine Idee, woran das liegen könnte?

Fehlerkonsole: [23:02:46.390] document.getElementById(allConfigContentIds[i]) is null @ http://nicolas-pecher.com/admincp/templates/javascript/js_functions.js:26

Grüße Nico

MC-Web

#1 :: 28.06.2011 - 06:50

Hi Nico,

vermutlich liegt es an dem var das vor dem Arrays fehlt. Vielleicht noch ein kleiner Tipp, document.getElementById ist recht langsam, wenn du eine Referenz erst mal hast, speichere sie in einer Variablen. Das geht bei häufigen zugriff schneller und du musst nicht so viel schreiben.

Hier mal ein Beispiel:

function changeConfigContent(configContentId, configLinkId) {
var allConfigContentIds = new Array(
document.getElementById('configWebsite'),
document.getElementById('configAcpAllgemein'),
document.getElementById('configStatistics'),
document.getElementById('configOwnComponents'));
var allConfigLinksIds = new Array(
document.getElementById('c1'),
document.getElementById('c2'),
document.getElementById('c3'),
document.getElementById('c4'));
if (configContentId != '' && configLinkId != '') {
for (i = 0; i < 5; i++)
allConfigContentIds[i].style.display = (configContentId != allConfigContentIds[i].id)? 'none':'block';
}
for (i = 0; i < 5; i++) {
if (configLinkId != allConfigLinksIds[i].id) {
// other links
allConfigLinksIds[i].style.color = '#000000';
allConfigLinksIds[i].style.backgroundColor = '#dddddd';
} else {
// actual link
allConfigLinksIds[i].style.color = '#ffffff';
allConfigLinksIds[i].style.backgroundColor = '#aaaaaa';
}
}
}

Schöne Grüße
Thomas

Admin of Ultima-Project.net

#2 :: 28.06.2011 - 09:35
  • GameOver
  • User

Ok funktioniert nun - habe einfach aus den zwei for-schleifen eine gemacht:

function changeConfigContent(configContentId, configLinkId) 
{
var allConfigContentIds = new Array(
document.getElementById('configWebsite'),
document.getElementById('configAcpAllgemein'),
document.getElementById('configStatistics'),
document.getElementById('configOwnComponents'));
var allConfigLinksIds = new Array(
document.getElementById('c1'),
document.getElementById('c2'),
document.getElementById('c3'),
document.getElementById('c4'));
if (configContentId != '' && configLinkId != '') {
for (var i = 0; i < 5; i++) {
if (configLinkId != allConfigLinksIds[i].id) {
// other links
allConfigLinksIds[i].style.color = '#000';
allConfigLinksIds[i].style.backgroundColor = '#ddd';
} else {
// actual link
allConfigLinksIds[i].style.color = '#fff';
allConfigLinksIds[i].style.backgroundColor = '#aaa';
}
allConfigContentIds[i].style.display = (configContentId != allConfigContentIds[i].id) ? 'none' : 'block';
}
}
}

Nur erklären kann ich mir jetzt nicht wirklich, was an der alten Lösung falsch war!?

MC-Web