Edit in JSFiddle

JavaScript
HTML
CSS
Result

function applyFortuneTelling(id)
{
    "use strict";
	document.getElementById(id).innerHTML=getFortuneTellingResult();
}


function getFortuneTellingResult()
{
	"use strict";
    var randomData=Math.floor(Math.random()*10)+1;
    
    if(randomData===1){return 'Very Good!';}
    else if( randomData<7){return 'Good';}
    else if( randomData<9){return 'Bad';}
    else{return 'Very Bad...';}
}

<!DOCTYPE html>
<body>
<h1 class="mainTitle">乱数</h1>
    <p>結果 → <span id="output"></span></p>
    
    <hr>

    <p>理不尽な占い →
     <a class="button" href="#" onclick="applyFortuneTelling('output');">占う</a>
    </p>
</body>

a.button{
    display: inline-block;
    padding: 0 10px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background: #666;
    color: #fff;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
}

a.button:hover{
    background: #999;
}

a.button.selected{
    background: #000;
}