Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts

    onchange doesnt work

    Hey guys

    I have a stupid problem, my teacher asked us to DONT use javadscript in html (like onchange ="....")

    If i use following js in html my page works:

    <select id="car" name="car" onchange="configurator()">

    If i delete that last piece and try to code it in a .js file like:

    document.getElementsById("car").onchange = configurator;

    it doesnt work, it doest recognize the .onchange method

    Thanks in advance

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Double check your javascript. I will give you a hint, you will only have one element with one ID. IDs cannot be duplicated on the same page.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there jdruwe,

    your problem is probably the result of a typing error here...
    Code:
    document.getElementsById("car").onchange = configurator;
    It should be...
    Code:
    document.getElementById("car").onchange = configurator;
    coothead

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Double check your javascript. I will give you a hint, you will only have one element with one ID. IDs cannot be duplicated on the same page.
    So i cant have another "var carC = document.getElementsById("car").value" ?

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No that isn't what I said at all. Read coothead's post. It tells you exactly what you did wrong and will allow you to understand my post better. Since this was an assignment I was trying not to give you the answer.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there jdruwe,

    your problem is probably the result of a typing error here...
    Code:
    document.getElementsById("car").onchange = configurator;
    It should be...
    Code:
    document.getElementById("car").onchange = configurator;
    coothead
    No sorry it was a typo n this forum in my .js its good but i get only the other methods like .onclick, .onfocus, ...

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    When do you use document.getElementById? Before or After your page loads?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    When do you use document.getElementById? Before or After your page loads?
    after, i work with addEventListener("load",init,false)

  • #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there jdruwe,

    is your code similar to this.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <script type="text/javascript">
    function init(){
       document.getElementById('car').onchange=configurator;
     }
    function configurator(){
       alert(this.value);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div>
    <select id="car" name="car">
     <option value="">options</option>
     <option value="1">one</option>
     <option value="2">two</option>
     <option value="3">three</option>
    </select>
    </div>
    
    </body>
    </html>
    
    coothead

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by coothead View Post
    Hi there jdruwe,

    is your code similar to this.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title></title>
    
    <script type="text/javascript">
    function init(){
       document.getElementById('car').onchange=configurator;
     }
    function configurator(){
       alert(this.value);
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    </script>
    
    </head>
    <body>
    
    <div>
    <select id="car" name="car">
     <option value="">options</option>
     <option value="1">one</option>
     <option value="2">two</option>
     <option value="3">three</option>
    </select>
    </div>
    
    </body>
    </html>
    
    coothead
    similar without the:
    value=".."
    window.addEventListener?
    window.attachEvent('onload',init);

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I just tested this locally on my machine in Chrome and it worked fine. You need to post the rest of your javascript and your html.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    jdruwe (01-02-2012)

  • #12
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I just tested this locally on my machine in Chrome and it worked fine. You need to post the rest of your javascript and your html.
    JS

    Code:
    addEventListener("load", init, false);
    
    
    function init(event) {
         var form = document.forms["formulier"];
        form.addEventListener("submit", bepalen, false);
        document.getElementById("Wagen").onchange = configurator;
    }
    
    
    function bepalen(){
    
       
        var wagenC = document.getElementById("Wagen").value
        var uitvoeringC = document.getElementById("uitvoering").value
        var motorisatieC = document.getElementById("motorisatie").value
        var versnellingsbakC = document.getElementById("versnellingsbak").value
        var kleurC = document.getElementById("Kleur").value
        var zetelbekledingC = document.getElementById("Zetelbekleding").value
        var stuurC = document.getElementById("Stuur").value
    
        setSessionCookie("Wagen", wagenC);
        setSessionCookie("Uitvoering", uitvoeringC);
        setSessionCookie("Motorisatie", motorisatieC);
        setSessionCookie("Versnellingsbak", versnellingsbakC);
        setSessionCookie("Kleur", kleurC);
        setSessionCookie("Zetelbekleding", zetelbekledingC);
        setSessionCookie("Stuur", stuurC);
    
        function setSessionCookie(name, value) {
            document.cookie = name + "=" + value;
        }
    
    }
    
    function configurator() {
    
        var myphotos = [];
        myphotos[0] = "./images/audia1.png";
        myphotos[1] = "./images/audia3.png";
        myphotos[2] = "./images/audia4.png";
        myphotos[3] = "./images/audia5.png";
        myphotos[4] = "./images/audia6.png";
        myphotos[5] = "./images/audir8.png";
    
        var si = document.getElementById("Wagen").selectedIndex;
        var foto = myphotos[si];
        var afbeelding = document.getElementById("modelafbeelding");
        afbeelding.innerHTML = ("<img class='sizedmodelconfig' src='" + foto + "'>");
    
    }
    HTML

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
        <script type="text/javascript" src="scripts/configurator.js"></script>
        <title>Audi</title>
        <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
    </head>
    <body>
    <div class="container">
        <div class="content">
            <img src="./images/Logo.png" class="sizedlogo" alt="Audi logo"/>
    
            <div class="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="configurator.html">Configurator</a></li>
                    <li><a href="dealers.html">Dealers</a></li>
                    <li><a href="modellen.html">Modellen</a></li>
                    <li><a href="proefrit.html">Proefrit</a></li>
                </ul>
            </div>
            <form id="formulier" action="samenvatting.html">
                <fieldset id="ModelFS">
                    <legend>Model</legend>
                    <table class="tabelgegevens">
                        <tr>
    
                            <td><select id="Wagen" name="Wagen">
                                <option>Audi A1</option>
                                <option>Audi A3</option>
                                <option>Audi A4</option>
                                <option>Audi A5</option>
                                <option>Audi A6</option>
                                <option>Audi R8</option>
                            </select></td>
                        </tr>
                    </table>
                    <br>
    
                    <div id="modelafbeelding"></div>
                </fieldset>
    
                <br>
    
    
                <fieldset id="OnderdelenFS">
                    <legend>Onderdelen</legend>
                    <table class="tabelgegevens">
    
    
                        <tr>
                            <td><label for="uitvoering">Uitvoering</label></td>
                            <td><select id="uitvoering" name="uitvoering">
    
                                <option>Luxe</option>
                                <option>Sport</option>
                                <option>Reference</option>
                                <option>Style</option>
                            </select></td>
                        </tr>
    
    
                        <tr>
                            <td><label for="motorisatie">Motorisatie</label></td>
                            <td><select id="motorisatie" name="motorisatie">
    
                                <option>Benzine 102 kw/pk</option>
                                <option>Benzine 134 kw/pk</option>
                                <option>Diesel 105 kw/pk</option>
                                <option>Diesel 143 kw/pk</option>
                            </select></td>
                        </tr>
    
    
                        <tr>
                            <td><label for="versnellingsbak">versnellingsbak</label></td>
                            <td><select id="versnellingsbak" name="versnellingsbak">
                                <option>5 versnellingen</option>
                                <option>6 versnellingen</option>
                                <option>7 versnellingen</option>
                            </select></td>
                        </tr>
    
    
                        <tr>
                            <td><label for="Kleur">Kleur</label></td>
                            <td><select id="Kleur" name="Kleur">
    
                                <option>Rood</option>
                                <option>Groen</option>
                                <option>Paars</option>
                                <option>Geel</option>
                                <option>Blauw</option>
                                <option>Roze</option>
                                <option>Grijs</option>
                            </select></td>
                        </tr>
    
    
                        <tr>
                            <td><label for="Zetelbekleding">Zetelbekleding</label></td>
                            <td><select id="Zetelbekleding" name="Zetelbekleding">
    
                                <option>Leder</option>
                                <option>Katoen</option>
                            </select></td>
                        </tr>
    
    
                        <tr>
                            <td><label for="Stuur">Stuur</label></td>
                            <td><select id="Stuur" name="Stuur">
    
                                <option>Standaard</option>
                                <option>Sportstuur</option>
                                <option>Multifunctioneel sportstuur</option>
                            </select></td>
                        </tr>
    
    
                    </table>
                </fieldset>
                <p></p>
                <fieldset id="Gaverder">
                    <legend>Ga verder</legend>
                    <input id="samenvatting" name="samenvatting" type="submit" value="Offerte"/>
    
                </fieldset>
            </form>
            <div class="footerlijn">
                <p class="footer">D’Ieteren N.V. Audi Import Leuvensesteenweg 639 3071 Kortenberg
                    <a href="http://www.facebook.com/AudiBelgium"><img class="facebooklink" src="./images/facebook.jpg"
                                                                       alt="Audi logo"/></a></p>
            </div>
        </div>
    </div>
    </body>
    </html>

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just tried your code too and it works in Chrome. So now the question to ask is are you testing this in Internet Explorer? If so which version? It works in IE 9 for me as well. I believe IE 8 and below use window.attachEvent, not window.addEventListener.
    Last edited by _Aerospace_Eng_; 01-02-2012 at 11:59 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    jdruwe (01-02-2012)

  • #14
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    Just tried your code too and it works in Chrome. So now the question to ask is are you testing this in Internet Explorer?
    No, in firefox

  • #15
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jdruwe View Post
    No, in firefox
    Sorry for doublepost , yea indeed firefox doesnt support that, is there a way to make it work cause they will only test my project in firefox


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •