how to assign getElementbyId variable to html code

Question

I have an image of a person wearing a hat. I have «master.png» image of the hat (by itself) over this image which will change to a different image (same hat/different color) everytime the user clicks a different color swatch below.

The javascript function works but I haven't been able to assign the color variable values to my swatches. So only the last js src image listed appears regardless of which swatch you click. I'm also not sure if my javascript variable code is correct.

I haven't been able to find anything on the web about how to do this. Please help!

Here is the code:

<script type="text/javascript">
function hat(color)
{
var color = ['redhat', 'bluehat', 'blackhat'];
document.getElementById("master").src="images/redhat.png"; 
document.getElementById("master").src="images/bluehat.png"; 
document.getElementById("master").src="images/blackhat.png"; 
}
</script>



<img id="hat" src="images/manwearinghat.png" width="100%" class="center">


<img id="master" src="images/masterhat.png" width="100%" alt=" " name="master">




<img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');" value="redhat" style="z-index:3">


<img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');" value="bluehat" style="z-index:3">


<img src="images/swatchs/blackhat.png" width="69" height="69
" onclick="hat('blackhat');" style="z-index:3">

Wayne · Accepted Answer · 2012-08-10 22:09:05Z

2

You could use something as simple as this:

function hat(color) {
    document.getElementById("master").src = "images/" + color + ".png"; 
}

answered Aug 10, 2012 at 22:09

Wayne

60.5k15 gold badges135 silver badges129 bronze badges

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

2 Comments

quassia Over a year ago

it is but it no longer recognizes them.

quassia Over a year ago

my previous code was longer but worked. the problem (i think) is linking each color swatch to its color image in the function. I have a feeling i'm missing some code in my html img section. Or my variable code is totally off.

manko · Accepted Answer · 2012-08-10 22:19:47Z

0

Since you are already passing name of the color all you need to do is

  function hat(color) {
    document.getElementById("master").src = "images/" +color+".png";
}

to change the image.

edited Aug 10, 2012 at 22:19

answered Aug 10, 2012 at 22:14

manko

513 bronze badges

1 Comment

manko Over a year ago

Check the src text that is being generated before it gets set on the image. You can use firebug or similar tool for this. It should be "images/redhat.png" and not "images/'redhat'.png" if you pass redhat as color to the function.

Dylan Vander Berg · Accepted Answer · 2013-04-22 01:52:10Z

This code isn't very compact, but it will work. HTML:

    <img id="hat" src="images/manwearinghat.png" width="100%" class="center">
    <div id="master"></div>
    <div>
        <img src="images/swatchs/redswatch.png" width="69" height="69" onclick="hat('redhat');"    
     value="redhat" style="z-index:3">


    <img src="images/swatchs/blueswatch.png" width="69" height="69" onclick="hat('bluehat');"
    value="bluehat" style="z-index:3">


    <img src="images/swatchs/blackhat.png" width="69" height="69
    " onclick="hat('blackhat');" style="z-index:3">
    </div>

Javascript:

    function hat(color){
        if (color == 'bluehat'){
            document.getElementById('picture').innerHTML=<img id="master" 
    src="images/bluehat.png" width="100%" alt=" " name="master">
        if (color == 'blackhat'){
            document.getElementById('picture').innerHTML=<img id="master"
    src="images/blackhat.png" width="100%" alt=" " name="master">

        if (color == 'redhat'){
            document.getElementById('picture').innerHTML=<img id="master" src="images/redhat.png"
    width="100%" alt=" " name="master">
    };

Collectives™ on Stack Overflow

how to assign getElementbyId variable to html code

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest