在js中计算输入数据的问题
Issue with calculating input data in js
嘿,我对 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>
首先。您将始终从 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>
所以你所拥有的对于解决问题所需的东西来说过于复杂了。您真的只需要有一个函数,您可以调用任一字段的 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 还是比较陌生,我一直在尝试构建这个价格计算器,它应该输出 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>
首先。您将始终从 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>
所以你所拥有的对于解决问题所需的东西来说过于复杂了。您真的只需要有一个函数,您可以调用任一字段的 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()。