CODEWITHSUNDEEP
javascripthtmlcss
Griffin Obeid
Griffin Obeid

Reputation: 87

I am trying to display a div on click of a checkbox

I need to display an image and some info about the item when a checkbox is clicked. For some reason nothing is happening and I have been tweaking this for a while with no response whatsoever. Here is my javascript: 

<script type = "text/javascript">
    function displayOnChecked(var checkboxID, var id) {
        if(document.getElementById(checkboxID)) {
            document.getElementById(id).style.display = "block";
        } else {
            document.getElementById(id).style.display = "none";
        }
    }
</script>

In the stylesheet I have it on display: none;

Here is one of my invocations:

<input type="checkbox" name="purchasedItem" id = "item" onclick="displayOnChecked('item', 'itemInfo');">

Upvotes: 0

Views: 75

Answers (3)

Rounin
Rounin

Reputation: 29463

You can achieve this, just using the CSS pseudo-element :checked:

.checkmeout {
display: none;
position: absolute;
top: 12px;
left: 150px;
width: 400px;
height: 100px;
padding: 12px;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}

.checkmeout img {
display: block;
width: 200px;
height: 50px;
background-color: rgb(0,0,255);
}

.checkme:checked ~ .checkmeout {
display:block;
}
<form>
<input type="checkbox" name="checkme" class="checkme" /> Check Me

<div class="checkmeout">
<img src="" alt="Check Me Out Image" />
<p>Check Me Out Text Description</p>
</div>
</form>

Upvotes: 0

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

You don't intialize variables as function arguments:

function displayOnChecked(var checkboxID, var id)

should be

unction displayOnChecked(checkboxID, id)

Upvotes: 0

Hatchet
Hatchet

Reputation: 5428

No need for the var keyword in the arguments list of displayOnChecked, just have the variable names alone.

If you look in your console, you should be getting an error: Uncaught SyntaxError: Unexpected token var

Upvotes: 2

Related Questions