Hiding and showing span in HTML

Question

I have a JSP page on which i have some input submit buttons. Now based on some values i get from an AJAX request i want to control the display and hiding of these input buttons. So i have created spans for each input. And based on the variable value i received from AJAX request i manipulate there display property. But i am not getting the results right.

here's my code:

<td style="width: 600px"><span id="startspan"><input name="start" value="startActivity" type="submit" id="startbuttonid"></span></td>
       <td style="width: 600px"><span id="holdspan"><input name="start" value="holdActivity" type="submit" id="holdbuttonid"></span></td>
       <td style="width: 600px"><span id="cancelspan"><input name="start" value="cancelActivity" type="submit" id="cancelbuttonid"></span></td>
       <td style="width: 600px"><span id="closespan"><input name="start" value="closeActivity" type="submit" id="closebuttonid"></span></td>

And my java script code where i am writing code for display or hiding them is ::

if(temp1[15]=="InProcess"){
        document.getElementById('startspan').style.display='none';
        document.getElementById('holdspan').style.display = 'block';
        document.getElementById('cancelspan').style.display = 'block';
        document.getElementById('closespan').style.display = 'block';
    }
    if(temp1[15]=="New"){
        document.getElementById('startspan').style.display='block';
        document.getElementById('holdspan').style.display = 'none';
        document.getElementById('cancelspan').style.display = 'block';
        document.getElementById('closespan').style.display = 'none';
    }

here based on variable temp1[15] value which i am receiving fine. I want to display or hide those input submit buttons. I am doing it the right way, like defining span or need some correction. Basically all those input buttons are inside a dialog box <div> which opens up only when a function is triggered inside which i have written my Hiding or showing span code(Written above). Need help. Thanks.

Answer 1

The display property in CSS also determines whether it acts like a block (DIV, P, etc), or an inline element (span, b, etc), as well as its visibility.

For your spans you want to do this instead:

document.getElementById('span').style.display = 'inline';

If it was a DIV you would use block, and if it was an IMG you would use inline-block.