getElementById( ??) mit richtigem Wert füllen

[biinng]

Hallo miteinander, ich bin gerade dabei Tabs(Reiter) zu erstellen. Ich habe die schwierigkeit die Id zu deklarieren.

Ich erhalte die Fehlermeldung:

TypeError: document.getElementById(...) is null
document.getElementById(value).style.display = "block";

smilie_tab'.$i.' = die Anzahl an verschiedener Kategorien. In diesem Fall gib es 4 Kategorien (smilie_tab1, smilie_tab2, smilie_tab3, smilie_tab4). Die Anzahl kann sich ändern je nach dem wie viele Kategorien angelegt wurden. tabs_reiter.jpg



Meine Frage welche möglichkeit habe ich "Value" mit dem richtigen Wert zu füllen?

<a href="#" class="tablinks" onclick="openSmilie_tab(smilie_tab'.$i.')">smilie_tab'.$i.'</a>

function openSmilie_tab(evt, value)

<div class="modal-body">
    <?php if ($catcount == 1) : ?>
        <p><div id="smilie">
            <?php
            $emoticons = KunenaHtmlParser::getEmoticons(0, 1);
            foreach ($emoticons as $emo_code => $emo_url) {
                $data = getimagesize(JPATH_ROOT . '/' . $emo_url);
                $width = $data[0];
                $height = $data[1];
                echo '<img class="smileyimage" src="' . $emo_url . '" border="0" width="' . $width .'" height="' . $height . '"  alt="' . $emo_code . ' " title="' . $emo_code . ' " style="cursor:pointer"/> ';
            }
            ?>
            </div></p>
        <?php else: ?>
            <!-- tabs -->        
                <div id="smilie">
                    <?php
                    $emoticons = KunenaHtmlParser::getEmoticons1(0, 1);
                    echo '<ul class="tab">';
                    for ($i = 1; $i <= $catcount; $i++) {
                        echo '<li>
                              <a href="#" class="tablinks" onclick="openSmilie_tab(smilie_tab'.$i.')">smilie_tab'.$i.'</a>
                              </li>';
                        }
                    echo '</ul>';
                    for ($i = 1; $i <= $catcount; $i++) {
                        echo '<div id="smilie_tab'.$i.'" class="tabcontent">                        
                                Inhalt von Tab '.$i.'
                              </div>';
                        }
                    ?>
                </div>
    <?php endif ?>
                <script>
                function openSmilie_tab(value) {
                    var i, tabcontent, tablinks;
                    tabcontent = document.getElementsByClassName("tabcontent");
                    for (i = 0; i < tabcontent.length; i++) {
                        tabcontent[i].style.display = "none";
                    }
                    tablinks = document.getElementsByClassName("tablinks");
                    for (i = 0; i < tablinks.length; i++) {
                        tablinks[i].className = tablinks[i].className.replace(" active", "");
                    }
                    document.getElementById(value).style.display = "block";
                    evt.currentTarget.className += "active";
                }
                </script>
    </div>

[Dormilich]

Meine Frage welche möglichkeit habe ich "Value" mit dem richtigen Wert zu füllen?

getElementById() erwartet einen String, nicht eine undefinierte Variable.

[biinng]

mein eigentliches Problem habe ich gefunden. Es fehlen die Anführungzeichen in der Klammer.

<a href="#" class="tablinks" onclick="openSmilie_tab("smilie_tab'.$i.'")">smilie_tab'.$i.'</a> 

nun habe ich das Problem da es ja PHP und HTML gemischt ist bekomme ich die Anführungszeichen dort nicht so einfach untergebracht.

das Ergebniss wenn ich nur die Anführungszeichen setze ist:

<a class="tablinks" href="#" smilie_tab1")"="" onclick="openSmilie_tab(">1</a>

[Dormilich]

nun habe ich das Problem da es ja PHP und HTML gemischt ist

deswegen gehoert JS auch nicht ins HTML. Nutze <script> Tags oder JS-Dateien für sowas. Element-bezogene Daten lassen sich bequem in data-Attributen speichern.