在js中计算输入数据的问题

Question

嘿，我对 js 还是比较陌生，我一直在尝试构建这个价格计算器，它应该输出 2 个字段的结果（可能不必提交任何内容），但我正在努力计算输入的数据！谁能告诉我我做错了什么，是否可以用 vanilla 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

首先。您将始终从 Formfields 获得字符串值。对于计算，您将需要数字、整数。

然后你必须传递函数而不是作用域变量名。 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>

Answer 2

所以你所拥有的对于解决问题所需的东西来说过于复杂了。您真的只需要有一个函数，您可以调用任一字段的 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()。

在js中计算输入数据的问题

Issue with calculating input data in js

javascript

html

calculator