Hide buttons when printing

Question

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.

Answer 1

You can use CSS @media queries. For instance:

@media print {    #printPageButton {      display: none;    }  }

<button id="printPageButton" onClick="window.print();">Print</button>

The styles defined within the @media print block will only be applied when printing the page. You can test it by clicking the print button in the snippet; you'll get a blank page.

Answer 2

You can use a css media query to target print:

@media print {   .hide-print {     display: none;   } }