JavaScript获取输入表单并更改HTML表单

h6my8fg2 于 2023-10-14 发布在 Java

关注(0)|答案(2)|浏览(154)

我有一套定制的程序，我维护客户的网站。我们有一个转换能量的过程，用于特定的校准。我们取一个阅读，乘以一个偏移量，然后将结果输入测试表格。我们的网页只有有限的功能，所以我试图使用HTML形式以及JavaScript的计算。
下面是我所做的，但由于某种原因，结果没有显示在每个输入的读数的右侧。我只会写一点代码，所以我可能错过了一些明显的东西。

<!DOCTYPE html>
<html>
<body>

<h2>OAI Offset Caclculation</h2>
<script>
    function oaicalc(offset, reading1, reading2, reading3, reading4, reading5) {
//value near 1.000  
        var offset = parseFloat(document.getElementById('offset').value); 
//Energy value in mj 200.0> value <1.000
        var r1 = parseFloat(document.getElementById('reading1').value); 
        var r2 = parseFloat(document.getElementById('reading2').value);
        var r3 = parseFloat(document.getElementById('reading3').value);
        var r4 = parseFloat(document.getElementById('reading4').value);
        var r5 = parseFloat(document.getElementById('reading5').value);

//Corrected Energy Values
        var o1 = offset * r1;
        var o2 = offset * r2;
        var o3 = offset * r3;
        var o4 = offset * r4;
        var o5 = offset * r5;

//Chage HTML form Output
        document.getElementById('output1').innerHTML = o1;
        document.getElementById('output2').innerHTML = o2;
        document.getElementById('output3').innerHTML = o3;
        document.getElementById('output4').innerHTML = o4;
        document.getElementById('output5').innerHTML = o5;
    }
</script>

<form id="oaioffsetform">
  <label for="offset">Offset:</label><br>
  <input type="number" id="offset" name="offset" value="0">
  <br>
  <br>
  <label for="reading1">OAI Reading 1:</label><br>
  <input type="number" id="reading1" name="reading1" value="0" oninput="oaicalc()">:  <output name="output1">0</output>
  <br>
  <br>
  <label for="reading2">OAI Reading 2:</label><br>
  <input type="number" id="reading2" name="reading2" value="0" oninput="oaicalc()">:  <output name="output2">0</output>
  <br>
  <br>
  <label for="reading3">OAI Reading 3:</label><br>
  <input type="number" id="reading3" name="reading3" value="0" oninput="oaicalc()">:  <output name="output3">0</output>
  <br>
  <br>
  <label for="reading4">OAI Reading 4:</label><br>
  <input type="number" id="reading4" name="reading4" value="0" oninput="oaicalc()">:  <output name="output4">0</output>
  <br>
  <br>
  <label for="reading5">OAI Reading 5:</label><br>
  <input type="number" id="reading5" name="reading5" value="0" oninput="oaicalc()">:  <output name="output5">0</output><br><br>
</form> 

</body>
</html>

Html

来源：https://stackoverflow.com/questions/77246048/javascript-taking-input-form-and-changing-html-forms

2条答案

按热度按时间

vaqhlq811#

在这里，我为表单上的输入创建了一个通用事件侦听器。input元素是事件对象上的目标。您不需要解析输入的值，因为它们的类型是number。
如果更新了偏移量，则需要遍历所有输入元素以计算新值。
一般性意见：对form和input元素都使用name属性。我使它很容易找到正确的元素。

document.forms.oaioffsetform.addEventListener('input', e => {
  let form = e.target.form;
  if (e.target.dataset.id) {
    let outvalue = e.target.value * form.offset.value;
    form[`output${e.target.dataset.id}`].value = outvalue;
  }
  if (e.target.name == 'offset') {
    [...form.readings.querySelectorAll('input')].forEach(input => {
      let outvalue = input.value * form.offset.value;
      form[`output${input.dataset.id}`].value = outvalue;
    });
  }
});

fieldset {
  border: none;
  padding: 0;
}

<h2>OAI Offset Caclculation</h2>
<form name="oaioffsetform">
  <label for="offset">Offset:</label><br>
  <input type="number" name="offset" value="0">
  <br>
  <br>
  <fieldset name="readings">
    <label for="reading1">OAI Reading 1:</label><br>
    <input type="number" name="reading1" data-id="1" value="0">: <output name="output1">0</output>
    <br>
    <br>
    <label for="reading2">OAI Reading 2:</label><br>
    <input type="number" name="reading2" data-id="2" value="0">: <output name="output2">0</output>
    <br>
    <br>
    <label for="reading3">OAI Reading 3:</label><br>
    <input type="number" name="reading3" data-id="3" value="0">: <output name="output3">0</output>
    <br>
    <br>
    <label for="reading4">OAI Reading 4:</label><br>
    <input type="number" name="reading4" data-id="4" value="0">: <output name="output4">0</output>
    <br>
    <br>
    <label for="reading5">OAI Reading 5:</label><br>
    <input type="number" name="reading5" data-id="5" value="0">: <output name="output5">0</output><br><br>
  </fieldset>
</form>

赞(0）回复(0）举报 2023-10-14

ifsvaxew2#

正如在注解中提到的，您的表单字段具有name属性，但您试图访问它们，就好像它们具有id属性一样。您可以使用.querySelector()通过name属性访问元素。您确实应该努力避免在元素上使用id属性，因为它们的使用会使解决方案变得脆弱，并导致应用程序向下扩展的问题。在大多数情况下，您可以完全避免它们。
您的HTML不正确，原因如下：

您的文档中没有<head>元素。
文档中的第一个标题应该是h1，只有当您试图定义该h1的子部分时，才会使用h2。不要使用标题元素，因为它们会影响文本的样式，你可以使用CSS来改变样式。标题用于创建文档结构，供那些依赖辅助技术（如屏幕阅读器）的人使用，以帮助他们导航页面内容。
您不应该使用br元素来创建页面上的视觉对齐。br元素仅用于分解必须出现在下一行的块级内容（即段落，div等）。它们不应用于向页面添加白色垂直空间。再一次，使用CSS。
您应该将JavaScript与HTML分开，因此不要在HTML中使用像oninput这样的内联事件属性。相反，使用.addEventListener()在JavaScript中进行事件绑定。

应尽可能避免使用.innerHTML，因为使用它会对安全和性能产生影响。由于您正在处理的数据不包含任何需要解析的HTML，因此应该使用.textContent。
请参见下面的更新代码：

div { margin-top:.5em; }

<!DOCTYPE html>
<html>
<head>
  <title>Page title here</title>
</head>
<body>

<h1>OAI Offset Calculation</h1>

<form>
  <div>
    <!-- An alternate way to use <label> elements is to wrap them around the element
         that they are a label for. This way you don't need any ID's. -->
    <label>Offset:<br>
      <input type="number" name="offset" value="0">
    </label>
  </div>
  <div>
    <label>OAI Reading 1:<br>
      <input type="number" name="reading1" value="0">
    </label>
    :  <output name="output1">0</output>
  </div>
  <div>
    <label>OAI Reading 2:<br>
      <input type="number" name="reading2" value="0">
    </label>
    :  <output name="output2">0</output>
  </div>
  <div>
   <label>OAI Reading 3:<br>
     <input type="number" name="reading3" value="0">
   </label>
   :  <output name="output3">0</output>
  </div>
  <div>
    <label>OAI Reading 4:<br>
      <input type="number" name="reading4" value="0">   
    </label>
    :  <output name="output4">0</output> 
  </div>

  <div>
    <label>OAI Reading 5:<br>
      <input type="number" name="reading5" value="0">
    </label>
    :  <output name="output5">0</output>
  </div>
</form> 

<!-- Your <script> element should be the last thing in the <body> so that
     by the time the HTML parser reaches it, all the HTML elements will
     have been parsed into memory and will be available for use. -->
<script>
  // Use const on element references
  // Get all your element references just once rather than every time the function runs
  // Don't set variables to the property of an element because if you ever want a different
  // proeprty value, you'd need to scan the document again for the same element.
  const r1 = document.querySelector("[name='reading1']"); 
  const r2 = document.querySelector("[name='reading2']");
  const r3 = document.querySelector("[name='reading3']");
  const r4 = document.querySelector("[name='reading4']");
  const r5 = document.querySelector("[name='reading5']");
  const offset = document.querySelector("[name='offset']"); 
  const o1 = document.querySelector("[name='output1']");
  const o2 = document.querySelector("[name='output2']");
  const o3 = document.querySelector("[name='output3']");
  const o4 = document.querySelector("[name='output4']");
  const o5 = document.querySelector("[name='output5']");  
  
  // Set your events up in JavaScript, not HTML
  r1.addEventListener("input", oaicalc);
  r2.addEventListener("input", oaicalc);
  r3.addEventListener("input", oaicalc);
  r4.addEventListener("input", oaicalc);
  r5.addEventListener("input", oaicalc);  

  // You aren't passing anything to this function and your elements are already
  // referenced, so you don't need any function arguments.
  function oaicalc() {
    // Now you only need to get the values and parse them
    let offsetValue = parseFloat(offset.value); 

    // Use .textContent when there is no HTML in the string you are working with
    o1.textContent = offsetValue * parseFloat(r1.value);
    o2.textContent = offsetValue * parseFloat(r2.value);
    o3.textContent = offsetValue * parseFloat(r3.value);
    o4.textContent = offsetValue * parseFloat(r4.value);
    o5.textContent = offsetValue * parseFloat(r5.value);   
  }
</script>
</body>
</html>

赞(0）回复(0）举报 2023-10-14

我来回答

JavaScript获取输入表单并更改HTML表单

2条答案

相关问题

热门标签

最新问答