Toggle the display of a text field with a checkbox

Question

When Unlimited is checked, remove the input box. That works. However, when the checkbox is unchecked the input box wont show back up.

<script type="text/javascript">
    function getQuantity() {
        var checkbox = document.getElementById("unlimited");
        var qty = document.getElementById("quantityspace");
        if(checkbox.checked == true){
             qty.style.display = 'none';
        }else if(checkbox.checked == false) {
             qty.stlye.display = '<input type="text" id="quantity" size="4" value="1" name="quantity" />';
        }
    }
</script>

<input type="checkbox" id="unlimited" name="unlimited" value="x" onClick="getQuantity(); " /> Unlimited? <span id="quantityspace">or specify:
<input type="text" id="quantity" size="4" value="1" name="quantity" /></span>

Answer 1

In your else if(...) you have:

qty.stlye.display

Do you mean style?

Additionally, you're incorrectly defining the display attribute. It should be a valid value. You probably want it to be:

else if(!checkbox.checked) {
    qty.style.display = 'inline'; // or something from the W3C link above
}

Answer 2

Is it just that you've misspelled 'qty.stlye.display'?

Answer 3

qty.stlye.display = '<input type="text" id="quantity" 
size="4" value="1" name="quantity" />';

should be:

qty.style.display = 'inline'; // or block

display is a property of the already existing input tag. You don't need to assign the entire tag to the property to make it show up again -- in fact that's dead wrong. Simply assign that property a new valid value for display, like inline, inline-block or block and it will show up again.

Answer 4

Change the qty.stlye.display line to:

qty.style.display = "";

Note that you misspelled "style" there.

Answer 5

You misspelled "style" as "stlye" and you're setting the display style to HTML for some reason. It should be 'inline' or 'block' or whatever it was before you set it to 'none'.

Answer 6

I think what you want is this:

function getQuantity() {
    var checkbox = document.getElementById("unlimited");
    var qty = document.getElementById("quantityspace");
    if(checkbox.checked == true){
        qty.innerHTML = '';
    }else if(checkbox.checked == false) {
        qty.innerHTML = '<input type="text" id="quantity" size="4" value="1" name="quantity" />';
     }
}

If I'm correct, you want to put an input in the quantityspace element when the checkbox is not checked.

qty.style.display changes the CSS display property of the span. qty.innerHTML changes the HTML inside the span.

You could do it with .style.display with the following code:

function getQuantity() {
    var checkbox = document.getElementById("unlimited");
    var qty = document.getElementById("quantityspace");
    if(checkbox.checked == true){
        qty.style.display= 'none';
    }else if(checkbox.checked == false) {
        qty.style.display= 'inline';
     }
}