changing the theme of a javascript lotto game

i have a JavaScript lotto game with me and i'm trying to change the theme of the game. i want the game to allow the user to select and deselect the number. i want a splash screen to appear when the user guess the right number. i want a history of the guesses.

<!DOCTYPE html>
<html>

    <head>
        <title>Student Lotto version: 0.1</title>
        <style>
            body {
                background-color: lightblue;
                color: black;
            }
            .numBtn {
                width: 80px;
                height: 30px;
                background-color: green;
                color: white;
                font-weight: bold;
            }
        </style>
    </head>
<body>
    <h1>Student Lotto 0.1 </h1>
    <h2> Student lotto is  a simple guessing game to try your luck!</h2>
    <p> The computer has chosen 3 numbers. You must see how many you get right! </p> 
        <br>
        <br>
        <input id="actionButton1" class="numBtn" type="button"  value="1" onclick="userAction(1)" >
        <input id="actionButton2" class="numBtn" type="button"  value="2" onclick="userAction(2)" >
        <input id="actionButton3" class="numBtn" type="button"  value="3" onclick="userAction(3)" >
        <input id="actionButton4" class="numBtn" type="button"  value="4" onclick="userAction(4)" >
        <input id="actionButton5" class="numBtn" type="button"  value="5" onclick="userAction(5)" >
        <br>
        <br>
        <input id="actionButton6" class="numBtn" type="button"  value="6" onclick="userAction(6)" >
        <input id="actionButton7" class="numBtn" type="button"  value="7" onclick="userAction(7)" >
        <input id="actionButton8" class="numBtn" type="button"  value="8" onclick="userAction(8)" >
        <input id="actionButton9" class="numBtn" type="button"  value="9" onclick="userAction(9)" >
        <input id="actionButton10" class="numBtn" type="button"  value="10" onclick="userAction(10)" >
        <br><br>
        <input id="checkBtn" type="button"  value="Check Results" onclick="checkResults()" >
        <br>
        <p id="outMessage"> Result of guess will go here! </p>
    <script>

function userAction(buttonNum) {
    guessCount++;
    if (guessCount > 3) { // Checks if guessCount is more than 3
        document.getElementById("outMessage").innerHTML = "Guesses exceed! please stop " ;
        return;
    }

    {
        var  baseText = "actionButton";
        baseText = baseText + buttonNum;
        document.getElementById(baseText).style.backgroundColor="red";
        document.getElementById(baseText).style.color="white";
    }

    if (guessCount == 1) {
        userG1 = buttonNum;
    }
    if (guessCount == 2) {
        userG2 = buttonNum;
    }
    if (guessCount == 3) {
        userG3 = buttonNum;
    }
} // end of function userAction

function checkResults() {
    var correctCount = 0;

    if (userG1 == compG1 || userG1 == compG2 || userG1 == compG3) {
        correctCount++;
    }
    if (userG2 == compG1 || userG2 == compG2 || userG2 == compG3) {
        correctCount++;
    }
    if (userG3 == compG1 || userG3 == compG2 || userG3 == compG3) {
        correctCount++;
    }
    document.getElementById("outMessage").innerHTML 
         = "You got  " + correctCount + " correct!";
}


var compG1 = Math.ceil((Math.random() * 10));
var compG2 = Math.ceil((Math.random() * 10));
var compG3 = Math.ceil((Math.random() * 10));
var userG1 = 0;
var userG2 = 0;
var userG3 = 0;

var whileCount1 = 0;


while (compG1 == compG2) {
    whileCount1++;
    compG2 = Math.ceil((Math.random() * 10));
}
document.write ("<br> The while1 loop ran " + whileCount1);
while (compG2 == compG3 || compG1 == compG3) {
    compG3 = Math.ceil((Math.random() * 10));
}



var guessCount = 0;
    </script>
</body>
</html>