Allow only Numbers in Textbox Javascript

<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
    <h3>Input Field allow only numbers 1 to 100 in javascript</h3>
    <p for="numberInput">Enter a number between 1 and 100:</p>
    <input type="text" id="numberInput">
    <button onclick="checkNumber()">Check</button>
    <script>
        function checkNumber() {
            var numberInput = document.getElementById('numberInput').value;
            var number = parseInt(numberInput);

var message;

if (isNaN(number)) {
                message = 'Please enter a valid number.';
            } else if (number < 1 || number > 100) {
                message = 'Please enter a number between 1 and 100.';
            } else {
                message = 'You entered a valid number between 1 and 100: ' + number;
            }

alert(message);
        }

</script>
    <style>
        p {
            margin-bottom: 10px;
        }

input[type="text"] {
            padding: 10px;
            width: 200px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 16px;
            outline: none;
        }

button {
            padding: 10px 20px;
            margin-top: 10px;
            border: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

button:hover {
            background-color: #45a049;
        }
    </style>
</body>

</html>