javascript - 无法从 Javascript 中的输入类型数字标签获取输入的数字

Question

我正在开发一个使用 Javascript 制作的计算器应用程序。但是在开始时，当我尝试在警报框中的输入类型数字标记中获取输入的数字时，我不断收到 NaN。

我的 HTML 代码:

 <div>
        <label for="forms_bill" class="forms_label">Bill</label><br>

        <div class="forms_icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="11" height="17">
            <path fill="#9EBBBD"
              d="M6.016 16.328v-1.464c1.232-.08 2.22-.444 2.964-1.092.744-.648 1.116-1.508 1.116-2.58v-.144c0-.992-.348-1.772-1.044-2.34-.696-.568-1.708-.932-3.036-1.092V4.184c.56.144 1.012.4 1.356.768.344.368.516.816.516 1.344v.288h1.824v-.432c0-.448-.088-.876-.264-1.284a3.783 3.783 0 00-.744-1.116A4.251 4.251 0 007.54 2.9a5.324 5.324 0 00-1.524-.492V.872H4.288V2.36a5.532 5.532 0 00-1.416.324c-.448.168-.84.392-1.176.672-.336.28-.604.616-.804 1.008-.2.392-.3.844-.3 1.356v.144c0 .96.316 1.708.948 2.244.632.536 1.548.884 2.748 1.044v3.912c-.704-.16-1.248-.472-1.632-.936-.384-.464-.576-1.08-.576-1.848v-.288H.256v.576c0 .464.08.924.24 1.38.16.456.404.88.732 1.272.328.392.744.728 1.248 1.008s1.108.476 1.812.588v1.512h1.728zM4.288 7.424c-.688-.128-1.164-.332-1.428-.612-.264-.28-.396-.644-.396-1.092 0-.464.176-.832.528-1.104.352-.272.784-.448 1.296-.528v3.336zm1.728 5.712V9.344c.768.128 1.328.328 1.68.6.352.272.528.688.528 1.248 0 .544-.196.984-.588 1.32-.392.336-.932.544-1.62.624z" />
          </svg>
          <input type="number" id="bill_value" class="forms_same forms_bill" placeholder="0" onfocusout="sbill()">
          <br>
        </div>
</div>

我的 JavaScript 代码:

let bill = document.getElementById('bill_value').value;
let nbill = parseInt(bill);

function sbill() {
  alert(nbill);
}

我尝试通过许多其他方法获取值，例如通过 className 、 tagName 、 getAttribute 等，我使用不同的方法来调用函数，但这些方法都不起作用。请帮助我。

Answer 1

由于您将 bill 和 nbill 放置在函数体之外，因此它们仅在页面首次加载时被评估一次。

将它们移到函数体内，以便每次调用函数时都会重新计算它们。

像这样:

function sbill() {
  let bill = document.getElementById('bill_value').value;
  let nbill = parseInt(bill);
  alert(nbill)
}

完整代码:

function sbill() {
  let bill = document.getElementById('bill_value').value;
  let nbill = parseInt(bill);
  alert(nbill)
}

<div>
    <label for="forms_bill" class="forms_label">Bill</label><br />

    <div class="forms_icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="11" height="17">
            <path
                fill="#9EBBBD"
                d="M6.016 16.328v-1.464c1.232-.08 2.22-.444 2.964-1.092.744-.648 1.116-1.508 1.116-2.58v-.144c0-.992-.348-1.772-1.044-2.34-.696-.568-1.708-.932-3.036-1.092V4.184c.56.144 1.012.4 1.356.768.344.368.516.816.516 1.344v.288h1.824v-.432c0-.448-.088-.876-.264-1.284a3.783 3.783 0 00-.744-1.116A4.251 4.251 0 007.54 2.9a5.324 5.324 0 00-1.524-.492V.872H4.288V2.36a5.532 5.532 0 00-1.416.324c-.448.168-.84.392-1.176.672-.336.28-.604.616-.804 1.008-.2.392-.3.844-.3 1.356v.144c0 .96.316 1.708.948 2.244.632.536 1.548.884 2.748 1.044v3.912c-.704-.16-1.248-.472-1.632-.936-.384-.464-.576-1.08-.576-1.848v-.288H.256v.576c0 .464.08.924.24 1.38.16.456.404.88.732 1.272.328.392.744.728 1.248 1.008s1.108.476 1.812.588v1.512h1.728zM4.288 7.424c-.688-.128-1.164-.332-1.428-.612-.264-.28-.396-.644-.396-1.092 0-.464.176-.832.528-1.104.352-.272.784-.448 1.296-.528v3.336zm1.728 5.712V9.344c.768.128 1.328.328 1.68.6.352.272.528.688.528 1.248 0 .544-.196.984-.588 1.32-.392.336-.932.544-1.62.624z"
            />
        </svg>
        <input type="number" id="bill_value" class="forms_same forms_bill" placeholder="0" onfocusout="sbill()" />
        <br />
    </div>
</div>