javascript - Hiding and showing span in HTML - Stack Overflow

admin管理员组

文章数量:1345069

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.

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.

• javascript
• jsp
• html

Share Improve this question Follow edited Apr 27, 2012 at 15:01 Fenton 251k7373 gold badges401401 silver badges409409 bronze badges asked Apr 27, 2012 at 15:00 Shantanu TomarShantanu Tomar 1,71277 gold badges4141 silver badges6666 bronze badges 1

• I've created a JSFiddle here and everything seem to work fine: jsfiddle/uGvam – phantasm Commented Apr 27, 2012 at 15:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

Since it is working in the fiddle and not in your main code, I suspect that there might be an issue related to your code executing before the DOM is loaded (or the dialog box <div> is generated). You mention that you're using AJAX. Make sure that the code to show or hide the buttons is in the AJAX success callback.

本文标签： javascriptHiding and showing span in HTMLStack Overflow