Question

我有一个表格，用户可以在其中输入他的收入和储蓄。我想根据该信息计算税金，并在单击按钮时将其显示在屏幕上。我正在尝试使用JavaScript，这是我的新手。 HTML表单也很新。

这是税收计算本身的伪代码：

tax(income, wealth) = (0.35 * income) + (0.25 * wealth)

这是我进行这项工作的尝试。我没有在这里包括所有HTML代码，仅在表单的最后一部分。

HTML

<form>

<label>Income</label>
<input id="income" type="number" name="income" min="0"><br>

<label>Wealth</label>
<input id="wealth" type="number" name="wealth" min="0"><br>

<label>Tax</label><br>
<input id="tax" type="number" name="tax" disabled>

<button type="button" name="button" onclick="calculatetax();"> Calculate 
tax</button>

</form>

<script type="text/javascript" src="script.js"> </script>

JavaScript

function calculatetax() {
  var salary = document.getElementById('income').value;
  var savings = document.getElementById('wealth').value;
  var taxes = (0.35 * salary) + (0.25 * savings);

  var totalTax = document.getElementById('tax')
  totalTax.innerHTML = taxes.value;
}

当我单击按钮时，我想使税收结果显示在屏幕上，如果可以的话，我希望它显示在“税收”输入中。

Answer 1

我个人将您的const styles = theme => ({ root: { minWidth: 200, marginTop: '-10px', }, inputLabel: { color: theme.palette.primary.light, '&$inputLabelFocused': { color: theme.palette.primary.light, }, }, inputLabelFocused: { }, icon: { fill: theme.palette.primary.light, }, select: { color: theme.palette.primary.light, '&:before': { borderColor: theme.palette.primary.light, }, '&:after': { borderColor: theme.palette.primary.light, }, }, }) class CustomSelector extends React.Component { render() { const { classes } = this.props; return( <div> <FormControl className={classes.root}> <InputLabel FormLabelClasses={{ root: classes.inputLabel, focused: classes.inputLabelFocused }}>Choose</InputLabel> <Select value="" className={classes.select} inputProps={{ classes: { icon: classes.icon } }} autoWidth="true"> <MenuItem value=""><em>None</em></MenuItem> <MenuItem value="Value 1">Value 1</MenuItem> </Select> </FormControl> </div> ) } }税项输入设置为disabled。与禁用的输入不同，它允许用户仍然复制值。

此：

readonly

可以更改为：

<button type="button" name="button" onclick="calculatetax();"> Calculate tax</button>

您正在将我们的JavaScript变量<button type="button" name="button" onclick="calculatetax()"> Calculate tax</button>分配给一个值。您不需要使用taxes来获取值，只需这样做：

.value

Answer 2

您的JS有问题

var totalTax = document.getElementById('tax')
totalTax.innerHTML = taxes;

taxes只是一个变量，它没有属性value

演示：https://liveweave.com/6X4DKW

https://jsfiddle.net/r1xsv9dm/

根据以HTML形式输入的收入和财富来计算税金

2 个答案: