Nothing appears on console in chrome,taking information from form

I'm creating a simple string reverse project.

I want the user to enter input, then that input will be displayed below the text box in reverse order.

<form id = "frm1">
<input type="text" id="userInput"=> give me input</input>
<button onclick="strRev()">Submit</button>
</form>


<script type="text/javascript">



    function strRev(str){

        str = document.getElementById("userInput").toString().value;
        console.log(str);

        var originalStr = str.split("");

        console.log(originalStr);
        var finalArray = [];
        var j = 0;
        for(i = originalStr.length-1; i >= 0; i--){
            finalArray[j] = originalStr[i];
            j++;
        }

        for(k = 0; k <finalArray.length; k++){
            document.write(finalArray[k]);

        }


    }


</script>

When pressing submit, the information in the box is what should be reversed

Nothing happens on submit and nothing appears in console to debug.