I made a calculator for finding the standard form of a vertex form quadratic. Weird issues after making it to receive user input

Question

First, I use this as the base for the calculator.

let h = -2
let a = 3
let k = 10
let step1 = h * h
let step2 = h + h
let step3 = a * step2
let step4 = a * step1
let step5 = step4 + k
console.log(a + "x² + " + step3 + "x + " + step5)

It works, after trying with different a, h, and k values, but when I make it to accept user input using HTML and this code...

document.getElementById("submit").onclick = function(){
     let a = document.getElementById("aQuad").value;
     let h = document.getElementById("hQuad").value;
     let k = document.getElementById("kQuad").value;
     let step1 = h * h
     let step2 = h + h
     let step3 = a * step2
     let step4 = a * step1
     let step5 = step4 + k
     console.log(a + "x² + " + step3 + "x + " + step5)}

It breaks. Instead of answers like 3x² - 12x + 22 I get 3x² + NANx + 1210. I checked my HTML code too and I believe it is not the issue.

Answer 1

I actually am making the same kind of calculator and what I found is that when you take the inputs you need to use parseInt() because it takes in the inputs as strings. So:

let a = parseInt(document.getElementById("aQuad").value);
let h = parseInt(document.getElementById("hQuad").value);
let k = parseInt(document.getElementById("kQuad").value);