Jochen Gebauer: Variable in ElementById() - Klammern

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

  1. 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

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  2. 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
    
    1. 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>

      1. 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

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. 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>

          1. Hi,

            function onItemSelected(currentItemValue) {
               <select size="1" name="item1" onChange="onItemSelected()">

            Fällt Dir was auf?

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.