Question

单击该按钮时，仅显示第一个结果，但按钮和第二个结果消失。显示以下错误＆＃34;未捕获TypeError：无法设置属性＆＃39;值＆＃39; of null＆＃34; 我怎么能避免这个？

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css">
<meta charset="utf-8">
<body>


<script src="formBuilder.js"></script>

<label for="Volumenstrom">Volumenstrom: </label>
<input type="number" id="Volumenstrom" name="Volumenstrom">

<label for="Betriebsdruck">Betriebsdruck: </label>
<input type="number" id="Betriebsdruck" name="Betriebsdruck">

<label for="Betriebstemperatur">Betriebstemperatur: </label>
<input type="number" id="Betriebstemperatur" name="Betriebstemperatur">


<h1> Berechnung für Gase im Normzustand </h1>
<form>
<h2> Ergebnis der Berechnung </h2>

<label for="eqVolumenstrom">equiv. Wasservolumenstrom: </label>
<output name"eqVolumenstrom" id="eqVolumenstrom">

<label for="Druckverlust">Druckverlust: </label>
<output name="Druckverlust" id="Druckverlust">

<button onclick="wasservolumen()"; >Berechnen</button>

</form>
</body>
</html>

爪哇

function wasservolumen() {
     var volumen = parseInt(document.getElementById("Volumenstrom").value);
      var druck = parseInt(document.getElementById("Betriebsdruck").value);
      var temperatur = parseInt(document.getElementById("Betriebstemperatur").value);
      var wvolumen = volumen + druck + temperatur;
      var dverlust = druck * temperatur;
      console.log(volumen);
      console.log(druck);
      console.log(temperatur);
      console.log(wvolumen);
      console.log(dverlust);
      document.getElementById("eqVolumenstrom").value = wvolumen;
      document.getElementById("Druckverlust").value = dverlust;
    }

Answer 1

在这里移动分号

<button onclick="wasservolumen();">Berechnen</button>

这个html元素name属性没有=

<output name"eqVolumenstrom" id="eqVolumenstrom"></output>

到

<output name="eqVolumenstrom" id="eqVolumenstrom"></output>

将表单方法更改为发布<form method="post">

Answer 2

我更改了HTML代码

<label for="eqVolumenstrom">equiv. Wasservolumenstrom: </label>
<output name"eqVolumenstrom" id="eqVolumenstrom">

<label for="Druckverlust">Druckverlust: </label>
<output name="Druckverlust" id="Druckverlust">

到

<p>
<label for="eqVolumenstrom">equiv. Wasservolumenstrom: </label>
<output type="number" name="eqVolumenstrom" id="eqVolumenstrom">
</p>

<p>
<label for="Druckverlust">Druckverlust: </label>
<output type="number" name="Druckverlust" id="Druckverlust">
</p>

这会使var dverlust达到一个毫秒并且按钮不会消失。但此后表格空白。

单击时，输出字段和按钮消失

2 个答案: