如何根据患者体重值动态更改文本框中的信息？答案

【问题标题】：How do I change information in textboxes depending on patient weight value dynamically?如何根据患者体重值动态更改文本框中的信息？
【发布时间】：2021-07-06 14:15:39
【问题描述】：

我现在已经多次尝试在 HTML 中同时使用事件监听器、onchange 和 oninput 函数调用，并且在谷歌上搜索了好几天，但没有找到解决问题的方法。我试图在函数末尾调用 return ，但由于它无限而出错。我是使用 JS 的程序员的初学者，所以我现在向你们寻求帮助。

我想要做的是根据权重输入更新文本框。我有一个函数（estVentilasjon），其中包含许多“else ifs”来确定文本框的数据输入应该是什么，具体取决于患者的体重。但是，当我尝试实时更改患者体重 (id vekt) 时，它不会重新运行该功能，并且只有在我刷新页面时才会起作用。

如果有人能指出我正确的方向，将不胜感激。

const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function ageCalculate() {
  let today = new Date();
  let inputDate = new Date(document.getElementById("fdato").value);
  let birthMonth, birthDate, birthYear;
  let birthDetails = {
    date: inputDate.getDate(),
    month: inputDate.getMonth() + 1,
    year: inputDate.getFullYear()
  };
  let currentYear = today.getFullYear();
  let currentMonth = today.getMonth() + 1;
  let currentDate = today.getDate();

  leapChecker(currentYear);

  if (
    birthDetails.year > currentYear ||
    (birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
    (birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)
  ) {
    displayResult("-", "-", "-");
    return;
  }

  birthYear = currentYear - birthDetails.year;

  if (currentMonth >= birthDetails.month) {
    birthMonth = currentMonth - birthDetails.month;
  } else {
    birthYear--;
    birthMonth = 12 + currentMonth - birthDetails.month;
  }

  if (currentDate >= birthDetails.date) {
    birthDate = currentDate - birthDetails.date;
  } else {
    birthMonth--;
    let days = months[currentMonth - 2];
    birthDate = days + currentDate - birthDetails.date;
    if (birthMonth < 0) {
      birthMonth = 11;
      birthYear--;
    }
  }
  displayResult(birthDate, birthMonth, birthYear);
  estWeight(birthDate, birthMonth, birthYear);
}

function displayResult(bDate, bMonth, bYear) {
  if (bYear >= 1) {
    document.getElementById("alder").value = bYear + " år " + bMonth + " måneder";
  } else if (bMonth >= 1) {
    document.getElementById("alder").value = bMonth + " måneder";
  } else {
    document.getElementById("alder").value = bDate + " dager";
  }
}

function leapChecker(year) {
  if (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)) {
    months[1] = 29;
  } else {
    months[1] = 28;
  }
}

function estWeight(bDate, bMonth, bYear) {
  if (bYear >= 5) {
    document.getElementById("estvekt").value = 4 * bYear;
  } else if (bYear >= 1) {
    document.getElementById("estvekt").value = 2 * bYear + 5;
  } else if (bYear <= 1) {
    document.getElementById("estvekt").value = bMonth + 9 / 2;
  }
}

var vektventilasjon = document.getElementById("vekt").value;

function estVentilasjon() {
  if (vektventilasjon >= 2 && vektventilasjon < 3) {
    document.getElementById("frekv").value = "35";
    document.getElementById("minvol").value = "525";
    document.getElementById("tv").value = "15";
  } else if (vektventilasjon >= 3 && vektventilasjon < 4) {
    document.getElementById("frekv").value = "35";
    document.getElementById("minvol").value = "700";
    document.getElementById("tv").value = "20";
  } else if (vektventilasjon >= 4 && vektventilasjon < 5) {
    document.getElementById("frekv").value = "34";
    document.getElementById("minvol").value = "1020";
    document.getElementById("tv").value = "30";
  } else if (vektventilasjon >= 5 && vektventilasjon < 6) {
    document.getElementById("frekv").value = "33";
    document.getElementById("minvol").value = "1155";
    document.getElementById("tv").value = "35";
  } else if (vektventilasjon >= 6 && vektventilasjon < 7) {
    document.getElementById("frekv").value = "33";
    document.getElementById("minvol").value = "1485";
    document.getElementById("tv").value = "45";
  } else if (vektventilasjon >= 7 && vektventilasjon < 8) {
    document.getElementById("frekv").value = "32";
    document.getElementById("minvol").value = "1600";
    document.getElementById("tv").value = "50";
  } else if (vektventilasjon >= 8 && vektventilasjon < 9) {
    document.getElementById("frekv").value = "31";
    document.getElementById("minvol").value = "1860";
    document.getElementById("tv").value = "60";
  } else if (vektventilasjon >= 9 && vektventilasjon < 10) {
    document.getElementById("frekv").value = "31";
    document.getElementById("minvol").value = "2015";
    document.getElementById("tv").value = "65";
  } else if (vektventilasjon >= 10 && vektventilasjon < 12) {
    document.getElementById("frekv").value = "30";
    document.getElementById("minvol").value = "2250";
    document.getElementById("tv").value = "75";
  } else if (vektventilasjon >= 12 && vektventilasjon < 14) {
    document.getElementById("frekv").value = "29";
    document.getElementById("minvol").value = "2610";
    document.getElementById("tv").value = "90";
  } else if (vektventilasjon >= 14 && vektventilasjon < 16) {
    document.getElementById("frekv").value = "27";
    document.getElementById("minvol").value = "2700";
    document.getElementById("tv").value = "100";
  }
}


function callCalculations() {
  ageCalculate();
  estWeight();
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.4fr 1.2fr 1.4fr;
  grid-auto-rows: 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas: "Blank Content Inputinfo" "Blank Content Suggested";
}

.Content {
  grid-area: Content;
  text-align: center;
  border-radius: 15px;
  border: 1px solid #000000;
  padding: 10px;
  width: auto;
  height: 200px;
}

.Inputinfo {
  grid-area: Inputinfo;
  border-radius: 15px;
  border: 1px solid #000000;
  padding: 10px;
  width: 250px;
  height: auto;
}

.Suggested {
  grid-area: Suggested;
  border-radius: 15px;
  border: 1px solid #000000;
  padding: 10px;
  width: 250px;
  height: 50px;
}

.Header {
  grid-area: Header;
}

h1 {
  color: white;
  font-weight: bold;
  text-align: center;
}

html,
header,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}


/* Style the top navigation bar */

.topnav {
  background-image: linear-gradient(to right, rgba(21, 42, 67, 1), rgba(88, 159, 209, 1));
  height: auto;
  overflow: hidden;
}

i {
  vertical-align: middle;
}

label {
  font-size: 12px;
  display: inline-block;
  float: justify;
  clear: left;
  width: 125px;
  text-align: justify;
  margin: 2px;
}

input {
  font-size: 12px;
  display: inline-block;
  float: justify;
  text-align: left;
  vertical-align: top;
  position: relative;
  width: 100px;
  margin: 2px;
}


/* Style the footer */

.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>

<head>
  <title>Barneanestesi legemiddelkalkulator</title>
  <link type="text/css" rel="stylesheet" href="./styles.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>

  <div class="topnav">
    <h1>Velkommen til barneanestesi legemiddelkalkulatoren!</h1>
  </div>
  <br>

  <div class="container">
    <div class="Content">
      <span class="Ventilasjon">
      <p><b><u>Ventilasjon</u></b></p>
      <label for="tv"><b>Tidalvolum:</b></label>
      <input type="text" id="tv" name="tv"<br>
      <label for="frekv"><b>Frekvens:</b></label>
      <input type="text" id="frekv" name="frekv"><br>
      <label for="minvol"><b>Min volum:</b></label>
      <input type="text" id="minvol" name="minvol"><br>
      </span>
    </div>
    <div class="Inputinfo">
      <label for="gutt"><i class="material-icons">male</i><b>Gutt</b></label>
      <input type="radio" id="gutt" name="gender" value="Gutt">
      <label for="jente"><i class="material-icons">female</i><b>Jente</b></label>
      <input type="radio" id="jente" name="gender" value="Jente">
      <label for="initialer"><i class="material-icons">assignment</i><b>Initialer:</b></label>
      <input type="text" id="initialer" name="initialer"><br>
      <label for="fdato"><i class="material-icons">cake</i><b>Fødselsdato:</b></label>
      <input type="date" id="fdato" name="fdato" oninput="callCalculations()" required><br>
      <label for="diagnose"><i class="material-icons">search</i><b>Diagnose:</b></label>
      <input type="text" id="diagnose" name="diagnose"><br>
      <label for="operasjon"><i class="material-icons">local_hospital</i><b>Operasjon:</b></label>
      <input type="text" id="operasjon" name="operasjon"><br>
      <label for="hoyde"><i class="material-icons">person_outline</i><b>Høyde (cm):</b></label>
      <input type="text" id="hoyde" name="hoyde"><br>
      <label for="Vekt"><i class="material-icons">monitor_weight</i><b>Vekt (kg):</b></label>
      <input type="text" id="vekt" name="vekt" value="" oninput="estVentilasjon()">
      <label for="Faste"><i class="material-icons">fastfood</i><b>Faste fra:</b></label>
      <input type="time" id="faste" name="faste">
    </div><br>
    <div class="Suggested">
      <label for="alder"><i class="material-icons">cake</i><b>Alder:</b></label>
      <input type="text" id="alder" name="alder">
      <label for="estvekt"><i class="material-icons">monitor_weight</i><b>Estimert vekt:</b></label>
      <input type="text" id="estvekt" name="estvekt">
    </div>
  </div>

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

  <div class="footer">

  </div>

【问题讨论】：

您需要在函数in中检索输入的值：在任何处理程序运行之前检索它并且永远不要更新它。
我认为使用“document.getElementById”在用户在文本框中输入值后检索值，因为在 HTML 中调用函数是 oninput。我是否需要在我的函数之前创建一个事件监听器，而不是调用事件监听器，然后调用函数？我对 JS 很陌生，所以如果你不介意的话，我可能需要在正确的方向上多一点推动。非常感谢答案！
除了@DaveNewton 评论我想补充的内容之外，您的代码还有很多 DRY（不要重复自己）问题。例如。 document.getElementById("...") 行多次出现，并且可以在之前 if .. else if() ... else if() ... 部分进行评估。
@CarstenMassmann 可能有，但我对编程艺术还不太了解。我想我可以将信息存储在各种数组中，但我不知道如何。所以我的代码就是我知道如何去做的方式。您对进一步阅读有什么建议吗？或者我应该调查什么主题才能以更好的实践方式做到这一点？感谢所有帮助！
前段时间我回答了一个类似的问题，也许这会给你一些启发？ stackoverflow.com/a/68071020/2610061

标签： javascript html

【解决方案1】：

document.getElementById(xxx).value 获取调用时的值。

您在运行estVentilasjon 时需要它的值：将检索值的行向下移动几行，使其成为estVentilasjon 中的第一行。

我没有看任何其他代码，所以我不知道其余的是否正确。

const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

function ageCalculate() {
  let today = new Date();
  let inputDate = new Date(document.getElementById("fdato").value);
  let birthMonth, birthDate, birthYear;
  let birthDetails = {
    date: inputDate.getDate(),
    month: inputDate.getMonth() + 1,
    year: inputDate.getFullYear()
  };
  let currentYear = today.getFullYear();
  let currentMonth = today.getMonth() + 1;
  let currentDate = today.getDate();

  leapChecker(currentYear);

  if (
    birthDetails.year > currentYear ||
    (birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
    (birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)
  ) {
    displayResult("-", "-", "-");
    return;
  }

  birthYear = currentYear - birthDetails.year;

  if (currentMonth >= birthDetails.month) {
    birthMonth = currentMonth - birthDetails.month;
  } else {
    birthYear--;
    birthMonth = 12 + currentMonth - birthDetails.month;
  }

  if (currentDate >= birthDetails.date) {
    birthDate = currentDate - birthDetails.date;
  } else {
    birthMonth--;
    let days = months[currentMonth - 2];
    birthDate = days + currentDate - birthDetails.date;
    if (birthMonth < 0) {
      birthMonth = 11;
      birthYear--;
    }
  }
  displayResult(birthDate, birthMonth, birthYear);
  estWeight(birthDate, birthMonth, birthYear);
}

function displayResult(bDate, bMonth, bYear) {
  if (bYear >= 1) {
    document.getElementById("alder").value = bYear + " år " + bMonth + " måneder";
  } else if (bMonth >= 1) {
    document.getElementById("alder").value = bMonth + " måneder";
  } else {
    document.getElementById("alder").value = bDate + " dager";
  }
}

function leapChecker(year) {
  if (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)) {
    months[1] = 29;
  } else {
    months[1] = 28;
  }
}

