Changing a HTML DOM in an JavaScript file

I'm trying to make a simple "dice rolling" function on a website. I'm using HTML, CSS and JS in three separated files. I have a problem with changing a HTML DOM for example < p> with Math.random() variable in the JS-file. How can i do this?

Some of the code

From html ...

<h1 class='D20'>Let's roll the D20</h1>
<div class=D20></div>
button class=D20>Roll the dice!</button>
<p>0</p>

From JS ...

$('.div').hide();
$(".div.D20").on('click', function(){
var x = Math.floor(Math.random());

I want < p> to always follow x.