How to Print HTML Content on Click of a Button, But Not the Page

Print the contents of a DIV

Slight changes over earlier version - tested on CHROME

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}

How to print a div on a click of a button?

So in order to do that you need to add some listener for the click event of your button.

Assume this is your HTML:

<button id="myButton">Button</button>

<div id="myPrintableContent">
  Some content to print
</div>

And this is your javascript code:

$(document).ready(function() {
  $('#myButton').on('click', function () {
    $('#myPrintableContent').printThis();
  });
});

print text when button is pressed

If you are refering to print as write to DOM element or console use below code:

const someData = 'the_Data_You_Want_To_Print'

document.getElementById('printButton').onclick = function() {
  //print in DOM element
  document.getElementById('printHere').innerHTML = someData;
  //print on console
  console.log(someData)
};

#printHere {
  position: absolute;
  top: 15%;
  left: 6%;
  font-size: 5vw;
 }

<button id="printButton">Click Me To Print</button>

<p id="printHere"></p>

Can you print a page in a function being defined in javascript?

Your function print on the top level is overwriting the built-in window.print. Use a different variable name so that window.print does not get reassigned:

<button id="button" onclick="doPrint()">print document</button>
<script>
 function doPrint() {
  var value = document.getElementById("value").value;
  document.getElementById("hidden").innerHTML = "<p>" + value + "</p>";
  document.getElementById("button").style.display = "none";
  window.print()
}

But it would be better to avoid inline handlers, they have way too many problems to be worth using nowadays, such as a demented scope chain and quote escaping issues. Attach event listeners properly using Javascript with addEventListener instead.

document.querySelector('#button').addEventListener('click', () => {
  var value = document.getElementById("value").value;
  document.getElementById("hidden").innerHTML = "<p>" + value + "</p>";
  document.getElementById("button").style.display = "none";
  window.print()
});

Hide buttons when printing

You can use CSS @media queries. For instance:

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

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