Variable in ElementById() - Klammern
Jochen Gebauer
- javascript
Hallo,
ich habe diese kleine Funktion hier:
function onTaskStarted() {
for ( i = 0; i < numOfItems; i++ ) {
starttag = "starttag" + i ;
endtag = "endtag" + i ;
document.getElementById(starttag).innerHTML = "<b>" ;
document.getElementById(endtag).innerHTML = "</b>" ;
}
}
Was die Funktion machen soll ist denke ich ziemlich klar. Jedoch muss ich irgendeinen Syntaxfehler drin haben. Ich bekomme folgende Fehlermeldung zurück:
"error: document.getElementById(...) is null or not an object"
Kann mir jemand erklären warum & was ich anders machen muss?
Danke!
Jochen
Hi,
document.getElementById(starttag).innerHTML = "<b>" ;
document.getElementById(endtag).innerHTML = "</b>" ;
Was die Funktion machen soll ist denke ich ziemlich klar.
Nicht wirklich.
Denn durch das Einsetzen eines einzelnen öffnenden tags in ein Element und des zugehörigen schließenden tags in ein anderes Element erzeugst Du Schachtelungsfehler.
cu,
Andreas
Hallo Freunde des gehobenen Forumsgenusses,
function onTaskStarted() {
for ( i = 0; i < numOfItems; i++ ) {
starttag = "starttag" + i ;
endtag = "endtag" + i ;
document.getElementById(starttag).innerHTML = "<b>" ;
document.getElementById(endtag).innerHTML = "</b>" ;
}
}
> Was die Funktion machen soll ist denke ich ziemlich klar. Jedoch muss ich irgendeinen Syntaxfehler drin haben. Ich bekomme folgende Fehlermeldung zurück:
>
> "error: document.getElementById(...) is null or not an object"
Das heißt IIGC, dass es das kein Element mit der ID gibt.
> Kann mir jemand erklären warum & was ich anders machen muss?
Zeig mal den zugehörigen Quelltext und erkläre, warum du das nicht mit CSS machst.
Gruß
Alexander Brock
--
Ceterum censeo Carthaginem esse delendam
Hi Alexander,
Danke, dass Du Dich meinem Problem annimmst!
Hier der komplette Quelltext:
<script type="text/javascript">
var numOfItems = 3 ;
var currentItemValue ;
var starttag ;
var endtag ;
var selectedItemArray = new Array () ;
var numOfSelectionsArray = new Array (numOfItems) ;
function onTaskStarted() {
for ( i = 0; i < numOfItems; i++ ) {
starttag = "starttag" + i ;
endtag = "endtag" + i ;
document.getElementById(starttag).innerHTML = "<b>" ;
document.getElementById(endtag).innerHTML = "</b>" ;
}
}
function onItemSelected(currentItemValue) {
for ( i = 0; i < numOfItems; i++ ) {
if ( currentItemValue == selectedItemArray[i] ) {
numOfSelectionsArray[currentitemValue] = numOfSelectionsArray[currentItemValue] + 1 ;
}
else {
}
if ( numOfSelectionsArray[currentItemValue] == 0 ) {
document.getElementById( "starttag" + i ).innerHTML = "<b>" ;
document.getElementById( "endtag" + i ).innerHTML = "</b>" ;
}
else if ( numOfSelectionsArray[currentItemValue] == 1 ) {
document.getElementById( "starttag" + i ).innerHTML = "<b class=Pt12Bold>" ;
document.getElementById( "endtag" + i ).innerHTML = "</b class=Pt12Bold>" ;
}
else {
document.getElementById( "starttag" + i ).innerHTML = "<b class=Pt12RedBold>" ;
document.getElementById( "endtag" + i ).innerHTML = "</b class=Pt12RedBold>" ;
}
}
selectedItemArray[item1] = currentItemValue ;
}
</script>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>
<body onLoad="onTaskStarted()">
<form>
<select size="1" name="item1" onChange="onItemSelected()">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<select size="1" name="item2" onChange="onItemSelected()">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<select size="1" name="item3" onChange="onItemSelected()">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<div id="starttag"></div>111<div id="endtag"></div>
<div id="starttag2"></div>222<div id="endtag2"></div>
<div id="starttag3"></div>333<div id="endtag3"></div>
</form>
</body>
</html>
Hi,
for ( i = 0; i < numOfItems; i++ ) {
starttag = "starttag" + i ;
endtag = "endtag" + i ;
das erzeugt "starttag0" und "endtag0" im ersten Schleifendurchlauf.
Bei Deinen divs
<div id="starttag"></div>111<div id="endtag"></div>
<div id="starttag2"></div>222<div id="endtag2"></div>
<div id="starttag3"></div>333<div id="endtag3"></div>
gibt es keins mit einer solchen id.
Aber selbst wenn und wenn beide der folgenden Befehle ausgeführt würden,
document.getElementById(starttag).innerHTML = "<b>" ;
document.getElementById(endtag).innerHTML = "</b>" ;
ergäbe das dann
<div id="starttag0"><b></div>111<div id="endtag0"></b></div>
also unsinnig verschachtelte Elemente
cu,
Andreas
Hi Andreas,
danke, das war der Fehler! Jetzt sagt JavaScript allerdings, wenn ich die Werte der Boxen verändere, dass es die Variable, in der die Werte eigentlich drinstehen sollten nicht erkennt.
Wäre toll, wenn Du nochmal drüberschauen könntest...
Danke!
Jochen
<html>
<head>
<script type="text/javascript">
var numOfItems = 3 ;
var currentItemValue ;
var target ;
var notSelectedArray = ["<b>111</b>","<b>222</b>","<b>333</b>"]
var selectedOnceArray = ["<b class=Pt12Bold>111</b class=Pt12Bold>","<b class=Pt12Bold>222</b class=Pt12Bold>","<b class=Pt12Bold>333</b class=Pt12Bold>"]
var selectedMoreThanOnceArray = ["<b class=Pt12RedBold>111</b class=Pt12RedBold>","<b class=Pt12RedBold>222</b class=Pt12RedBold>","<b class=Pt12RedBold>333</b class=Pt12RedBold>"]
var selectedItemArray = new Array (numOfItems) ;
var numOfSelectionsArray = new Array (numOfItems) ;
function onTaskStarted() {
for ( i = 0; i < numOfItems; i++ ) {
target = "target" + i ;
document.getElementById(target).innerHTML = notSelectedArray[i] ;
}
}
function onItemSelected(currentItemValue) {
for ( i = 0; i < numOfItems; i++ ) {
if ( currentItemValue == selectedItemArray[i] ) {
numOfSelectionsArray[currentitemValue] = numOfSelectionsArray[currentItemValue] + 1 ;
}
else {
}
if ( numOfSelectionsArray[currentItemValue] == 0 ) {
target = "target" + i ;
document.getElementById(target).innerHTML = notSelectedArray[i] ;
}
else if ( numOfSelectionsArray[currentItemValue] == 1 ) {
target = "target" + i ;
document.getElementById(target).innerHTML = SelectedOnceArray[i] ;
}
else {
target = "target" + i ;
document.getElementById(target).innerHTML = SelectedMoreThanOnceArray[i] ;
}
}
selectedItemArray[item1] = currentItemValue ;
}
</script>
<link rel=stylesheet type="text/css" href="stylesheet.css">
</head>
<body onLoad="onTaskStarted()">
<form>
<select size="1" name="item1" onChange="onItemSelected()">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<select size="1" name="item2" onChange="onItemSelected()">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<select size="1" name="item3" onChange="onItemSelected()">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<div id="target0"></div>
<div id="target1"></div>
<div id="target2"></div>
</form>
</body>
</html>
Hi,
function onItemSelected(currentItemValue) {
<select size="1" name="item1" onChange="onItemSelected()">
Fällt Dir was auf?
cu,
Andreas