JavaScript @media print stylesheet not working

Question

I have started trying to make simple HTML and CSS webpages while incorporating a bit of JavaScript. I'm trying to make a simple print button that doesn't show up when you print it. I've searched around SA for various answers and I've seen a lot of things about the link media= "print". In the stylesheet would be a class where you would write either display: none or visibility: hidden. You would then apply that to your button.

The problem is that when I try doing it, it doesn't turn invisible when the page preview pops up. Here is my main code:

<link rel="stylesheet" href="print.css"
type="text/css" media="print" />
<script type = "text/javascript">
function newPerson(firstname, lastname, age, gender, birthmonth, birthdate) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.gender = gender;
this.birthmonth = birthmonth;
this.birthdate = birthdate;
this.birthyear = birthdayCalculate;
}
function birthdayCalculate() {
var date = new Date();
var CurYear = date.getFullYear()
var CurMonth = date.getMonth()
var birthyear = CurYear - this.age
if (this.birthmonth > CurMonth) {
 birthyear --
}
return birthyear
}
function testFunction(form) {
var firstName = form.firstName.value
var lastName = form.lastName.value
var Age = form.Age.value
var Gender = form.Gender.value
var birthMonth = form.birthMonth.value
var birthDate = form.birthDate.value
var new1 = new newPerson(firstName, lastName, Age, Gender, birthMonth, birthDate)
var person = new1.firstname + " " + new1.lastname + " is " + new1.age + " and is " + new1.gender + " and was born on "
+ new1.birthmonth + "/" + new1.birthdate + "/" + new1.birthyear() + "." + "<br />"
document.write(person);
winVar = window.open();
winVar.document.write(person);
winVar.focus();
winVar.document.write(
"<input type='button' " +
"onClick= 'window.print();'" +
"value ='Print This Page' " +
"class = 'print' " +
"/>");}
</script>

I think you'd be able to tell I used forms. I don't think I need to show you this. The print .css is extremely simple too:

.print{
visibility: hidden
}

Does anyone see anything wrong with my script? A little something else, I'm using Google Chrome.

• R Lacorne: Why not just use media queries, as in @media print { .print { display:none;}} ?
• JaredCubilla: @RLacorne doesn't work
• R Lacorne: Hmm then what about this: <style media="print"> .print { display:none; } </style>
• JaredCubilla: nothing seems to work when using a media="print". I have tried various other things, such as changing the onClick of the 'Print this Page' itself. What I'm currently trying to do to fix this problem is creating a function that makes the style display: none, print the page, then revert it back to display: visible. There seems to be something wrong with the testFunction itself, because I have tested my theory by creating a function with a window.print, but when I convert the winVar print button, it doesn't work. However, typing window.print works just fine. Help!

Answer 1

css will not help in this case use javascript instead. You have to do something like this:

assume this is your print button <input type="button" value="print" onclick="this.setAttribute('hidden''hidden')"/>

hide the button when it clicked using the setAttribute function.

hope it will work..