CODEWITHSUNDEEP
javascriptimageif-statementhideshow
user1322707
user1322707

Reputation: 281

How to HIDE element based on IF statement when onClick is used

I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value="some_url" inside the option, then I want the image to show.

I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value="".

Here is the Javascript I'm using:

function showImage() {
    document.getElementById('openimg').style.display = 'block';

Here is the html:

<select name="" >
   <option value="url" onclick="showImage();">Some_option_1</option>
   <option value="">Some_option_2</option>
   <option value="">Some_option_3</option>
 </select>

<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>

I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to "show if" or "hide if" along with the onClick command within each option.

Upvotes: 0

Views: 3119

Answers (2)

dave823
dave823

Reputation: 1211

this is how I would do it:

<script type="text/javascript">
function showImage()
{
    var choice = document.getElementById('myDropDown').value;
    if(choice.length > 0)
    {
        document.getElementById('openimg').style.display = 'block';
    }
    else
    {
        document.getElementById('openimg').style.display = 'none';
    }
}
</script>

<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>

Upvotes: 1

FlavorScape
FlavorScape

Reputation: 14279

Um, are you asking how to use an if or how to determine what is selected?

First of all, use onchange event in the dropdown.

This is the LONGHAND way of doing it for illustration purposes.

function onChange(){

    var mySelect = document.getElementById("my-select");
    var selectedValue = "";

    for( var i = 0; i < mySelect.length;i++){
       if( mySelect[i].selected)
         selectedValue = mySelect[i].value;        
    }

    if( selectedValue == "whatever")
    {
           //do something
    }

    if( selectedValue == "ugh")
          // do something else


}

Upvotes: 0

Related Questions