Uncaught TypeError: Cannot read properties of null (reading ‘value’) getElementById

I’m getting this error when clicking on the button.

Uncaught TypeError: Cannot read properties of null (reading ‘value’)

What am I doing wrong? Here’s the code:

 <table>
                <tr>
                    <th>Height (inches)</th>
                    <th>Width (inches)</th>
                    <th>Length (inches)</th>
                    <th>Pieces</th>
                    <th>Bd Ft</th>
                    <th>Lineal Ft</th>
                    <th>Sqare Ft</th>
                </tr>
                <tr>
                    <td>
                        <input type="text" value="1" id="height" /></td>
                    <td>
                        <input type="text" value="1" id="width" /></td>
                    <td>
                        <input type="text" value="1" id="length" /></td>
                    <td>
                        <input type="text" value="1" id="pieces" /></td>
                    <td>
                        <input type="text" value="" id="bdft" /></td>
                    <td>
                        <input type="text" value="" id="linealft" /></td>
                    <td>
                        <input type="text" value="" id="sqft" /></td>
                </tr>
            </table>
            <input type="button" value="Calculate" onclick="calculate()" />
            <script type="text/javascript">
                function calculate() {
                   
                    var heightVar = document.getElementById(height);
                    var widthVar = document.getElementById(width);
                    var lengthVar = document.getElementById(length);
                    var piecesVar = document.getElementById(pieces);

                    alert(document.getElementById(height).value);
                  
                }

            </script>

What am I doing wrong? I would expect to get ‘height’ value in an alert window.