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

标签 javascript html css

当点击按钮时,只显示第一个结果,按钮和第二个结果消失。 显示以下错误“Uncaught TypeError: Cannot set property 'value' of null” 我怎样才能避免这种情况?

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>

Java

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;
    }

最佳答案

把分号移到这里

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

这个html元素的name属性也没有=

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

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

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

关于javascript - 单击时输出字段和按钮消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42564325/

相关文章:

css - 如何停止 ReSharper 删除 css 属性后的空格

html - CSS 文件未从 AWS S3 加载

javascript - Foundation 6.4 app.js 通过导入精心挑选组件

在 google chrome v69 中组合 "transform"和网格单元格边框时出现 CSS 问题

javascript - Reactjs 并将 onclick 状态推送回父 shell

javascript - 如何实现语法高亮?

html - 如何在 Shiny 中指向特定的 HTML anchor

javascript - 无法将我的 css 文件正确链接到标题部分

javascript - 来自数据库的正则表达式在 Angular Directive(指令) ng-pattern 中不起作用

javascript - 违反物理学的基本视差效果