Make html button disappear with javascript?

F

FantaJ

Hi,

Is it possible to make a html button invisible using javascript?
I can certainly disable it:

var x=document.getElementById('button2');
x.disabled=true;
//x.type = 'hidden'; // read only?
//x.visible = false; // doesn't exist?

but is there a property i can (ab)use to make it invisible?

Thanks in advance.
 
R

RobG

FantaJ said:
Hi,

Is it possible to make a html button invisible using javascript?
I can certainly disable it:

var x=document.getElementById('button2');
x.disabled=true;
//x.type = 'hidden'; // read only?

input type hidden is not the same as readonly - the user can't see it
so in that sense a readonly input it's not readable at all.
//x.visible = false; // doesn't exist?

but is there a property i can (ab)use to make it invisible?

You can hide elements using:

x.style.display = 'none';
or
x.style.visibility = 'hidden';

and to make it visible again:

x.style.display = '';
or
x.style.visibility = 'visible';

The difference is that display 'none' will make the element take up
zero space in the page and hence will likely affect page layout.
Visibility just hides/shows the element with no effect on page layout.
 
G

Grant Wagner

FantaJ said:
Hi,

Is it possible to make a html button invisible using javascript?
I can certainly disable it:

var x=document.getElementById('button2');
x.disabled=true;
//x.type = 'hidden'; // read only?
//x.visible = false; // doesn't exist?

but is there a property i can (ab)use to make it invisible?

Thanks in advance.

<button id="myButton">My Button</button>
<button onclick="toggleVisibility('myButton');">Hide/show My
Button</button>
<button onclick="toggleDisplay('myButton');">Remove/restore My
Button</button>
<script type="text/javascript">
function toggleDisplay(id) {
var el;
if (document.getElementById) {
el = document.getElementById(id);
} else if (document.all) {
el = document.all[id];
}

if (el && (el = el.style) && ('string' == typeof el.display)) {
el.display = ('none' == el.display ? '' : 'none');
}
}
function toggleVisibility(id) {
var el;
if (document.getElementById) {
el = document.getElementById(id);
} else if (document.all) {
el = document.all[id];
}

if (el && (el = el.style) && ('string' == typeof el.visibility)) {
el.visibility = ('hidden' == el.visibility ? 'visible' :
'hidden');
}
}
</script>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top