Griffin Obeid February 2016

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');">

Answers


Hatchet February 2016

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


che-azeh February 2016

You don't intialize variables as function arguments:

function displayOnChecked(var checkboxID, var id)

should be

unction displayOnChecked(checkboxID, id)


Rounin February 2016

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>

Post Status

Asked in February 2016
Viewed 1,809 times
Voted 6
Answered 3 times

Search




Leave an answer