计算js中输入数据的问题

Question

嘿，我对js还比较陌生，我一直在尝试构建这个价格计算器，它应该输出两个字段的结果(不需要提交任何可能的内容)，但是我很难计算输入的数据！有人能告诉我我做错了什么吗?如果可以用香草js做的话？提前感谢

​

// (should) calculate
const priceCalculator = (base, height) => {
    const outcome = (base * height) / 100; 
    return outcome;
}

// gets & stores base value
const getBase = function() {
    const base = document.getElementsByClassName('field')[0].value;
    console.log( base );
    return base;
}

// gets & stores height value
const getHeight = function() {
    const height = document.getElementsByClassName('field')[1].value;
    console.log( height );
    return height;
}

let result = priceCalculator(getBase, getHeight);

// result
document.getElementById('get-result').innerHTML += result;

<div class="calculator-wrapper">
    <form class="calculator" action="somewhere.html" method="get">
        <p>Base cm</p>
        <input type="number" class="field" id="base-field" value="" onblur="getBase()">
        <p>Height cm</p>
        <input type="number" class="field" id="height-field" value="" onblur="getHeight()">
        <h2>Your price is: <span id="get-result"></span>€</h2>
    </form>
</div>

​

Answer 1

因此，对于解决问题所需的内容来说，您拥有的内容过于复杂。您只需要有一个函数，您就可以调用任一字段的onblur (或者更好的是，对于用户来说，有一个按钮专门计算价格)。因此，在javascript中，用如下所示替换您拥有的内容：

function calculatePrice(){
  document.getElementById('get-result').innerHTML = parseInt(document.getElementsByClassName('field')[0].value) + parseInt(document.getElementsByClassName('field')[1].value);
}

在HTML中，只需将onBlur调用的内容更改为“calculatePrice()”即可。

这是一种方法，或者您可以将参数传递到函数中。

内置的parseInt()函数将接受文本输入(输入的缺省值)，并将它们转换为整数，这样就不会将它们作为文本附加到一起。对于非整数也有parseFloat()。

Answer 2

首先。您将始终从Formfield获得字符串值。为了计算，你需要数字，整数。

然后，您必须传递函数，而不是作用域变量名称。priceCalculator(getBase(), getHeight());

那就成功了！

​

// (should) calculate
const priceCalculator = (base, height) => {
    
    const outcome = (base * height) / 100; 
    return outcome;
}

// gets & stores base value
const getBase = function() {
    const base = document.getElementsByClassName('field')[0].value;
    console.log( base );
    return parseInt(base);
}

// gets & stores height value
const getHeight = function() {
    const height = document.getElementsByClassName('field')[1].value;    
    return parseInt(height);
}

let result = priceCalculator(getBase(), getHeight());

// result
document.getElementById('get-result').innerHTML += result;

<input class="field" value="2">
<input class="field" value="3">

<div id="get-result"></div>

​