how to display different images if combination radio buttons checked?

user_12988878 0
Viewed 83

There are 4 groups of radio buttons and displayed image of interior design. Would like to do presentation showing kitchen design with different finishes. How the javascript code should look like to display suitable image when one button from each group of finishes(wall color,cabinet color, countertop color and flooring) checked? screenshot

    <div id="nav">
     <legend>Flooring</legend>
      <input type="radio" id="1" name="floor"onClick="changeSrc()"> Boardwalk<br/>
      <input type="radio" id="2" name="floor"onClick="changeSrc()"> Cognac<br/>
      <input type="radio" id="3" name="floor"onClick="changeSrc()"> Java Fossilized<br/>
     <input type="radio" id="4" name="floor"onClick="changeSrc()"> Mocha<br/>
      <input type="radio" id="5" name="floor"onClick="changeSrc()"> Treehouse<br/>
      <input type="radio" id="6" name="floor"onClick="changeSrc()"> Natural<br/><br/>


      <legend>Cabinet</legend>
      <input type="radio" id="7" name="Cabinet"onClick="changeSrc()"> Gray<br/> 
      <input type="radio" id="8" name="Cabinet"onClick="changeSrc()"> Bordeaux<br/>
      <input type="radio" id="9" name="Cabinet"onClick="changeSrc()"> Linen White<br/> 
      <input type="radio" id="10" name="Cabinet"onClick="changeSrc()"> Natural Wood<br/><br/>

      <legend>Wall Color</legend>
      <input type="radio" id="11" name="wall color"> Berkshire Beige<br/> 
      <input type="radio" id="12" name="wall color"> Coastal Fog<br/>
      <input type="radio" id="13" name="wall color"> Linen White<br/> 
      <input type="radio" id="14" name="wall color"> Metropolitan<br/><br/> 

     <legend>Countertop</legend>
      <input type="radio" id="15" name="Countertop"onClick="changeSrc()"> Altair<br/>
      <input type="radio" id="16" name="Countertop"onClick="changeSrc()"> Desert Silver<br/>
      <input type="radio" id="17" name="Countertop"onClick="changeSrc()"> Ironbark<br/>
     <input type="radio" id="18" name="Countertop"onClick="changeSrc()"> Kimbler Mist<br/>
      <input type="radio" id="19" name="Countertop"onClick="changeSrc()"> Mountain Mist<br/>
      <input type="radio" id="20" name="Countertop"onClick="changeSrc()"> Royal Reef<br/><br/>
</div>

    </div>

    <div id="content">
      <img id="myImage" width=1320px src="img/kitchenBoardwalk.jpg"/>

function changeSrc() {
    if (document.getElementById("1").checked & document.getElementById("7").checked & document.getElementById("11").checked & document.getElementById("15").checked) {
    document.getElementById("MyImage").src = "img/kitchenBoardwalk.jpg";
}
javascript
1 Answers

In such context, is always a good idea to preload the image even before you dynamically assign it to a src attribute. Without such, the browser can't update the DOM in real time in such context.

Do this:

var image = new Image();
image.src = 'img/kitchenBoardwalk.jpg';

This should be done before changeSrc() declaration.

In your function, change this line:

document.getElementById("MyImage").src = "img/kitchenBoardwalk.jpg"

To:

document.getElementById("myImage").src = image.src;

Note that you can add other properties such height, width, alt etc to the image object/instance.

Hope this helps someone.

user_127833830
Related