having trouble with this code/dice game. Idk why when i push the roll dice button it disappears and when i have an .css sheet link it wipes the page

I have 2 seperate codes one is the html and the other is JavaScript. Im haveing trouble keeping the button to stay and when I add any kind of .css file to it for design it whipes it white and all i have left is the results. I am trying to make a simple craps game. I didnt add the .css sheet but you can just create any simple .css with it and see it whipes it white. And the button disappears.

 <!DOCTYPE html>
<html lang="en">
 <head>
  <script src="pastedC.js"></script>
    <title>Casino 2</title>
</head>
<body>

    <button onclick="play();" class="play();">Roll the Dice</button>
    <p>
       

    </p>
</body>
</html>

js.file

function play() {
    var die1 = 5
    var die2 = 2

    var sum = die1+die2
    document.write("Die 1 = " + die1)
    document.write("<br/>")
    document.write("Die 2 = " + die2)
    document.write("<br/>")
    document.write("Sum = " + sum)
    document.write("<br/>")
    if (sum == 7 || sum == 11)
    { document.write("CRAPS - you lose")
    document.write("<br/>")
    }
    else if (die1== die2 && die1%2 == 0)
    {
    document.write("DOUBLES - you win")
    document.write("<br/>")
    }

    }
    document.write("Simple Craps")
    document.write("<br/>")
    play()

Via Active questions tagged javascript - Stack Overflow https://ift.tt/bfmuyjz