Hide buttons when printing

I have a page which contains at the bottom 3 buttons with the following coding:

    function printpage() {
        //Get the print button and put it into a variable
        var printButton = document.getElementById("printpagebutton");
        //Set the print button visibility to 'hidden' 
        printButton.style.visibility = 'hidden';
        //Print the page content
        window.print()
        printButton.style.visibility = 'visible';
    }
#options {
	align-content:center;
	align-items:center;
    text-align: center;
}
<div id="options">
<input type="submit" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" value="re-enter the news">
</div>

I managed to hide the print button while printing but i couldn’t with the others.

I’ve searched the internet for the solution, and most questions were answered by adding the display:none; in css, but i end up with 3 hidden buttons on the screen.
I only want the buttons hidden while printing

Answer might be simple, my knowledge in web developing is acient.

Thank you in advance.


Source: html

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.