Question

我正在尝试根据用户输入的数字来计算价格。但是，当我尝试获取该输入字段的值时，它始终显示为0。有人可以帮助我吗？

const calculateCost = () => {
  const $input = document.getElementById('amountOfCards').value;
  const $addbutton = document.getElementById('calculatePrice');
  $addbutton.onclick = () => {
    document.getElementById('order__cost__price').innerHTML = $input * 1.5;
  }
}

calculateCost();

<label for="amountOfCards" class="order__amount"> Amount</label>

<input type="number" min="1" max="10000" step="2" value="" id="amountOfCards">

<button type="button" id="calculatePrice">Calculate</button>
<div class="order__cost">
  <p>Total:</p>
  <p id="order__cost__price"></p>
</div>

Answer 1

问题在于，您需要在用户点击之前立即获得价值。

相反，当用户单击时获取值：

const calculateCost = () => {
    const $input = document.getElementById('amountOfCards').value;
    document.getElementById('order__cost__price').innerHTML = $input * 1.5;
};
const hookupEvents = () => {
  const $addbutton = document.getElementById('calculatePrice');
  $addbutton.onclick = calculateCost;
};
hookupEvents();

Answer 2

像这样更改代码

const calculateCost = () => {
    const $addbutton = document.getElementById('calculatePrice');
    $addbutton.onclick = () => {
       const $input = document.getElementById('amountOfCards').value;
        document.getElementById('order__cost__price').innerHTML = $input*1.5;
    }
}

在用户点击之前就已经获得了价值。

Answer 3

const calculateCost = () => {
  document.getElementById('calculatePrice').onclick = () => {
    const $input = parseInt(document.getElementById('amountOfCards').value);
    document.getElementById('order__cost__price').innerHTML = $input * 1.5;
  }
}

calculateCost();

<label for="amountOfCards" class="order__amount"> Amount</label>

<input type="number" min="1" max="10000" step="2" value="" id="amountOfCards">

<button type="button" id="calculatePrice">Calculate</button>
<div class="order__cost">
  <p>Total:</p>
  <p id="order__cost__price"></p>
</div>

您的$input变量不在范围内（它的值是初始值，它是一个空字符串），在进行乘法运算之前，请将用户的输入转换为数字。

Answer 4

一种可能性是您不解析字符串，当使用var value = document.getEelementById("something").value获得输入的值时，您将得到输入内部的字符串。

因此，如果输入的是数字，它将像字符串一样返回。 “ 3”; “ 2” ... 此外，您还可以在用户单击按钮之前获得输入的值：

const calculateCost = () => {
  const $addbutton = document.getElementById('calculatePrice');
  $addbutton.onclick = () => {
    const $input = document.getElementById('amountOfCards').value;
    var aux = parseInt($input)
    document.getElementById('order__cost__price').innerHTML = (aux*1.5).toString();
   }
  }
calculateCost()

基本上，您先对其进行parseInt（），然后在将其再次放入<p>时再次将其转换为字符串。

Answer 5

之所以给出“ 0”，是因为您每次单击按钮时都没有调用函数“ calculateCost（）”。现在，它在文档加载时被触发。我已经修改了您的代码，如下所示。我希望这就是您所需要的。

const calculateCost = () => {
        const $input = document.getElementById('amountOfCards').value;
        document.getElementById('order__cost__price').innerHTML = $input * 1.5;
   
}

<label for="amountOfCards" class="order__amount"> Amount</label>

<input type="number" min="1" max="10000" step="2" value="" id="amountOfCards">
            
<button type="button" onclick="calculateCost();" id="calculatePrice">Calculate</button>
<div class="order__cost">
<p>Total:</p>
<p id="order__cost__price"></p> </div></body>

尝试在javascript中进行计算时，数字形式的输入值始终为0

5 个答案: