Question

我正在尝试编写一个脚本，动态计算用户可编辑的4个输入的总数。

我在输入值上使用 parseFloat 时遇到了一些麻烦。它们返回NaN。

到目前为止，我尝试使用parseInt代替parseFloat，使用.val()代替.value，使用name属性代替{{1}我不记得的那些属性和其他一些东西。

我还没有看到类似问题的任何其他答案，这对我有用，所以如果你不介意看看我的代码，看看我哪里出错了，我会很感激。谢谢！

id

Answer 1

您提供的是单元格（<td>代码）id属性，而不是实际的input字段。

将id属性移至input元素可解决此问题。

此外，由于您将重复调用calc函数，因此只扫描文档一次以获取对要反复使用的元素的引用会更有意义。

最后，最好不要将HTML元素挂钩到HTML函数中，这些函数应该在HTML本身发生事件时触发。您可以在我的代码段中看到我是如何从HTML中删除它并将其放入JavaScript中的。

// Wait until the DOM is fully loaded
window.addEventListener("DOMContentLoaded", function(){
  
   // Declare and initialze variable references to needed elements:
   var wElement = document.getElementById("rent");
   var xElement = document.getElementById("food");
   var yElement = document.getElementById("ent");
   var zElement = document.getElementById("trans");

   // Wire elements to event handlers:
   wElement.addEventListener("change", calc);
   xElement.addEventListener("change", calc);
   yElement.addEventListener("change", calc);
   zElement.addEventListener("change", calc);

   // Event handler:
   function calc() {
         var w = parseFloat(wElement.value);
         var x = parseFloat(xElement.value);
         var y = parseFloat(yElement.value);
         var z = parseFloat(zElement.value);
         
         document.getElementById("total").textContent = w + x + y + z;
   } 
});

<table width = "250" border="1">
      <tr>
        <th align="left">A</th>
        <th align="left">B</th>
      </tr>
      <tr>
        <td>Rent</td>
        <td  align="right">
           <input type="text" id="rent" size="7" value="0"></td>
      </tr>
      <tr>
        <td>Food</td>
        <td  align="right">
           <input type="text" id="food" size="7" value="0"></td>
      </tr>
      <tr>
        <td>Entertainment</td>
        <td  align="right">
           <input type="text" id="ent" size="7" value="0"></td>
      </tr>
      <tr>
        <td>Transportation</td>
        <td  align="right">
           <input type="text" id="trans" size="7" value="0"></td>
      </tr>
      <tr>
        <th align="left">Total</th>
        <td id="total" align="right"></td>
      </tr>
   </table>

Answer 2

当你应该定位那些List<String> filteredNames = processNames(s -> s.filter(n -> n.startsWith("A")));内的输入时，你试图得到td的值，所以你可以使用：

td

希望这有帮助。

var w = parseFloat(document.querySelector("#rent input").value);
var x = parseFloat(document.querySelector("#food input").value);
var y = parseFloat(document.querySelector("#ent input").value);
var z = parseFloat(document.querySelector("#trans input").value);

function calc() {
  var w = parseFloat(document.querySelector("#rent input").value);
  var x = parseFloat(document.querySelector("#food input").value);
  var y = parseFloat(document.querySelector("#ent input").value);
  var z = parseFloat(document.querySelector("#trans input").value);

  document.getElementById("total").innerHTML=w+x+y+z;
}

输入值的parseFloat返回NaN

2 个答案: