Javascript - change image and text on select

Question

Im very new to javascript and still very much learning. I'm trying to change the text and image in a div based on a users selection from a dropdown. I can get the image to change or the text to change but can not get both to change. If someone can point me in the right direction and tell me where am I going wrong in my code, it would be greatly appreciated. Code follows:

Javascript

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("swapImg");
    image.src = dropd.value;    


    var model = document.getElementById("model");
    var heading = document.getElementById("heading3");
    var textGrey = document.getElementById("textGrey");
    var textGrey2 = document.getElementById("textGrey2");

    if(dropd.value == "images/1.jpg"){

        model.innerHTML = "A4";
        heading.innerHTML="This text matches A4 model";
        textGrey.innerHTML="kjhkjh we ewf kjikjkj we";
        textGrey2.innerHTML="hf efjkj efe  edeeeeejm dff";
        return false;
    }

    else if (dropd.value == "images/2.jpg"){
        model.innerHTML = "A6";
        heading.innerHTML ="This text matches A6 model"; 
        textGrey.innerHTML ="xxx xxxxx xxxxx xxxx";
        textGrey2.innerHTML="yy yyyy yyyy yy";
        return false;
    }

    else if (dropd.value =="images/3.jpg"){
        model.innerHTML = "A8";
        heading.innerHTML ="This text matches the A8 model"; 
        textGrey.innerHTML ="zzzz zzzzz";
        textGrey2.innerHTML="pppp ppp pp p p";
        return false;
    }
}

HTML - div to change text and image

 <div id="carbox">
   <h2 id="model" class="model">A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

    <div id="carbox-bottom">
    <h3 id="heading3" class="heading3">Loren ipsum dolor sit ame</h3>
    <p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi dolo wetiuyy thuoi loren ipsum dolar </p>
    <p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p> 
    </div>  
    </div>
    <!--End carbox-->

Dropdown

<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()" >
   <option value="images/1.jpg">A4</option>
<option value="images/2.jpg" selected="selected">A6</option>
<option value="images/3.jpg">A8</option>
</select>

enter image description here

Ravi Dhoriya ツ · Accepted Answer · 2014-05-14 07:52:42Z

3

You can use HTML5 data attribute to assign multiple values to any elements.

Use data attribute to assign "heading, description, image url" to each select options (in your case) and access those values onChange event of dropdown list from javascript.

HTML

<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()" >
   <option value="images/1.jpg" data-model="A4" data-heading="Model A4 heading" data-description="Model A4 description">A4</option>
   <option value="images/2.jpg" data-model="A6" data-heading="Model A6 heading" data-description="Model A6 description" selected="selected">A6</option>
   <option value="images/3.jpg" data-model="A8" data-heading="Model A8 heading" data-description="Model A8 description">A8</option>
</select>

Javascript

<script>
    function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("swapImg");
    image.src = dropd.value;   

    //getting selected option
    var option= dropd.options[dropd.selectedIndex];
    //getting dataset of option (defined with data attributes)
    var data=option.dataset;

    //accessing data attribute values
    console.log(data.model);
    console.log(data.heading);
    console.log(data.description);


    var model = document.getElementById("model");
    var heading = document.getElementById("heading3");
    var textGrey = document.getElementById("textGrey");

    model.innedHTML=data.model;
    heading.innedHTML=data.heading;
    textGrey.innedHTML=data.description;

}
</script>

Demo jsFiddle

Reference:

edited May 14, 2014 at 7:52

answered May 14, 2014 at 7:47

Ravi Dhoriya ツ

4,4148 gold badges39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marilee Over a year ago

thank you so much for your answer ill give it a try and let you know

Marilee Over a year ago

this will be my 1st time working with HTML5 so ive got a bit of reading to do, the image is changing but the text is NOT changing. Do I need to add code somewhere, am I missing something? Thank you for the help

Ishan Jain · Accepted Answer · 2014-05-14 08:08:18Z

2

In your

 <h2 id="model" class="model">A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

The <img> is INSIDE the <h2>. So when you change the innerHTML of your <h2>:

var model = document.getElementById("model");
model.innerHTML = "A4";

You lose the <img>.

Fix: have the <h2> end earlier:

<h2 id="model" class="model">A6</h2>
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />

Working Example

edited May 14, 2014 at 8:08

Ishan Jain

8,23111 gold badges52 silver badges77 bronze badges

answered May 14, 2014 at 7:58

Konerak

39.8k13 gold badges102 silver badges121 bronze badges

Comments

Valentyn Vynogradskiy · Accepted Answer · 2014-05-14 07:54:34Z

0

Try using FireBug to debug your code. Using Chrome or Mozilla press F12 - this will show you the fire bug window, and you can debug your code.

answered May 14, 2014 at 7:54

Valentyn Vynogradskiy

6531 gold badge7 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript - change image and text on select

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related