function estWeight(bDate, bMonth, bYear) {
  if (bYear >= 5) {
    document.getElementById("estvekt").value = 4 * bYear;
  } else if (bYear >= 1) {
    document.getElementById("estvekt").value = 2 * bYear + 5;
  } else if (bYear <= 1) {
    document.getElementById("estvekt").value = bMonth + 9 / 2;
  }
}


function estVentilasjon() {
var vektventilasjon = document.getElementById("vekt").value;

  if (vektventilasjon >= 2 && vektventilasjon < 3) {
    document.getElementById("frekv").value = "35";
    document.getElementById("minvol").value = "525";
    document.getElementById("tv").value = "15";
  } else if (vektventilasjon >= 3 && vektventilasjon < 4) {
    document.getElementById("frekv").value = "35";
    document.getElementById("minvol").value = "700";
    document.getElementById("tv").value = "20";
  } else if (vektventilasjon >= 4 && vektventilasjon < 5) {
    document.getElementById("frekv").value = "34";
    document.getElementById("minvol").value = "1020";
    document.getElementById("tv").value = "30";
  } else if (vektventilasjon >= 5 && vektventilasjon < 6) {
    document.getElementById("frekv").value = "33";
    document.getElementById("minvol").value = "1155";
    document.getElementById("tv").value = "35";
  } else if (vektventilasjon >= 6 && vektventilasjon < 7) {
    document.getElementById("frekv").value = "33";
    document.getElementById("minvol").value = "1485";
    document.getElementById("tv").value = "45";
  } else if (vektventilasjon >= 7 && vektventilasjon < 8) {
    document.getElementById("frekv").value = "32";
    document.getElementById("minvol").value = "1600";
    document.getElementById("tv").value = "50";
  } else if (vektventilasjon >= 8 && vektventilasjon < 9) {
    document.getElementById("frekv").value = "31";
    document.getElementById("minvol").value = "1860";
    document.getElementById("tv").value = "60";
  } else if (vektventilasjon >= 9 && vektventilasjon < 10) {
    document.getElementById("frekv").value = "31";
    document.getElementById("minvol").value = "2015";
    document.getElementById("tv").value = "65";
  } else if (vektventilasjon >= 10 && vektventilasjon < 12) {
    document.getElementById("frekv").value = "30";
    document.getElementById("minvol").value = "2250";
    document.getElementById("tv").value = "75";
  } else if (vektventilasjon >= 12 && vektventilasjon < 14) {
    document.getElementById("frekv").value = "29";
    document.getElementById("minvol").value = "2610";
    document.getElementById("tv").value = "90";
  } else if (vektventilasjon >= 14 && vektventilasjon < 16) {
    document.getElementById("frekv").value = "27";
    document.getElementById("minvol").value = "2700";
    document.getElementById("tv").value = "100";
  }
}


function callCalculations() {
  ageCalculate();
  estWeight();
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.4fr 1.2fr 1.4fr;
  grid-auto-rows: 1fr;
  gap: 5px 5px;
  grid-auto-flow: row;
  grid-template-areas: "Blank Content Inputinfo" "Blank Content Suggested";
}

.Content {
  grid-area: Content;
  text-align: center;
  border-radius: 15px;
  border: 1px solid #000000;
  padding: 10px;
  width: auto;
  height: 200px;
}

.Inputinfo {
  grid-area: Inputinfo;
  border-radius: 15px;
  border: 1px solid #000000;
  padding: 10px;
  width: 250px;
  height: auto;
}

.Suggested {
  grid-area: Suggested;
  border-radius: 15px;
  border: 1px solid #000000;
  padding: 10px;
  width: 250px;
  height: 50px;
}

.Header {
  grid-area: Header;
}

h1 {
  color: white;
  font-weight: bold;
  text-align: center;
}

html,
header,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}


/* Style the top navigation bar */

.topnav {
  background-image: linear-gradient(to right, rgba(21, 42, 67, 1), rgba(88, 159, 209, 1));
  height: auto;
  overflow: hidden;
}

i {
  vertical-align: middle;
}

