I can't add numbers together using JavaScript, why?

Question

I am a beginner at JavaScript and am currently trying to create a very basic webbsite for throwing dice. For some reason I can't add two numbers together correctly. The following code is supposed to add the value of each dice, but doesn't. Could someone please explain why, and how to fix it?

        let numRolls = document.getElementById('numhitrolls').value;
        let modifier = document.getElementById('tohit-modifier').value;
        

        if(document.getElementById('neither').checked == true){
            for( let i = 0; i < numRolls; i++){
                roll = (Math.floor(Math.random() * 20) + 1);
                roll += modifier;
                alert(roll);
                }

For some reason I get a message with a number that is way to high. I want to add the value of the modifier and the roll, but instead I'm getting a value such as '1112' (modifier = 12), and I can't understand why. Help is much appreciated