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.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Dropdown list doesnt change image

    Hey i am using a dropdown list to change an image but i doesnt work

    Javascript:

    Code:
    addEventListener("load", configurator, false);
    
    function configurator() {
        var model = document.getElementById("Model").value
        var afbeelding = document.getElementById("modelafbeelding")
    
        
    
        switch (model) {
            case "Audi A1":
    
                var foto = "./images/audia1.png"
           
                afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
                break;
            case "Audi A3":
    
                var foto = "./images/audia3.png"
    
                afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
                break;
            case "Audi A4":
    
                var foto = "./images/audia4.png"
    
                afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
                break;
            case "Audi A5":
    
                var foto = "./images/audia5.png"
    
                afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
                break;
            case "Audi A6":
    
                var foto = "./images/audia6.png"
    
                afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
                break;
            case "Audi R8":
    
                    var foto = "./images/audir8.png"
    
            afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
                break;
    
    
        }
    }


    HTML:

    Code:
       <tr>                    
                            <td><select id="Model" name="Model">
                                <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>
                            <div id="modelafbeelding"></div>
                        </tr>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    var model = document.getElementById("Model").value
    <option>Audi A1</option>


    You have not assigned any values to the select list options, nor is any option initially selected.

    <option value = "Audi A1" selected >Audi A1</option>


    I find her incredibly credible. - Presenter, BBC FRadio 1

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    var model = document.getElementById("Model").value
    <option>Audi A1</option>


    You have not assigned any values to the select list options, nor is any option initially selected.

    <option value = "Audi A1" selected >Audi A1</option>


    I find her incredibly credible. - Presenter, BBC FRadio 1
    i edit my html:

    Code:
      <tr>
                        
                            <td><select id="Model" name="Model">
                                <option value = "Audi A1" selected >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>
                            <div id="modelafbeelding"></div>
                        </tr>

    but i dont know what to edit in javascript (sorry kinda new to javascript )

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You need to assign a value to all the select list options, not just the first one!!

    You would do best to simplify the code by placing your images in an array (named say myphotos) and the rather than a switch statement simply use the selectedIndex of the select list to show the appropriate photo. In that case you do not need to assign any values to the options.

    Code:
    var myphotos = [];
    myphotos[0] = "./images/audia1.png";
    myphotos[1] = "./images/audia3.png";
    // and so on .....
    
    var si = document.getElementById("Model").selectedIndex;
    var foto = myphotos[si];   // example: if si == 0 then foto = "./images/audia1.png"
    var afbeelding = document.getElementById("modelafbeelding");
    afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
    Last edited by Philip M; 12-27-2011 at 03:11 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jdruwe (12-27-2011)

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    You need to assign a value to all the select list options, not just the first one!!

    You would do best to simplify the code by placing your images in an array (named say myphotos) and the rather than a switch statement simply use the selectedIndex of the select list to show the appropriate photo. In that case you do not need to assign any values to the options.

    Code:
    var myphotos = [];
    myphotos[0] = "./images/audia1.png";
    myphotos[1] = "./images/audia3.png";
    // and so on .....
    
    var si = document.getElementById("Model").selectedIndex;
    var foto = myphotos[si];   // example: if si == 0 then foto = "./images/audia1.png"
    var afbeelding = document.getElementById("modelafbeelding");
    afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");

    Code:
    addEventListener("load", configurator, false);
    
    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("Model").selectedIndex;
        var foto = myphotos[si];
        var afbeelding = document.getElementById("modelafbeelding");
        afbeelding.innerHTML = ("<img class='sizedgarage' src='" + foto + "'>");
    }

    it doesnt work automatic i have to refresh the page to get the selected image

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jdruwe View Post

    it doesnt work automatic i have to refresh the page to get the selected image
    Well, yes. You need to call the function when the select list changes:-

    Code:
    <select id="Model" name="Model" onchange = "configurator()" >

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Well, yes. You need to call the function when the select list changes:-

    Code:
    <select id="Model" name="Model" onchange = "configurator()" >
    Yea that is my problem , i am using this script for a task at school and thet dont allow my using javascript in HTML (like that onclick) .... is there an alternative?

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jdruwe View Post
    Yea that is my problem , i am using this script for a task at school and thet dont allow my using javascript in HTML (like that onclick) .... is there an alternative?
    If I had known it was homework I would have not given you so much assistance. See forum rule #1.5

    There is no point in your school making up silly rules such as not using Javascript events in HTML. That is the normal way a select list operates - using onchange. How do they expect you to learn anything?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    31
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    If I had known it was homework I would have not given you so much assistance. See forum rule #1.5

    There is no point in your school making up silly rules such as not using Javascript events in HTML. That is the normal way a select list operates - using onchange. How do they expect you to learn anything?
    I know it is silly thats why i ask for an alternative, and it isnt homework its just an optional thing we can do withouth getting any grades

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jdruwe View Post
    I know it is silly thats why i ask for an alternative, and it isnt homework its just an optional thing we can do withouth getting any grades
    Which makes the silly restriction on Javascript events even sillier.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    Quote Originally Posted by jdruwe View Post
    Yea that is my problem , i am using this script for a task at school and thet dont allow my using javascript in HTML (like that onclick)
    I think you need to read the instructions again. As Philip M points out, not being able to call functions from html elements requires you to jump through endless, unnecessary hoops and will result in some quite absurd coding.


  •  

    Posting Permissions

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