Border setzen erzeugt Error im IE: Is null or not an object

R

redX

Erfahrenes Mitglied
Eigentlich möchte ich etwas ganz simples machen. Einfach einen Border setzen.

Javascript: 
//Gaaaaanz weit oben:
var borderStyleActive = '1px solid #000000';

//Dann weiter unten:
	if (actualColor == '') {
		alert('set');
		actualColor = document.getElementsByName('color_list_element')[0];
	}
	alert(actualColor);
	actualColor.style.border = borderStyleActive;

Also wen actualColor leer ist dann nim das erste color_list_element und setz auf das den Border.
Der alert('set'); wird ausgegeben, und der alert(actualColor); gibt undefined aus.

Hier HTML Code mit dem color_list_element:

HTML: 
		<div name="color_list_element" onclick="setColor('Staubgrau', this)">
			<img src="uploads/tx_commerce/staubgrau.gif" alt="Staubgrau" />
		</div>
		
		<div name="color_list_element" onclick="setColor('Kristallweiss', this)">
			<img src="uploads/tx_commerce/kristallweiss.gif" alt="Kristallweiss" />
		</div>
		
		<div name="color_list_element" onclick="setColor('Eichenbraun', this)">
			<img src="uploads/tx_commerce/eichenatur.gif" alt="Eichenbraun" />
		</div>

Das komische ist, das es mit dem FF und dem Opera funktioniert, aber mit dem IE6 & 7 nicht..

Braucht ihr noch Infos?

Danke schonmal fürs durchlesen!

MFG
X
 
Das div-Element besitzt kein name-Attribut. Du musst also entweder mit IDs oder einer gemeinsamen Klasse arbeiten, um die div-Elemente eindeutig zu identifizieren.
 
Wau! Danke dir. Das war es. Habe mal einfach das Attribute Name umbennant in ID. Ist natürlich keine so schöne Lösung da IDs ja unique sein sollen. Ich könnte also mit class arbeiten, aber wie kann ich dann mit JS darauf zugreifen?

MFG
X
 
Hi,

Du kannst über die Eigenschaft className auf den Klassenname eines Elements zugreifen.

Du könntest zum Beispiel im onload-Event der Seite ein Array erstellen, der alle Elemente enthält, die
mit der gewünschten Klasse ausgezeichnet sind.

Beispiel:
Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
  <!--
var arrClass = new Array();

function getElementsByClassName(strClassName){
  var arrHelp = new Array();

  // Suchpattern
  var strPattern = eval("/"+strClassName+"/");

  // Alle Elemente über Wildcard ermitteln
  var arrTags = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) ? document.all : document.getElementsByTagName('*');

  // Alle Elemente durchlaufen
  for(varEntry in arrTags){
    // Fall eine Klasse existiert UND dem Suchkriterium entspricht
    if((arrTags[varEntry].className) && (arrTags[varEntry].className.match(strPattern))){
      // In Klassenarray schreiben
      arrHelp[arrHelp.length] = arrTags[varEntry];
    }
  }

  return arrHelp;
}

window.onload = function(){
  arrClass = getElementsByClassName("colorEl");
}
 //-->
</script>

</head>
<body>
<div class="klasse1 colorEl klasse2" id="id_0" name="color_list_element" onclick="setColor('Staubgrau', this)">
  <img src="uploads/tx_commerce/staubgrau.gif" alt="Staubgrau" />
</div>

<div class="colorEl" id="id_1" name="color_list_element" onclick="setColor('Kristallweiss', this)">
  <img src="uploads/tx_commerce/kristallweiss.gif" alt="Kristallweiss" />
</div>

<div class="colorEl" id="id_2" name="color_list_element" onclick="setColor('Eichenbraun', this)">
  <img src="uploads/tx_commerce/eichenatur.gif" alt="Eichenbraun" />
</div>

<button onclick="alert(arrClass[1].id);">ID des zweiten Elements</button>
</body>
</html>
Im Beispiel wird der Funktion getElementsByClassName der Name der gewünschten Klasse übergeben.
Zurückgeliefert wird ein Array mit allen Elementen, die mit der Klasse ausgezeichnet sind. Anschliessend
können die Elemente über das Array arrClass angesprochen werden.

Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück