如何停止错误“未捕获的 TypeError”？

Question

我正在编写一个带有表格来计算价格和房间大小的网站。 我制作了一个包含很多输入和复选框的表格。我也有一个带输入的选择。这里是tabletag：

    <table class="table"
                   border="1"
                   width=60%>
                <thead>
                    <th colspan=3>
                        <p style="">
                            <div class="dropdown">
     <select class="select";
             id="roomseector"
             onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text;
                       document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
       <option id="option_userdefine">
         benutzerdefinierbar
       </option>
       <option value="Flur"
               id="dd_option">
         Flur
       </option>
       <option value="Badezimmer"
               id="dd_option">
         Badezimmer
       </option>
       <option value="Küche"
               id="dd_option">
         Küche
       </option>
       <option value="Wohnzimmer"
               id="dd_option">
         Wohnzimmer
       </option>
       <option value="Schlafzimmer"
               id="dd_option">
         Schlafzimmer
       </option>
       <option value="Kinderzimmer"
               id="dd_option">
         Kinderzimmer
       </option>
       <option value="Esszimmer"
               id="dd_option">
         Esszimmer
       </option>
       <option value="Arbeitszimmer"
               id="dd_option">
         Arbeitszimmer
       </option>
       <option value="Arbeitszimmer"
               id="dd_option">
         Arbeitszimmer
       </option>
       <option value="Gästezimmer"
               id="dd_option">
         Gästezimmer
       </option>
       <option value="Gästebadezimmer"
               id="dd_option">
         Gästebadezimmer
       </option>
       <option value="Abstellkammer"
               id="dd_option">
         Abstellkammer
       </option>
       <option value="Gr. Badezimmer"
               id="dd_option">
         Gr. Badezimmer
       </option>
       <option value="Kl. Badezimmer"
               id="dd_option">
         Kl. Badezimmer
       </option>
       <option value="Treppe"
               id="dd_option">
         Treppe</option>
       <option value="Balkon"
               id="dd_option">
         Balkon
       </option>
       <option value="begehbare Garderobe"
               id="dd_option">
         begehbare Garderobe
       </option>
       <option value="Spielzimmer"
               id="dd_option">
         Spielzimmer
       </option>
       <option value="Keller"
               id="dd_option">
         Keller
       </option>
       <option value="Dachboden"
               id="dd_option">
         Dachboden
       </option>
       <option value="Zimmer"
               id="dd_option">
         Zimmer
       </option>
       <option value="2. Flur"
               id="dd_option">
         2. Flur
       </option>
       <option value="Gästeschlafzimmer"
               id="dd_option">
         Gästeschlafzimmer
       </option>
       <option value="2. Schlafzimmer"
               id="dd_option">
         2. Schlafzimmer
       </option>
       <option value="2. Badezimmer"
               id="dd_option">
         2. Badezimmer
       </option>
       <option value="Fitnessraum"
               id="dd_option">
         Fitnessraum
       </option>
       <option value="Terasse"
               id="dd_option">
         Terassse
       </option>
       <option value="Garage 1"
               id="dd_option">
         Garage 1
       </option>
       <option value="Garage 2"
               id="dd_option">
         Garage 2
       </option>
     </select>
     <input type="text"
            name="displayValue"
            id="displayValue"
            placeholder="Wähle einen Raum!"
            onfocus="this.select()">
     <input name="idValue"
            id="idValue" ty
            pe="hidden">
             </div>
                        </p>
                    </th>
                    <td>
                        <input id="roomcheck"
                               name="roomcheck"
                               type="checkbox"
                               checked>
                        <label>
                            On/Off
                        </label>


                    </td>
                </thead>
                <tr>
                    <td padding='25px 13px'>
                        &nbsp;Höhe:&nbsp;
                    </td>
                    <td padding='25px 13px'>
                        <input placeholder="&nbsp;cm&nbsp;"
                               maxlength="4"
                               id="highin"
                               required
                               size="5">

                    </td>

                    <td padding='30px 13px'>

                      &nbsp;Wand&nbsp;1:&nbsp;
                    </td>
                    <td>
                        <input style="color:grey"
                               id="wand1in"
                               type="text"
                               maxlength="4"
                               size="6"
                               placeholder="Ja/Nein 0/1/2/3x">
                    </td>
                    <td style='padding:5px 10px'>
                        <p id='Wand1qmout'>
                            &nbsp;0qm&nbsp;
                        </p>
                      </td>
                      <td style='padding:5px 15px'>
                        <p id='wand1€out'>
                            &nbsp;0€&nbsp;
                        </p>
                    </td>


                </tr>
                <tr>
                    <td padding='25px 13px'>
                        &nbsp;Breite:&nbsp;
                    </td>
                    <td padding='25px 13px'>
                        <input placeholder="&nbsp;cm&nbsp;"
                               maxlength="4"
                               id="widthin"
                               required
                               size="5">

                    </td>

                    <td padding='30px 13px'>

                      &nbsp;Wand&nbsp;2:&nbsp;
                    </td>
                    <td>
                        <input style="color:grey"
                               id="wand2in"
                               type="text"
                               maxlength="4"
                               size="6"
                               placeholder="Ja/Nein 0/1/2/3x">
                    </td>
                    <td style='padding:5px 10px'>
                        <p id='wand2qmout'>
                            &nbsp;0qm&nbsp;
                        </p>
                      </td>
                      <td style='padding:5px 15px'>
                        <p id='Wand2€out'>
                            &nbsp;0€&nbsp;
                        </p>
                    </td>
                </tr>
                <tr>
                    <td padding='25px 13px'>
                        &nbsp;Tiefe:&nbsp;
                    </td>
                    <td padding='25px 13px'>
                        <input placeholder="&nbsp;cm&nbsp;"
                               maxlength="4"
                               id="dephin"
                               required
                               size="5">

                    </td>

                    <td padding='30px 13px'>

                      &nbsp;Wand&nbsp;3:&nbsp;
                    </td>
                    <td>
                        <input style="color:grey"
                               id="Wand3in"
                               type="text"
                               maxlength="4"
                               size="6"
                               placeholder="Ja/Nein 0/1/2/3x">
                    </td>
                    <td style='padding:5px 10px'>
                        <p id='wand3qmout'>
                            &nbsp;0qm&nbsp;
                        </p>
                      </td>
                      <td style='padding:5px 15px'>
                        <p id='wand3€out'>
                            &nbsp;0€&nbsp;
                        </p>
                    </td>
                </tr>
                <tr>
                    <td padding='25px 13px'>
                        &nbsp;qm:&nbsp;
                    </td>
                    <td padding='25px 13px'>
                        <input placeholder="&nbsp;gesammt&nbsp;"
                               maxlength="4"
                               id="dephin"
                               readonly
                               size="5">

                    </td>

                    <td padding='30px 13px'>

                      &nbsp;Wand&nbsp;4:&nbsp;
                    </td>
                    <td>
                        <input style="color:grey"
                               id="wand4in"
                               type="text"
                               maxlength="4"
                               size="6"
                               placeholder="Ja/Nein 0/1/2/3x">
                    </td>
                    <td style='padding:5px 10px'>
                        <p id='Wand4qmout'>
                            &nbsp;0qm&nbsp;
                        </p>
                      </td>
                      <td style='padding:5px 15px'>
                        <p id='Wand4€out'>
                            &nbsp;0€&nbsp;
                        </p>
                    </td>
                </tr>
                <tr>
                    <td padding='25px 13px'>
                        &nbsp;&nbsp;
                    </td>
                    <td padding='25px 13px'>
                        <input placeholder="&nbsp;&nbsp;"
                               maxlength="4"
                               id="dephin"
                               disabled
                               size="5">

                    </td>

                    <td padding='30px 13px'>

                      &nbsp;Decke&nbsp;:&nbsp;
                    </td>
                    <td>
                        <input style="color:grey"
                               id="Wand5in"
                               type="text"
                               maxlength="4"
                               size="6"
                               placeholder="Ja/Nein 0/1/2/3x">
                    </td>
                    <td style='padding:5px 10px'>
                        <p id='Wand5qmout'>
                            &nbsp;0qm&nbsp;
                        </p>
                      </td>
                      <td style='padding:5px 15px'>
                        <p id='Wand5€out'>
                            &nbsp;0€&nbsp;
                        </p>
                    </td>
                </tr>


            </table>

现在我想使用输入、复选框并希望原子计算一切。 如果我使用 js let input_displayValue = document.getElementById("displayValue").value; 它还给我：未捕获的类型错误：无法读取 null 的属性“值”

我怎样才能让它运行起来？

Answer 1

像这样修改onChange事件

onChange="
(function(){
   var input_displayValue = document.getElementById("displayValue").value
})();return false;
"