Debug Onlineshop

abc · 28. Dez. 2007

Hallo liebes Forum,

ich habe ein Javascript für einen Onlineshop geschrieben, leider habe ich hier nur einen Mac mit Safari 3.0.4 und Firefox 2.0 zum testen.
Das Script funktioniert im Safari einwandfrei, aber im Firefox lassen sich die Funktionen nicht aufrufen.
Im speziellen die iwantmore() Funktion

Ich habe mit Firebug zu debuggen, aber er hat mir keinen Fehler angezeigt.

Vielleicht könnt ihr mir helfen, und wenn möglich das Script auch auf einem PC testen.

Dank im voraus, ABC

Link zum Onlineshop

Java Script:

Code:

    //Variablen
    
    r = 0;
    t = 0;
    
    function iwantmore(motive){
        
        switch(motive){
            
            case 'halbdunkel': var counter = r;
            break;
            
            case 'klappenlos': var counter = t;
            break;
            
            }
            
        var getdiv = document.getElementById('select_' + motive);
        
        //  Create Gender Select
        
        var select_gender = document.createElement('select');
        
        select_gender.type = 'select';
        select_gender.name = 'gender_' + motive + '_' + counter;
        select_gender.id   = 'gender_' + motive + '_' + counter;

        var select_gender_id   = String('gender_' + motive + '_' + counter);
        var select_size_id     = String('size_'   + motive + '_' + counter);
        var select_colour_id   = String('colour_' + motive + '_' + counter);
        var br_id              = String('br_'     + motive + '_' + counter);

        select_gender.onchange = function() { upitup(select_gender_id, select_size_id, select_colour_id, br_id); }

        select_gender.options[0] = new Option('GENDER');
        select_gender.options[1] = new Option('-');
        select_gender.options[2] = new Option('MALE');
        select_gender.options[3] = new Option('FEMALE');
        select_gender.options[4] = new Option('-');

        select_gender.options[2].value = 'male';
        select_gender.options[3].value = 'female';

        getdiv.appendChild(select_gender);
        
        // Create Size Select
        
        var select_size = document.createElement('select');
        
        select_size.type     = 'select';
        select_size.name     = 'size_' + motive + '_' + counter;
        select_size.id       = 'size_' + motive + '_' + counter;
        select_size.disabled = true;

        select_size.options[0] = new Option('SIZE');

        getdiv.appendChild(select_size);
        
        //  Create Colour Select
        
        var select_colour = document.createElement('select');
        
        select_colour.type     = 'select';
        select_colour.name     = 'colour_' + motive + '_' + counter;
        select_colour.id       = 'colour_' + motive + '_' + counter;
        select_colour.disabled = true;
        
        select_colour.onchange = function() { colour(select_colour_id, motive); }
        
        select_colour.options[0] = new Option('COLOUR');
        
        getdiv.appendChild(select_colour);
        
        //  Create Br
        
        var br = document.createElement('br');

        br.id  = 'br_' + motive + '_' + counter;

        getdiv.appendChild(br);
        
        switch(motive){
            
            case 'halbdunkel': r++;
            break;
            
            case 'klappenlos': t++;
            break;
            
            }
        
        }
    
    function noway(motive){
            
        switch(motive){
            
            case 'halbdunkel':
                
                if(r > 0){
                 
                    var getdiv = document.getElementById('select_' + motive);
                    
                    var remove_gender = getdiv.getElementsByTagName('select')[(r * 3) - 3];
                    var remove_size   = getdiv.getElementsByTagName('select')[(r * 3) - 2];
                    var remove_colour = getdiv.getElementsByTagName('select')[(r * 3) - 1];
                    
                    var remove_br     = document.getElementById('br_' + motive + '_' + (r - 1));
                    
                    r--;
                    
                    }
                    
            break;
            
            case 'klappenlos':
                
                if(t > 0){
                 
                    var getdiv = document.getElementById('select_' + motive);
                    
                    var remove_gender = getdiv.getElementsByTagName('select')[(t * 3) - 3];
                    var remove_size   = getdiv.getElementsByTagName('select')[(t * 3) - 2];
                    var remove_colour = getdiv.getElementsByTagName('select')[(t * 3) - 1];

                    var remove_br     = document.getElementById('br_' + motive + '_' + (t - 1));
                    
                    t--;
                    
                    }
                    
            break;
            
            }

        getdiv.removeChild(remove_gender);
        getdiv.removeChild(remove_size);
        getdiv.removeChild(remove_colour);
        getdiv.removeChild(remove_br);
        
        }
    
    function upitup(select_gender_id, select_size_id, select_colour_id, br_id){
        
        var select_gender = document.getElementById(select_gender_id);
        var select_size   = document.getElementById(select_size_id);
        var select_colour = document.getElementById(select_colour_id);
        
        document.getElementById(select_size_id).options.length = 0;
        document.getElementById(select_colour_id).options.length = 0;
                    
        switch(select_gender.options[select_gender.selectedIndex].value){
            
            case 'male': 
                
                select_size.disabled   = false;
                
                select_size.options[0] = new Option("SIZE");
                select_size.options[1] = new Option("-");
                select_size.options[2] = new Option("MEDIUM");
                select_size.options[3] = new Option("LARGE");
                select_size.options[4] = new Option("-");
                
                select_colour.disabled   = false;
                
                select_colour.options[0] = new Option("COLOUR");
                select_colour.options[1] = new Option("-");
                select_colour.options[2] = new Option("WHITE");
                select_colour.options[3] = new Option("BLACK");
                select_colour.options[4] = new Option("MINT");
                select_colour.options[5] = new Option("YELLOW");
                select_colour.options[6] = new Option("-");
            
            break;
            
            case 'female':
                
                select_size.disabled   = false;
                
                select_size.options[0] = new Option("SIZE");
                select_size.options[1] = new Option("-");
                select_size.options[2] = new Option("SMALL");
                select_size.options[3] = new Option("MEDIUM");
                select_size.options[4] = new Option("LARGE");
                select_size.options[5] = new Option("-");
                
                select_colour.disabled   = false;
                
                select_colour.options[0] = new Option("COLOUR");
                select_colour.options[1] = new Option("-");
                select_colour.options[2] = new Option("WHITE");
                select_colour.options[3] = new Option("BLACK");
                select_colour.options[4] = new Option("MINT");
                select_colour.options[5] = new Option("LILAC");
                select_colour.options[6] = new Option("CORAL");
                select_colour.options[7] = new Option("-");
            
            break;
            
            }
        
        }
    
    function checkform(mode, mode_adress){
        
        switch(mode){
            
            case 'form_select':
                
                var error = new Array();
                
                form_select = document.getElementById('form_select').getElementsByTagName('select');
                
                if(form_select.length != 0){
                    
                    for(var z = 0; z < form_select.length; z++){
                        
                        if(form_select[z].options[form_select[z].selectedIndex].value == 'GENDER' || form_select[z].options[form_select[z].selectedIndex].value == 'SIZE' || form_select[z].options[form_select[z].selectedIndex].value == 'COLOUR' || form_select[z].options[form_select[z].selectedIndex].value == '-'){
                            
                            error.push(form_select[z]);
                            
                            }
                        
                        }
                    
                    if(error.length > 0){

                        alert('Please select you size and your favorite colour!');

                        }

                    else{

                        adressform(mode_adress);

                        }
                    
                    }
                
                else{
                    
                    alert('Please select at least one shirt!');
                    
                    }
            
            break;
            
            case 'form_adress': 
            
            var error = new Array();
            
            var form_input = document.getElementsByTagName('input');
            
            for(var z = 0; z < form_input.length; z++){
                
                if(form_input[z].value == ''){
                    
                    error.push(form_input[z].name);
                    
                    }
                
                }   
            
            if(error.length > 0){
                
                alert('Every field is required!');
                return false;
                
                }
            
            else{

                // Enable Select Forms

                for(var z = 0; z < form_select.length; z++){
                    
                    form_select[z].disabled = false;

                    }
                
                document.getElementById('form').submit();
                return true;
                
                }
            
            break;
            
            }
        
        }
        
    function adressform(mode){

        switch(mode){
            
            case 'show': 
                
                // Create Submit Button
                
                var button_submit      = document.createElement('input');
                button_submit.type     = 'button';
                button_submit.name     = 'button_submit';
                button_submit.value    = 'SUBMIT ORDER';
                button_submit.id       = 'button_submit';
                
                button_submit.style.width = '330px';
                button_submit.style.cssFloat = 'right';
                button_submit.style.styleFloat = 'right';
                
                
                button_submit.onclick  = function() { checkform('form_adress', ''); };
                                    
                document.getElementById('form_navigation').appendChild(button_submit);
                
                // Edit Place Button
                
                var button_placeorder = document.getElementById('button_placeorder');
                button_placeorder.value = 'EDIT ORDER';
                button_placeorder.style.width = '330px';
                                    
                button_placeorder.onclick = function() { adressform('hide'); };
                
                // Show Adressform
                
                document.getElementById('form_adress').style.visibility = 'visible';
                
                // Disable Select Forms

                for(var z = 0; z < form_select.length; z++){
                    
                    form_select[z].disabled = true;

                    }
                    
                // Disable Plus Minus
              
                for(var z = 0; z < document.getElementsByName('plusminus').length; z++) {
                    
                    document.getElementsByName('plusminus')[z].disabled = true;
                    
                    }
                
                document.getElementById('background_adress').style.visibility = 'visible';
                
            break;
            
            case 'hide':
                
                // Remove Submit Button
                
                document.getElementById('form_navigation').removeChild(document.getElementById('button_submit'));
                
                // Edit Place Button
                
                var button_placeorder = document.getElementById('button_placeorder');
                button_placeorder.value = 'PLACE ORDER';
                button_placeorder.style.width = '730px';
                
                button_placeorder.onclick = function() { adressform('show'); }
                
                // Hide Adressform
                
                document.getElementById('form_adress').style.visibility = 'hidden';
                
                // Enable Select Forms
                
                for(var z = 0; z < form_select.length; z++){
                    
                    form_select[z].disabled = false;

                    }
                    
                // Disable Plus Minus

                for(var z = 0; z < document.getElementsByName('plusminus').length; z++) {

                    document.getElementsByName('plusminus')[z].disabled = false;

                    }
                
                document.getElementById('background_adress').style.visibility = 'hidden';
                
            break;
            
            }
        
        }
        
    function colour(select_colour_id, motive){
        
        var select_colour = document.getElementById(select_colour_id);
        
        var colour = select_colour.options[select_colour.selectedIndex].value.toLowerCase();
        
        document.getElementById('image_' + motive).src = 'images/onlineshop/' + motive + '_' + colour + '.jpg';
        
        }

