JSFiddle - React, Tailwind, and code Playground

by Nguyen Hien

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <form id="enterValue">
    Enter a number between 1 and 10: 
    <input id="factorialInput" type="number" max="10" size="20"/>
    <input type ="button" value="Submit" onclick="multiply();" max="10" />
    </form>
    <br><br>
<div id="result2"></div>
</div>

CSS

.row {
            height: 200px;
        }

 .small-row {
            display: flex;
            flex-wrap: wrap;
        }

 .left-column {
            float: left;
        }

JavaScript

function multiply() {

        let num = document.getElementById("factorialInput").value;
        let sum = 1;
            for (let i=1; i<= num; i++) {
                sum = sum * i;
            }

        document.getElementById("result2").innerHTML  = "All of the numbers between 1 and " +num+ " multiplied together equals: " + sum ;
        }
        /*
         document.getElementsById('factorialInput').oninput = function () {
        var max = parseInt(this.max);

        if (parseInt(this.value) > max) {
            this.value = max; 
        }
    }*/
    
   $('#factorialInput').on('keydown keyup', function(e){
    if ($(this).val() > 10 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val('');
    }
});