javascript - 计算器未捕获的类型错误无法将属性“值”设置为空

Question

输入了一个建筑计算器，但由于某种原因，它没有在计算结束时识别对象。尝试移动函数以查看在尝试从函数中拉出时它是否被错误地排序，并且还删除了 Number5 和所有相关行，但出现的错误是 Number4 是问题，这让我相信这是关闭是问题。

function Calculate(n1, n2, n3, n4, n5, n6, n7) {
                var total;
                var buildRate
                switch (n1) {
                    case "Double Brick":
                        buildRate = 1290 * n2;
                        break;
                    case "Brick Veneer":
                        buildRate = 1160 * n2;
                        break;
                    case "Weather Board":
                        buildRate = 950 * n2;
                        break;
                    case "Other":
                        buildRate = 900 * n2;
                        break;
                    default:
                        break;
                }
                total = buildRate + (n3 * 1) + (n4 * 1) + (n5 * 1) + (n6 * 1) + (n7 * 1);
                return total;
            }

            <table>
                <tr>
                    <td><label for="Construction">CONSTRUCTION TYPE:</label>
                    </td>
                    <td><select name="Construction" id="Construction">
                            <option value="Double Brick">Double Brick</option>
                            <option value="Brick Veneer">Brick Veneer</option>
                            <option value="Weather Board">Weather Board</option>
                            <option value="Other">Other</option>
                        </select></td>
                </tr>
                <tr>
                    <td>AREA OF HOME [SQ METRES]:
                    </td>
                    <td> <input type="number" name="Area" id="Area" /></td>
                </tr>
                <tr>
                    <td>GARAGE, DRIVEWAYS:
                    </td>
                    <td>$<input type="number" name="Number1" id="Number1" /></td>
                </tr>
                <tr>
                    <td>FENCES, GATES:
                    </td>
                    <td>$<input type="number" name="Number2" id="Number2" /></td>
                </tr>
                <tr>
                    <td>INGROUND SWIMMING POOL:
                    </td>
                    <td>$<input type="number" name="Number3" id="Number3" /></td>
                </tr>
                <tr>
                    <td>ARCHITECTS FEES, DEBRIS REMOVAL:
                    </td>
                    <td>$<input type="number" name="Number4" id="Number4" /></td>
                </tr>
                <tr>
                    <td>PERMANENT FIXTURES - SHEDS AIR CONDITIONING UNIS:
                    </td>
                    <td>$<input type="number" name="Number5" id="Number5" /></td>
                </tr>
                <tr>
                    <td>COST OF CONSTRUCTION: </td>
                    <td>$<input type="number" name="Cost"/></td>
                </tr>
            </table>
            <input type="button" value="Calculate" onclick="document.getElementById('Cost').value =
                            Calculate(document.getElementById('Construction').value, 
                            document.getElementById('Area').value,
                            document.getElementById('Number1').value,
                            document.getElementById('Number2').value,
                            document.getElementById('Number3').value,
                            document.getElementById('Number4').value,
                            document.getElementById('Number5').value)" />
    
    
    
            <input type="reset" value="&nbsp; Clear &nbsp; " onclick="location.reload();" />

标签： javascript

Answer 1

您忘记在成本输入中添加 id 也可以像我一样在 js 函数中获得价值

function Calculate() {
  n1 = document.getElementById('Construction').value;
  n2 = document.getElementById('Area').value;
  n3 = document.getElementById('Number1').value;
  n4 = document.getElementById('Number2').value;
  n5 = document.getElementById('Number3').value;
  n6 = document.getElementById('Number4').value;
  n7 = document.getElementById('Number5').value;
  var total;
  var buildRate
  switch (n1) {
    case "Double Brick":
      buildRate = 1290 * n2;
      break;
    case "Brick Veneer":
      buildRate = 1160 * n2;
      break;
    case "Weather Board":
      buildRate = 950 * n2;
      break;
    case "Other":
      buildRate = 900 * n2;
      break;
    default:
      break;
  }
  total = buildRate + (n3 * 1) + (n4 * 1) + (n5 * 1) + (n6 * 1) + (n7 * 1);
  return total;
}

<table>
  <tr>
    <td><label for="Construction">CONSTRUCTION TYPE:</label>
    </td>
    <td>
      <select name="Construction" id="Construction">
        <option value="Double Brick">Double Brick</option>
        <option value="Brick Veneer">Brick Veneer</option>
        <option value="Weather Board">Weather Board</option>
        <option value="Other">Other</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>AREA OF HOME [SQ METRES]:
    </td>
    <td> <input type="number" name="Area" id="Area" /></td>
  </tr>
  <tr>
    <td>GARAGE, DRIVEWAYS:
    </td>
    <td>$<input type="number" name="Number1" id="Number1" /></td>
  </tr>
  <tr>
    <td>FENCES, GATES:
    </td>
    <td>$<input type="number" name="Number2" id="Number2" /></td>
  </tr>
  <tr>
    <td>INGROUND SWIMMING POOL:
    </td>
    <td>$<input type="number" name="Number3" id="Number3" /></td>
  </tr>
  <tr>
    <td>ARCHITECTS FEES, DEBRIS REMOVAL:
    </td>
    <td>$<input type="number" name="Number4" id="Number4" /></td>
  </tr>
  <tr>
    <td>PERMANENT FIXTURES - SHEDS AIR CONDITIONING UNIS:
    </td>
    <td>$<input type="number" name="Number5" id="Number5" /></td>
  </tr>
  <tr>
    <td>COST OF CONSTRUCTION: </td>
    <td>$<input type="number" name="Cost" id="Cost" /></td>
  </tr>
</table>
<input type="button" value="Calculate" onclick="document.getElementById('Cost').value = Calculate() " />



<input type="reset" value="&nbsp; Clear &nbsp; " onclick="location.reload();" />