abc · 28. Dez. 2007

Html:

Code:

<html>

<head>

    <title>onlineshop</title>
    
    <script src="getjavascript.js" type="text/javascript" charset="utf-8"></script>
    
    <style type="text/css" media="screen">
        
        body{
            
            margin: 0;
            padding: 0;
            
            }
        
        #images, #form_adress{
            
            position: absolute;
            top: 50px;
            left: 150px;
                        
            }
            
        #image_klappenlos{
        
            padding-left: 60px;
            
            }
        
        #button_placeorder{
            
            width: 730px;
            float: left;
            
            }
        
        #form_select{
            
            position: absolute;
            top: 520px;
            left: 150px;
            
            width: 730px;
            
            padding-top: 15px;
            
            z-index: 10;
            
            }
        
        #container_halbdunkel{
                    
            float: left;

            }
            
        #container_klappenlos{
            
            float: right;
            
            }
        
        select{
            
            width: 106px;
            margin-right: 6px;
            
            }
        
        #plusminus{
            
            width: 165px;
            
            }
        
        #form_adress{
                        
            font: 11px "Monaco";
            
            width: 310px;
            height: 450px;
            padding: 10px;
            z-index: 10;
                    
            visibility: hidden;
                       
            background-color: white;
            
            }
        
        #background_adress{
            
            position: absolute;
            
            width: 100%;
            height: 100%;
            
            z-index: 5;
            
            visibility: hidden;
            
            background-image: url(images/onlineshop/background.gif);
            
            }
        
        #input{
            
            width: 310px;
            
            }
            
        #input_small{
            
            width: 148px;
            
            
            }
            
    </style>
  
</head>

<body>
    
</body>

    <div id="background_adress">
        
    </div>
    
    <div id="images">
                    
        <img src="images/onlineshop/halbdunkel_white.jpg" width="330" height="470" alt="" id="image_halbdunkel"><img src="images/onlineshop/klappenlos_white.jpg" width="330" height="470" alt="" id="image_klappenlos">
                    
    </div>
    
    <form action="getorder.php" method="post" id="form" onsubmit="return checkform('form_adress', '')">
    
    <div id="form_adress">
        
        Email<br>
        <input type="text" name="email" value="" id="input"><br>
        Name, Firstname<br>
        <input type="text" name="name" value="" id="input_small">, <input type="text" name="firstname" value="" id="input_small"><br>
        Adress<br>
        <input type="text" name="adress" value="" id="input"><br>
        Zipcode, City<br>
        <input type="text" name="zipcode" value="" id="input_small">, <input type="text" name="city" value="" id="input_small"><br>
        Country<br>
        <input type="text" name="country" value="" id="input">
    
    </div>
    
    <div id="form_select">
        
        <div id="form_navigation">
        
            <input type="button" name="button_placeorder" value="PLACE ORDER" id="button_placeorder" onclick="checkform('form_select', 'show')">
            
        </div>
        
<div id="container_halbdunkel">
                      
        <div id="select_halbdunkel">
            
        </div>
        
        <div id="menu_halbdunkel">
            
            <input type="button" name="plusminus" value="+" id="plusminus" onclick="iwantmore('halbdunkel')">
            <input type="button" name="plusminus" value="-" id="plusminus" onclick="noway('halbdunkel')">
            
        </div>
        
</div>

<div id="container_klappenlos">

        <div id="select_klappenlos">
            
        </div>
        
        <div id="menu_klappenlos">
            
            <input type="button" name="plusminus" value="+" id="plusminus" onclick="iwantmore('klappenlos')">
            <input type="button" name="plusminus" value="-" id="plusminus" onclick="noway('klappenlos')">
            
        </div>
        
</div>
        
    </div>
    
    </form>
    
</body>    

</html>

ein schlauer · 28. Dez. 2007

Das Skript funktioniert mit einem FF 2.0 unter WinXP nicht.

PHP:

Fehler: setting a property that has only a getter
Quelldatei: http://variouselmts.com/derschwarzeriese/getjavascript.js
Zeile: 24

PHP:

Fehler: getdiv has no properties
Quelldatei: http://variouselmts.com/derschwarzeriese/getjavascript.js
Zeile: 136

abc · 28. Dez. 2007

danke schön, es lag wohl an dem

Code:

select_gender.type = 'select';

es ist anscheinend unnötig den typen noch mal zu setzten wenn man das element eh schon mit creatElement erstellt hat

ich habe aus getdiv jetzt auch eine globale variable gemacht

kannst du es jetzt noch mal versuchen

dank im voraus abc

DerSchonWieder · 30. Dez. 2007

FF zeigt bei mir keine Fehlermeldung an.
Version: 2.0.0.11

Debug Onlineshop

abc

New member

abc

New member

ein schlauer

Lounge-Member

abc

New member

DerSchonWieder

New member