Funktion funktioniert im Kontext nicht


Kalito

Erfahrenes Mitglied
Hallo, ich baue gerade einen Konfigurtator und bin an der Fehlerbehandlung dran. Wenn ich die Funktion losgelöst probiere, klappt alles wunderbar, aber soald ich sie in meine bestehende Seite einbinde, klappt die Funktion nicht :(

so ****t es: (am besten den Code in den Editor kopieren JS-Funktion in Z 166 uind html in Z 302 )
HTML:
<html>
<head>
    <script language="javascript" type="text/javascript">
        function checkBreite(){
            var breite = parseInt(document.getElementById("breite").value);
            if(breite <= 899 || breite >=1201) document.getElementById("FehlerBreite").style.display='block';
            else document.getElementById("FehlerBreite").style.display='none';
        }
    </script>
</head>

<body>
    <div>Breite: <input type="text" name="breite" id="breite" maxlength="4" onblur="checkBreite()"/>mm (900mm - 1200mm)<span id="FehlerBreite" style="display: none;">Die angegebene Breite wird nicht gef&uuml;hr</span></div>
</body>
</html>


Aber hier nicht:
HTML:
<?php
    include("../include/sql.php");
    connection();
 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="description" content="Onlinshop für Fenster, Türen, Tore. Ein Fantastisches Gefühl">
    <meta name="keywords" content="Fenster, Türen, Tore, Holz.Aluminium">
    <meta name="language" content="de">
    <meta name="robots" content="index,follow">
    <meta name="author" content="Patrick Kahle">
    <meta name="abstract" content="Onlineshop für Fenster, Türen, Tore">
    <meta name="copyright" content="? Bauelemente Kittler">
    <meta name="designer" content="Patrick Kahle">
    <meta name="publisher" content="Bauelemente Kittler">
    <meta name="revisit-After" content="10 days">
    <meta name="distribution" content="global">
    -->
    <script language="JavaScript" type="text/javascript">

function CheckRadio(id) {
    if (id == "modell_primus") {
        document.getElementById('modell_primus').style.display = 'block';
        document.getElementById('modell_vario').style.display = 'none';
        document.getElementById('modell_select').style.display = 'none';
        document.getElementById('modell_express').style.display = 'none';
    }

    if (id == "modell_vario") {
        document.getElementById('modell_primus').style.display = 'none';
        document.getElementById('modell_vario').style.display = 'block';
        document.getElementById('modell_select').style.display = 'none';
        document.getElementById('modell_express').style.display = 'none';
    }

    if (id == "modell_select") {
        document.getElementById('modell_primus').style.display = 'none';
        document.getElementById('modell_vario').style.display = 'none';
        document.getElementById('modell_select').style.display = 'block';
        document.getElementById('modell_express').style.display = 'none';
    }
    if (id == "modell_express") {
        document.getElementById('modell_primus').style.display = 'none';
        document.getElementById('modell_vario').style.display = 'none';
        document.getElementById('modell_select').style.display = 'none';
        document.getElementById('modell_express').style.display = 'block';
    }
    if(id == "T"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "TSL"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "TSR"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "T2S"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "TO"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "TSOL"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "TSOR"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "T2SO"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2T"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2TSL"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2TSR"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2T2S"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2TO"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2TSOL"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2TSOR"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2T2SO"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    //Check der richtigen Eingabe der Maße beim verlassen des Feldes

}
   //-->
    </script>
    <title>index</title>
    <link href="../include/style.css" type="text/css" rel="stylesheet" />
    <link href="../include/konfigurator.css" type="text/css" rel="stylesheet" />
</head>
    <body>
    <form method="post">
    <div class="main">
        <div class="header">
            <div class="logo"></div>
            <div class="warenkorb">
                <div class="warenkorb_innen">
                        <?php  if(isset($_POST['submit'])){
                            echo $_POST['bauform'];

                        } ?>
                </div> <!-- Ende Warenkorb_innen -->
            </div> <!-- Ende Warenkorb -->
            <div class="clear"></div>
        </div> <!-- header -->
        <div class="toolbar">
            <ul>
                <li><a href="index.html">Startseite<!--[if gte IE 7]><!--></a><!--<![endif]--></li>
        		<li><a href="konfigurator/">Konfigurator<!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
        	        <ul>
                        <li><a href="konfigurator/fenster.html">Fenster</a></li>
        	            <li><a href="konfigurator/tueren.html">T&uuml;ren</a></li>
        	            <li><a href="konfigurator/tore.html">Tore</a></li>
        	        </ul>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
                </li>
                <li><a href="index.php?site=14">Kontakt<!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li><a href="index.php?site=14">Hilfe &amp; Support<!--[if gte IE 7]><!--></a><!--<![endif]--></li>
                <li><a href="index.php?site=14">News &amp; Aktuelles<!--[if gte IE 7]><!--></a><!--<![endif]--></li>
            </ul>
        </div> <!-- Ende Toolbar -->
        <div class="body">
            <!-- fertiges Produkt -->
            <div class="produkt">test</div>
            <!-- Produktkonfigurator -->
            <div class="konfigurator">
                <div class="menu">
                    <ul>
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'block';document.getElementById('tab_2').style.display = 'none';document.getElementById('tab_3').style.display = 'none';document.getElementById('tab_4').style.display = 'none';document.getElementById('tab_5').style.display = 'none';">Modell</a></li>
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'none';document.getElementById('tab_2').style.display = 'block';document.getElementById('tab_3').style.display = 'none';document.getElementById('tab_4').style.display = 'none';document.getElementById('tab_5').style.display = 'none';">Bauform</a></li>
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'none';document.getElementById('tab_2').style.display = 'none';document.getElementById('tab_3').style.display = 'block';document.getElementById('tab_4').style.display = 'none';document.getElementById('tab_5').style.display = 'none';">Details</a></li>
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'none';document.getElementById('tab_2').style.display = 'none';document.getElementById('tab_3').style.display = 'none';document.getElementById('tab_4').style.display = 'block';document.getElementById('tab_5').style.display = 'none';">Zubeh&ouml;r</a></li>
                    </ul>
                </div> <!-- Ende Menü -->

                <div id="tab_1" style="display: block;">
                    <div>
                        <h1>Produktreihe</h1>
                        <label for="primus"><img src="../image/produktbilder/tueren/produktreihe/Primus.jpg" /></label>
                            <input type="radio" id="primus" style="display: none;" onclick="javascript:CheckRadio('modell_primus');"/>
                        <label for="vario"><img src="../image/produktbilder/tueren/produktreihe/Vario.jpg" /></label>
                            <input type="radio" id="vario" style="display: none;" onclick="javascript:CheckRadio('modell_vario');"/>
                        <label for="select"><img src="../image/produktbilder/tueren/produktreihe/Select.jpg" /></label>
                            <input type="radio" id="select" style="display: none;" onclick="javascript:CheckRadio('modell_select');"/>
                        <label for="express"><img src="../image/produktbilder/tueren/produktreihe/Express.jpg" /></label>
                            <input type="radio" id="express" style="display: none;" onclick="javascript:CheckRadio('modell_express');"/>
                    </div> <!-- Ende Produktreihe -->
                    <h3>Modell</h3>
                    <div id="modell_primus" style="display:block;">
                		Primus
                	</div>
                	<div id="modell_vario" style="display:none;">
                		Vario
                	</div>
                	<div id="modell_select" style="display:none;">
                		Select
                	</div>
                	<div id="modell_express" style="display:none;">
                		Express
                	</div>
                    <div>
                        <h1>Profil</h1>
                        <label for="symphonie"><img src="../image/produktbilder/tueren/profile/symphonie.gif" alt="Profil Symphonie" /></label>
                    	<input type="radio" id="symphonie" name="profil" value="Symphonie" style="display: none;"/>

                    	<label for="arcade"><img src="../image/produktbilder/tueren/profile/arcade.gif" alt="Arcade" /></label>
                    	<input type="radio" id="arcade" name="profil" value="Arcade" style="display: none;"/>
                    </div><!-- Ennde profil -->
                </div><!-- Ende Tab-1 -->

                <div id="tab_2" style="display: none;">
                    <h1>Bauform</h1>
                    <div>
                        <label for="T"><img src="../image/produktbilder/tueren/bauform/T.gif" alt="Einpfl&uuml;gig" /></label>
                    	<input type="radio" id="T" name="bauform" value="Einfl&uuml;gig" style="display: none;" onclick="javascript:CheckRadio('T');"/>
                    	<label for="TSL"><img src="../image/produktbilder/tueren/bauform/TSL.gif" alt="Einpfl&uuml;gig-Seitenteil links" /></label>
                    	<input type="radio" id="TSL" name="bauform" value="Einfl&uuml;gig Seitenteil links" style="display: none;" onclick="javascript:CheckRadio('TSL');"/>
                    	<label for="TSR"><img src="../image/produktbilder/tueren/bauform/TSR.gif" alt="Einpfl&uuml;gig Seitenteil rechts" /></label>
                    	<input type="radio" id="TSR" name="bauform" value="Einfl&uuml;gig Seitenteil rechts" style="display: none;" onclick="javascript:CheckRadio('TSR');"/>
                    	<label for="T2S"><img src="../image/produktbilder/tueren/bauform/T2S.gif" alt="Einpfl&uuml;gig mit 2 Seitenteile" /></label>
                    	<input type="radio" id="T2S" name="bauform" value="Einfl&uuml;gig mit 2 Seitenteile" style="display: none;" onclick="javascript:CheckRadio('T2S');"/>

                        <label for="TO"><img src="../image/produktbilder/tueren/bauform/TO.gif" alt="Einpfl&uuml;gig mit Oberlicht" /></label>
                    	<input type="radio" id="TO" name="bauform" value="Einfl&uuml;gig mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('TO');"/>
                    	<label for="TSOL"><img src="../image/produktbilder/tueren/bauform/TSOL.gif" alt="Einpfl&uuml;gig-Seitenteil links und Oberlicht" /></label>
                    	<input type="radio" id="TSOL" name="bauform" value="Einfl&uuml;gig Seitenteil links und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('TSOL');"/>
                    	<label for="TSOR"><img src="../image/produktbilder/tueren/bauform/TSOR.gif" alt="Einpfl&uuml;gig Seitenteil rechts mit Oberlicht" /></label>
                    	<input type="radio" id="TSOR" name="bauform" value="Einfl&uuml;gig Seitenteil rechts mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('TSOR');"/>
                    	<label for="T2SO"><img src="../image/produktbilder/tueren/bauform/T2SO.gif" alt="Einpfl&uuml;gig mit 2 Seitenteile und Oberlicht" /></label>
                    	<input type="radio" id="T2SO" name="bauform" value="Einfl&uuml;gig mit 2 Seitenteile und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('T2SO');"/>
                    </div>
                    <div>
                        <label for="2T"><img src="../image/produktbilder/tueren/bauform/2T.gif" alt="Zweifl&uuml;gig" /></label>
                    	<input type="radio" id="2T" name="bauform" value="Zweifl&uuml;gig" style="display: none;" onclick="javascript:CheckRadio('2T');"/>
                    	<label for="2TSL"><img src="../image/produktbilder/tueren/bauform/2TSL.gif" alt="Zweifl&uuml;gig-Seitenteil links" /></label>
                    	<input type="radio" id="2TSL" name="bauform" value="Zweifl&uuml;gig Seitenteil links" style="display: none;" onclick="javascript:CheckRadio('2TSL');"/>
                    	<label for="2TSR"><img src="../image/produktbilder/tueren/bauform/2TSR.gif" alt="Zweipfl&uuml;gig Seitenteil rechts" /></label>
                    	<input type="radio" id="2TSR" name="bauform" value="Zweifl&uuml;gig Seitenteil rechts" style="display: none;" onclick="javascript:CheckRadio('2TSR');"/>
                    	<label for="2T2S"><img src="../image/produktbilder/tueren/bauform/2T2S.gif" alt="Zweipfl&uuml;gig mit 2 Seitenteile" /></label>
                    	<input type="radio" id="2T2S" name="bauform" value="Zweifl&uuml;gig mit 2 Seitenteile" style="display: none;" onclick="javascript:CheckRadio('2T2S');"/>

                        <label for="2TO"><img src="../image/produktbilder/tueren/bauform/2TO.gif" alt="Einpfl&uuml;gig mit Oberlicht" /></label>
                    	<input type="radio" id="2TO" name="bauform" value="Einfl&uuml;gig mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2TO');"/>
                    	<label for="2TSOL"><img src="../image/produktbilder/tueren/bauform/2TSOL.gif" alt="Zweipfl&uuml;gig-Seitenteil links und Oberlicht" /></label>
                    	<input type="radio" id="2TSOL" name="bauform" value="Zweifl&uuml;gig Seitenteil links und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2TSOL');"/>
                    	<label for="2TSOR"><img src="../image/produktbilder/tueren/bauform/2TSOR.gif" alt="Zweipfl&uuml;gig Seitenteil rechts mit Oberlicht" /></label>
                    	<input type="radio" id="2TSOR" name="bauform" value="Zweifl&uuml;gig Seitenteil rechts mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2TSOR');"/>
                    	<label for="2T2SO"><img src="../image/produktbilder/tueren/bauform/2T2SO.gif" alt="Zweipfl&uuml;gig mit 2 Seitenteile und Oberlicht" /></label>
                    	<input type="radio" id="2T2SO" name="bauform" value="Zweifl&uuml;gig mit 2 Seitenteile und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2T2SO');"/>
                    </div> <!-- Ende Bauformen -->
                    <div>
                        <h1>Ma&szlig;e</h1>
                         <div id="hbe" style="display: block;">
                            <div>Breite: <input type="text" name="breite" id="breite" maxlength="4" onblur="checkBreite()"/>mm (900mm - 1200mm)</div><span id="FehlerBreite" style="display: none;">Die angegebene Breite wird nicht gef&uuml;hr</span>
                            <div><label id="hoehe">H&ouml;he: </label><input type="text" name="hoehe" id="hoehe" maxlength="4" />mm (1950mm - 2240mm)</div>
                         </div><!-- Ende Höhe/Breite  einflügig -->
                         <div id="hbz" style="display: none;">
                            <div><label id="breiteFLl">Breite linker Fl&uuml;gel </label><input type="text" name="breiteFLl" id="breite" maxlength="4" />mm (900mm - 1200mm)</div>
                            <div><label id="breiteFLr">Breite rechter Fl&uuml;gel </label><input type="text" name="breiteFLr" id="breite" maxlength="4" />mm (900mm - 1200mm)</div>
                            <div><label id="hoehez">H&ouml;he: </label><input type="text" name="hoehez" id="hoehe" maxlength="4" />mm (1950mm - 2240mm)</div>
                         </div><!-- Ende Höhe/Breite zweiflügig -->
                         <div id="sl" style="display: none;">
                            <div>
                                <select name="variationL">
                                    <option>verglast - beweglich</option>
                                    <option>verglast - fest</option>
                                    <option>geschlossen - beweglich</option>
                                    <option>geschlossen - fest</option>
                                </select>
                                <select name="fuellungL">
                                    <option>Einsatzf&uuml;llung</option>
                                    <option>einseitige Aufsatzf&uuml;llung</option>
                                    <option>zweiseitige Aufsatzf&uuml;llung</option>
                                </select>
                            </div>
                            <div><label id="breiteSl">Breite linker Seitenteil </label><input type="text" name="breiteSl" id="breiteSl" maxlength="4" onblur="checkSL()"/>mm (400mm - 1500mm)</div>
                         </div><!-- Ende Seitenteil links -->
                         <div id="sr" style="display: none;">
                            <div>
                                <select name="variationR">
                                    <option>verglast - beweglich</option>
                                    <option>verglast - fest</option>
                                    <option>geschlossen - beweglich</option>
                                    <option>geschlossen - fest</option>
                                </select>
                                <select name="fuellungR">
                                    <option>Einsatzf&uuml;llung</option>
                                    <option>einseitige Aufsatzf&uuml;llung</option>
                                    <option>zweiseitige Aufsatzf&uuml;llung</option>
                                </select>
                            </div>
                            <div><label id="breiteSr">Breite linker Seitenteil </label><input type="text" name="breiteSr" id="breiteSr" maxlength="4" onblur="checkSR()"/>mm (400mm - 1500mm)</div>

                         </div><!-- Ende Seitenteil rechts -->
                         <div id="o" style="display: none;">
                            <div><label id="oberlicht">H&ouml;he Oberlicht</label><input type="text" name="oberlicht" id="oberlicht" maxlength="4" onblur="checkO()"/>mm (250mm - 1200mm)</div>
                         </div><!-- Ende Oberlicht -->
                    </div><!-- Ende Maße -->
                </div><!-- Ende Tab-2-->
                <div id="tab_3" style="display: none;">
                    <h1>Farbe</h1>
                    <div>
                        <h3>Dekorfarben</h3>
                    </div><!-- Ende Dekorrfarben -->
                    <div>
                        <h3>Ralfarben</h3>
                    </div><!-- Ende Ral -->
                    <h1>Glas</h1>
                    <div>
                        glas
                    </div><!-- Ende Glas -->

                </div><!-- Ende Tab-3 -->
                <div id="tab_4" style="display: none;">
                   <h1>Griffe</h1>
                   <div>
                      <h3>Griff</h3>
                   </div><!-- Ende Griff -->
                   <div>
                    <h3>Innendr&uuml;cker</h3>
                   </div><!-- Ende Innendrücker -->
                   <div>
                    <h3>Extras</h3>
                   </div><!-- Ende Extras -->
                </div><!-- Ende Tab-4 -->

            <input type="submit" name="submit"/>
            </div><!-- Ende Konfigurator -->


            <div class="clear"></div>
        </div><!-- Ende Body -->
    </div><!-- Ende Main -->
    </form>
    </body>
</html>

Wenn ich es über meinen Editor (Webcon Scriptly) mit dem IE jage, kommt die Fehlermeldung, das checkBreite nicht definiert oder Null ergibt aus. Aber es kommt auch eine Fehlermeldung wegen den style :|

Es funktioniert aber auch keine alert-Box :(

Gruß, Kalito
 

Kalito

Erfahrenes Mitglied
hab die zwei anderen Id="breite" abgeändert. Aber trotzdem funktioniert es nicht :(

Der genaue Fehlercode heißt: Der Wert der Eigenschaft "checkBreite" ist Null oder undefiniert, kein Function-Objekt
 
Zuletzt bearbeitet:

Kalito

Erfahrenes Mitglied
Hab gerade gesehen, das die im Quellcode nicht war. Aber selbst, wenn die Funktion definiert ist, funktioniert es nicht

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script language="JavaScript" type="text/javascript"> 
 
function CheckRadio(id) {
    if (id == "modell_primus") {
        document.getElementById('modell_primus').style.display = 'block';
        document.getElementById('modell_vario').style.display = 'none';
        document.getElementById('modell_select').style.display = 'none';
        document.getElementById('modell_express').style.display = 'none';
    }
 
    if (id == "modell_vario") {
        document.getElementById('modell_primus').style.display = 'none';
        document.getElementById('modell_vario').style.display = 'block';
        document.getElementById('modell_select').style.display = 'none';
        document.getElementById('modell_express').style.display = 'none';
    }
 
    if (id == "modell_select") {
        document.getElementById('modell_primus').style.display = 'none';
        document.getElementById('modell_vario').style.display = 'none';
        document.getElementById('modell_select').style.display = 'block';
        document.getElementById('modell_express').style.display = 'none';
    }
    if (id == "modell_express") {
        document.getElementById('modell_primus').style.display = 'none';
        document.getElementById('modell_vario').style.display = 'none';
        document.getElementById('modell_select').style.display = 'none';
        document.getElementById('modell_express').style.display = 'block';
    }
    if(id == "T"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "TSL"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "TSR"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "T2S"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "TO"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "TSOL"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "TSOR"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "T2SO"){
        document.getElementById('hbe').style.display = 'block';
        document.getElementById('hbz').style.display = 'none';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2T"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2TSL"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2TSR"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2T2S"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'none';
    }
    if(id == "2TO"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2TSOL"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'none';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2TSOR"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'none';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    if(id == "2T2SO"){
        document.getElementById('hbe').style.display = 'none';
        document.getElementById('hbz').style.display = 'block';
        document.getElementById('sl').style.display = 'block';
        document.getElementById('sr').style.display = 'block';
        document.getElementById('o').style.display = 'block';
    }
    //Check der richtigen Eingabe der Maße beim verlassen des Feldes
        function checkBreite(){
            var breite = parseInt(document.getElementById("breite").value);
            if(breite <= 899 || breite >=1201) document.getElementById("FehlerBreite").style.display='block';
            else document.getElementById("FehlerBreite").style.display='none';
        }
}
   //-->
    </script> 
    <title>index</title> 
    <link href="../include/style.css" type="text/css" rel="stylesheet" /> 
    <link href="../include/konfigurator.css" type="text/css" rel="stylesheet" /> 
</head> 
    <body> 
    <form method="post"> 
    <div class="main"> 
        <div class="header"> 
            <div class="logo"></div> 
            <div class="warenkorb"> 
                <div class="warenkorb_innen"> 
                                        </div> <!-- Ende Warenkorb_innen --> 
            </div> <!-- Ende Warenkorb --> 
            <div class="clear"></div> 
        </div> <!-- header --> 
        <div class="toolbar"> 
            <ul> 
                <li><a href="index.html">Startseite<!--[if gte IE 7]><!--></a><!--<![endif]--></li> 
        		<li><a href="konfigurator/">Konfigurator<!--[if gte IE 7]><!--></a><!--<![endif]--> 
                <!--[if lte IE 6]><table><tr><td><![endif]--> 
        	        <ul> 
                        <li><a href="konfigurator/fenster.html">Fenster</a></li> 
        	            <li><a href="konfigurator/tueren.html">T&uuml;ren</a></li> 
        	            <li><a href="konfigurator/tore.html">Tore</a></li> 
        	        </ul> 
                <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
                </li> 
                <li><a href="index.php?site=14">Kontakt<!--[if gte IE 7]><!--></a><!--<![endif]--></li> 
                <li><a href="index.php?site=14">Hilfe &amp; Support<!--[if gte IE 7]><!--></a><!--<![endif]--></li> 
                <li><a href="index.php?site=14">News &amp; Aktuelles<!--[if gte IE 7]><!--></a><!--<![endif]--></li> 
            </ul> 
        </div> <!-- Ende Toolbar --> 
        <div class="body"> 
            <!-- fertiges Produkt --> 
            <div class="produkt">test</div> 
            <!-- Produktkonfigurator --> 
            <div class="konfigurator"> 
                <div class="menu"> 
                    <ul> 
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'block';document.getElementById('tab_2').style.display = 'none';document.getElementById('tab_3').style.display = 'none';document.getElementById('tab_4').style.display = 'none';document.getElementById('tab_5').style.display = 'none';">Modell</a></li> 
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'none';document.getElementById('tab_2').style.display = 'block';document.getElementById('tab_3').style.display = 'none';document.getElementById('tab_4').style.display = 'none';document.getElementById('tab_5').style.display = 'none';">Bauform</a></li> 
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'none';document.getElementById('tab_2').style.display = 'none';document.getElementById('tab_3').style.display = 'block';document.getElementById('tab_4').style.display = 'none';document.getElementById('tab_5').style.display = 'none';">Details</a></li> 
                        <li><a href="#" onclick="document.getElementById('tab_1').style.display = 'none';document.getElementById('tab_2').style.display = 'none';document.getElementById('tab_3').style.display = 'none';document.getElementById('tab_4').style.display = 'block';document.getElementById('tab_5').style.display = 'none';">Zubeh&ouml;r</a></li> 
                    </ul> 
                </div> <!-- Ende Menü --> 
 
                <div id="tab_1" style="display: block;"> 
                    <div> 
                        <h1>Produktreihe</h1> 
                        <label for="primus"><img src="../image/produktbilder/tueren/produktreihe/Primus.jpg" /></label> 
                            <input type="radio" id="primus" style="display: none;" onclick="javascript:CheckRadio('modell_primus');"/> 
                        <label for="vario"><img src="../image/produktbilder/tueren/produktreihe/Vario.jpg" /></label> 
                            <input type="radio" id="vario" style="display: none;" onclick="javascript:CheckRadio('modell_vario');"/> 
                        <label for="select"><img src="../image/produktbilder/tueren/produktreihe/Select.jpg" /></label> 
                            <input type="radio" id="select" style="display: none;" onclick="javascript:CheckRadio('modell_select');"/> 
                        <label for="express"><img src="../image/produktbilder/tueren/produktreihe/Express.jpg" /></label> 
                            <input type="radio" id="express" style="display: none;" onclick="javascript:CheckRadio('modell_express');"/> 
                    </div> <!-- Ende Produktreihe --> 
                    <h3>Modell</h3> 
                    <div id="modell_primus" style="display:block;"> 
                		Primus
                	</div> 
                	<div id="modell_vario" style="display:none;"> 
                		Vario
                	</div> 
                	<div id="modell_select" style="display:none;"> 
                		Select
                	</div> 
                	<div id="modell_express" style="display:none;"> 
                		Express
                	</div> 
                    <div> 
                        <h1>Profil</h1> 
                        <label for="symphonie"><img src="../image/produktbilder/tueren/profile/symphonie.gif" alt="Profil Symphonie" /></label> 
                    	<input type="radio" id="symphonie" name="profil" value="Symphonie" style="display: none;"/> 
 
                    	<label for="arcade"><img src="../image/produktbilder/tueren/profile/arcade.gif" alt="Arcade" /></label> 
                    	<input type="radio" id="arcade" name="profil" value="Arcade" style="display: none;"/> 
                    </div><!-- Ennde profil --> 
                </div><!-- Ende Tab-1 --> 
 
                <div id="tab_2" style="display: none;"> 
                    <h1>Bauform</h1> 
                    <div> 
                        <label for="T"><img src="../image/produktbilder/tueren/bauform/T.gif" alt="Einpfl&uuml;gig" /></label> 
                    	<input type="radio" id="T" name="bauform" value="Einfl&uuml;gig" style="display: none;" onclick="javascript:CheckRadio('T');"/> 
                    	<label for="TSL"><img src="../image/produktbilder/tueren/bauform/TSL.gif" alt="Einpfl&uuml;gig-Seitenteil links" /></label> 
                    	<input type="radio" id="TSL" name="bauform" value="Einfl&uuml;gig Seitenteil links" style="display: none;" onclick="javascript:CheckRadio('TSL');"/> 
                    	<label for="TSR"><img src="../image/produktbilder/tueren/bauform/TSR.gif" alt="Einpfl&uuml;gig Seitenteil rechts" /></label> 
                    	<input type="radio" id="TSR" name="bauform" value="Einfl&uuml;gig Seitenteil rechts" style="display: none;" onclick="javascript:CheckRadio('TSR');"/> 
                    	<label for="T2S"><img src="../image/produktbilder/tueren/bauform/T2S.gif" alt="Einpfl&uuml;gig mit 2 Seitenteile" /></label> 
                    	<input type="radio" id="T2S" name="bauform" value="Einfl&uuml;gig mit 2 Seitenteile" style="display: none;" onclick="javascript:CheckRadio('T2S');"/> 
 
                        <label for="TO"><img src="../image/produktbilder/tueren/bauform/TO.gif" alt="Einpfl&uuml;gig mit Oberlicht" /></label> 
                    	<input type="radio" id="TO" name="bauform" value="Einfl&uuml;gig mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('TO');"/> 
                    	<label for="TSOL"><img src="../image/produktbilder/tueren/bauform/TSOL.gif" alt="Einpfl&uuml;gig-Seitenteil links und Oberlicht" /></label> 
                    	<input type="radio" id="TSOL" name="bauform" value="Einfl&uuml;gig Seitenteil links und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('TSOL');"/> 
                    	<label for="TSOR"><img src="../image/produktbilder/tueren/bauform/TSOR.gif" alt="Einpfl&uuml;gig Seitenteil rechts mit Oberlicht" /></label> 
                    	<input type="radio" id="TSOR" name="bauform" value="Einfl&uuml;gig Seitenteil rechts mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('TSOR');"/> 
                    	<label for="T2SO"><img src="../image/produktbilder/tueren/bauform/T2SO.gif" alt="Einpfl&uuml;gig mit 2 Seitenteile und Oberlicht" /></label> 
                    	<input type="radio" id="T2SO" name="bauform" value="Einfl&uuml;gig mit 2 Seitenteile und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('T2SO');"/> 
                    </div> 
                    <div> 
                        <label for="2T"><img src="../image/produktbilder/tueren/bauform/2T.gif" alt="Zweifl&uuml;gig" /></label> 
                    	<input type="radio" id="2T" name="bauform" value="Zweifl&uuml;gig" style="display: none;" onclick="javascript:CheckRadio('2T');"/> 
                    	<label for="2TSL"><img src="../image/produktbilder/tueren/bauform/2TSL.gif" alt="Zweifl&uuml;gig-Seitenteil links" /></label> 
                    	<input type="radio" id="2TSL" name="bauform" value="Zweifl&uuml;gig Seitenteil links" style="display: none;" onclick="javascript:CheckRadio('2TSL');"/> 
                    	<label for="2TSR"><img src="../image/produktbilder/tueren/bauform/2TSR.gif" alt="Zweipfl&uuml;gig Seitenteil rechts" /></label> 
                    	<input type="radio" id="2TSR" name="bauform" value="Zweifl&uuml;gig Seitenteil rechts" style="display: none;" onclick="javascript:CheckRadio('2TSR');"/> 
                    	<label for="2T2S"><img src="../image/produktbilder/tueren/bauform/2T2S.gif" alt="Zweipfl&uuml;gig mit 2 Seitenteile" /></label> 
                    	<input type="radio" id="2T2S" name="bauform" value="Zweifl&uuml;gig mit 2 Seitenteile" style="display: none;" onclick="javascript:CheckRadio('2T2S');"/> 
 
                        <label for="2TO"><img src="../image/produktbilder/tueren/bauform/2TO.gif" alt="Einpfl&uuml;gig mit Oberlicht" /></label> 
                    	<input type="radio" id="2TO" name="bauform" value="Einfl&uuml;gig mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2TO');"/> 
                    	<label for="2TSOL"><img src="../image/produktbilder/tueren/bauform/2TSOL.gif" alt="Zweipfl&uuml;gig-Seitenteil links und Oberlicht" /></label> 
                    	<input type="radio" id="2TSOL" name="bauform" value="Zweifl&uuml;gig Seitenteil links und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2TSOL');"/> 
                    	<label for="2TSOR"><img src="../image/produktbilder/tueren/bauform/2TSOR.gif" alt="Zweipfl&uuml;gig Seitenteil rechts mit Oberlicht" /></label> 
                    	<input type="radio" id="2TSOR" name="bauform" value="Zweifl&uuml;gig Seitenteil rechts mit Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2TSOR');"/> 
                    	<label for="2T2SO"><img src="../image/produktbilder/tueren/bauform/2T2SO.gif" alt="Zweipfl&uuml;gig mit 2 Seitenteile und Oberlicht" /></label> 
                    	<input type="radio" id="2T2SO" name="bauform" value="Zweifl&uuml;gig mit 2 Seitenteile und Oberlicht" style="display: none;" onclick="javascript:CheckRadio('2T2SO');"/> 
                    </div> <!-- Ende Bauformen --> 
                    <div> 
                        <h1>Ma&szlig;e</h1> 
                         <div id="hbe" style="display: block;"> 
                            <div>Breite: <input type="text" name="breite" id="breite" maxlength="4" onblur="checkBreite()"/>mm (900mm - 1200mm)<span id="FehlerBreite" style="display: none;">Die angegebene Breite wird nicht gef&uuml;hr</span></div> 
                            <div><label id="hoehe">H&ouml;he: </label><input type="text" name="hoehe" id="hoehe" maxlength="4" />mm (1950mm - 2240mm)</div> 
                         </div><!-- Ende Höhe/Breite  einflügig --> 
                         <div id="hbz" style="display: none;"> 
                            <div>Breite linker Fl&uuml;gel<input type="text" name="breiteFLl" id="breiteFL" maxlength="4" />mm (900mm - 1200mm)</div> 
                            <div>Breite rechter Fl&uuml;gel <input type="text" name="breiteFLr" id="breiteFR" maxlength="4" />mm (900mm - 1200mm)</div> 
                            <div>H&ouml;he: <input type="text" name="hoehez" id="hoehez" maxlength="4" />mm (1950mm - 2240mm)</div> 
                         </div><!-- Ende Höhe/Breite zweiflügig --> 
                         <div id="sl" style="display: none;"> 
                            <div> 
                                <select name="variationL"> 
                                    <option>verglast - beweglich</option> 
                                    <option>verglast - fest</option> 
                                    <option>geschlossen - beweglich</option> 
                                    <option>geschlossen - fest</option> 
                                </select> 
                                <select name="fuellungL"> 
                                    <option>Einsatzf&uuml;llung</option> 
                                    <option>einseitige Aufsatzf&uuml;llung</option> 
                                    <option>zweiseitige Aufsatzf&uuml;llung</option> 
                                </select> 
                            </div> 
                            <div><label id="breiteSl">Breite linker Seitenteil </label><input type="text" name="breiteSl" id="breiteSl" maxlength="4" onblur="checkSL()"/>mm (400mm - 1500mm)</div> 
                         </div><!-- Ende Seitenteil links --> 
                         <div id="sr" style="display: none;"> 
                            <div> 
                                <select name="variationR"> 
                                    <option>verglast - beweglich</option> 
                                    <option>verglast - fest</option> 
                                    <option>geschlossen - beweglich</option> 
                                    <option>geschlossen - fest</option> 
                                </select> 
                                <select name="fuellungR"> 
                                    <option>Einsatzf&uuml;llung</option> 
                                    <option>einseitige Aufsatzf&uuml;llung</option> 
                                    <option>zweiseitige Aufsatzf&uuml;llung</option> 
                                </select> 
                            </div> 
                            <div><label id="breiteSr">Breite linker Seitenteil </label><input type="text" name="breiteSr" id="breiteSr" maxlength="4" onblur="checkSR()"/>mm (400mm - 1500mm)</div> 
 
                         </div><!-- Ende Seitenteil rechts --> 
                         <div id="o" style="display: none;"> 
                            <div><label id="oberlicht">H&ouml;he Oberlicht</label><input type="text" name="oberlicht" id="oberlicht" maxlength="4" onblur="checkO()"/>mm (250mm - 1200mm)</div> 
                         </div><!-- Ende Oberlicht --> 
                    </div><!-- Ende Maße --> 
                </div><!-- Ende Tab-2--> 
                <div id="tab_3" style="display: none;"> 
                    <h1>Farbe</h1> 
                    <div> 
                        <h3>Dekorfarben</h3> 
                    </div><!-- Ende Dekorrfarben --> 
                    <div> 
                        <h3>Ralfarben</h3> 
                    </div><!-- Ende Ral --> 
                    <h1>Glas</h1> 
                    <div> 
                        glas
                    </div><!-- Ende Glas --> 
 
                </div><!-- Ende Tab-3 --> 
                <div id="tab_4" style="display: none;"> 
                   <h1>Griffe</h1> 
                   <div> 
                      <h3>Griff</h3> 
                   </div><!-- Ende Griff --> 
                   <div> 
                    <h3>Innendr&uuml;cker</h3> 
                   </div><!-- Ende Innendrücker --> 
                   <div> 
                    <h3>Extras</h3> 
                   </div><!-- Ende Extras --> 
                </div><!-- Ende Tab-4 --> 
 
            <input type="submit" name="submit"/> 
            </div><!-- Ende Konfigurator --> 
 
 
            <div class="clear"></div> 
        </div><!-- Ende Body --> 
    </div><!-- Ende Main --> 
    </form> 
    </body> 
</html>

kann es manchmal daran liegen? Bei http://validator.w3.org/ den Code reinkopiert und u.a folgende Fehlermeldung bekommen

Line 150, Column 23: character "<" is the first character of a delimiter but occurred as data
if(breite <= 899 || breite >=1201) document.getElementById("FehlerB…
?
This message may appear in several cases:

You tried to include the "<" character in your page: you should escape it as "&lt;"
You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&amp;", which is always safe.
Another possibility is that you forgot to close quotes in a previous tag.
 

Quaese

Moderator
Moderator
Hi,

du definierst die Funktion innerhalb von CheckRadio. Damit läuft sich im Kontext dieser Funktion und ist von aussen nicht sichtbar.

Als Lösung musst du sie ausserhalb deklarieren.
Code:
function CheckRadio(id) {
    if (id == "modell_primus") {
        document.getElementById('modell_primus').style.display = 'block';
        document.getElementById('modell_vario').style.display = 'none';
        document.getElementById('modell_select').style.display = 'none';
        document.getElementById('modell_express').style.display = 'none';
    }
    // ...
}

//Check der richtigen Eingabe der Maße beim verlassen des Feldes
function checkBreite(){
  var breite = parseInt(document.getElementById("breite").value);
  if(breite <= 899 || breite >=1201)
   document.getElementById("FehlerBreite").style.display='block';
  else
    document.getElementById("FehlerBreite").style.display='none';
}
Ciao
Quaese
 

Forum-Statistiken

Themen
272.356
Beiträge
1.558.615
Mitglieder
187.830
Neuestes Mitglied
hansmeiser