label {
  font-size: 12px;
  display: inline-block;
  float: justify;
  clear: left;
  width: 125px;
  text-align: justify;
  margin: 2px;
}

input {
  font-size: 12px;
  display: inline-block;
  float: justify;
  text-align: left;
  vertical-align: top;
  position: relative;
  width: 100px;
  margin: 2px;
}


/* Style the footer */

.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<html>

<head>
  <title>Barneanestesi legemiddelkalkulator</title>
  <link type="text/css" rel="stylesheet" href="./styles.css" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>

  <div class="topnav">
    <h1>Velkommen til barneanestesi legemiddelkalkulatoren!</h1>
  </div>
  <br>

  <div class="container">
    <div class="Content">
      <span class="Ventilasjon">
      <p><b><u>Ventilasjon</u></b></p>
      <label for="tv"><b>Tidalvolum:</b></label>
      <input type="text" id="tv" name="tv"<br>
      <label for="frekv"><b>Frekvens:</b></label>
      <input type="text" id="frekv" name="frekv"><br>
      <label for="minvol"><b>Min volum:</b></label>
      <input type="text" id="minvol" name="minvol"><br>
      </span>
    </div>
    <div class="Inputinfo">
      <label for="gutt"><i class="material-icons">male</i><b>Gutt</b></label>
      <input type="radio" id="gutt" name="gender" value="Gutt">
      <label for="jente"><i class="material-icons">female</i><b>Jente</b></label>
      <input type="radio" id="jente" name="gender" value="Jente">
      <label for="initialer"><i class="material-icons">assignment</i><b>Initialer:</b></label>
      <input type="text" id="initialer" name="initialer"><br>
      <label for="fdato"><i class="material-icons">cake</i><b>Fødselsdato:</b></label>
      <input type="date" id="fdato" name="fdato" oninput="callCalculations()" required><br>
      <label for="diagnose"><i class="material-icons">search</i><b>Diagnose:</b></label>
      <input type="text" id="diagnose" name="diagnose"><br>
      <label for="operasjon"><i class="material-icons">local_hospital</i><b>Operasjon:</b></label>
      <input type="text" id="operasjon" name="operasjon"><br>
      <label for="hoyde"><i class="material-icons">person_outline</i><b>Høyde (cm):</b></label>
      <input type="text" id="hoyde" name="hoyde"><br>
      <label for="Vekt"><i class="material-icons">monitor_weight</i><b>Vekt (kg):</b></label>
      <input type="text" id="vekt" name="vekt" value="" oninput="estVentilasjon()">
      <label for="Faste"><i class="material-icons">fastfood</i><b>Faste fra:</b></label>
      <input type="time" id="faste" name="faste">
    </div><br>
    <div class="Suggested">
      <label for="alder"><i class="material-icons">cake</i><b>Alder:</b></label>
      <input type="text" id="alder" name="alder">
      <label for="estvekt"><i class="material-icons">monitor_weight</i><b>Estimert vekt:</b></label>
      <input type="text" id="estvekt" name="estvekt">
    </div>
  </div>

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

  <div class="footer">

  </div>

无关：最好将此类问题减少到最低限度。最后，这是一个文本输入和一个事件处理程序，可以仅以几行 HTML 和 JS 的形式发布。

减少问题有助于人们理解实际问题——这里有很多代码，几乎所有代码都与根本问题完全无关。

FWIW，我解决问题的方法是首先查看您在帖子中调用的事件处理程序。当我看到它正在检查其他地方的值集时，我有理由确定它要么早早地获取了值，要么不太可能是一些奇怪的竞争条件。

然后我在代码中搜索了值的设置位置，发现它是在文档加载时设置的，或者更糟的是，它只是与 JS 的其余部分内联（并且不必搜索很远，因为它就在那里；）

你可以做的一件事来跟踪这样的事情是对你认为应该在事件处理程序中更改的值进行健全性检查console.log。一旦你看到它永远不会改变，退后一步，试着找出原因。使用小而干净的最小示例几乎总是更容易。

【讨论】：

多么令人尴尬，如此简单。感谢您花时间进一步解释它并向我展示如何做到这一点。我不知道 var 应该在函数内部。
@Veritaas 我添加了一些额外的提示/等。关于追踪问题和提出一般性问题——乐于提供帮助。