Question

我在JavaScript算术上遇到了麻烦。可以说我有2个来自html的元素，

var num1 = document.getElementByID('one').value;
var num2 = docuemnt.getElementByID('two').value;

var total = num1 + num2;

alert(total);

这两个元素由用户输入。假设用户将id ='one'留为空白。我如何使javascript仍然计算并警告“总计”？ JavaScript可以自动将空白字段设置为“ 0”吗？我在我的项目上尝试了此操作，但只有给定/输入了“一个”和“两个”时，它才会给我警报。也许我想念一些东西。

感谢您的帮助。

好，这是我在项目中使用的代码，

var number = document.getElementById('child1').value;
var hrs = document.getElementById('hrs1').value;
var qty = document.getElementById('qty1').value;
var watts = qty * (number / 1000);
var kwh = watts * hrs;
var kwhh = kwh * 30;

var number2 = document.getElementById('child2').value;
var hrs2 = document.getElementById('hrs2').value;
var qty2 = document.getElementById('qty2').value;
var watts2 = qty2 * (number2 / 1000);
var kwh2 = watts2 * hrs2;
var kwhh2 = kwh2 * 30;

var totalperhr = kwh+kwh2;
var totalper30 = kwhh+kwhh2;

alert(totalperhr + ' kwh per day\n' + totalper30 + ' kwh per 30 days');

html下方

<input type="range" min="1" max="1000" id="child1">
<select id="hrs1">
    <option value='1'>1hr</option>
    <option value='2'>2hr</option>
    <option value='3'>3hr</option>
</select>
<select id="qty1">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='2'>3</option>
</select>

<input type="range" min="1" max="1000" id="child2">
<select id="hrs2">
    <option value='1'>1hr</option>
    <option value='2'>2hr</option>
    <option value='3'>3hr</option>
</select>
<select id="qty2">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='2'>3</option>
</select>

如您所见，我将进行几次操作，然后总计。但是如果我留一个空白，我不会收到任何警报。

Answer 1

您可以使用Unary plus (+)运算符从输入的value属性中获取数字，或将其设置为0：

+document.getElementById('one').value || 0;

代码示例：

const num1 = +document.getElementById('one').value || 0;
const num2 = +document.getElementById('two').value || 0;

const total = num1 + num2;

console.log(total);

<input type="number" value="5" name="one" id="one">
<input type="number" value="" name="two" id="two">

注意：您应该写document.getElementByID()

而不是document.getElementById()

您的代码：

const elements = document.querySelectorAll('#child1, #hrs1, #qty1, #child2, #hrs2, #qty2');
const values = {
  child1: 0,
  hrs1: 0,
  qty1: 0,
  child2: 0,
  hrs2: 0,
  qty2: 0
};
const getTotals = () => {
  elements.forEach(elem => values[elem.id] = +elem.value || 0);

  const watts = values.qty1 * (values.child1 / 1000);
  const kwh = watts * values.hrs1;
  const kwhh = kwh * 30;

  const watts2 = values.qty2 * (values.child2 / 1000);
  const kwh2 = watts2 * values.hrs2;
  const kwhh2 = kwh2 * 30;

  const totalperhr = kwh + kwh2;
  const totalper30 = kwhh + kwhh2;

  console.clear();
  console.log(values);
  console.log(totalperhr + ' kwh per day\n' + totalper30 + ' kwh per 30 days');
};

elements.forEach(elem => elem.addEventListener('change', getTotals));

<input type="range" min="1" max="1000" id="child1">
<select id="hrs1">
  <option value=""></option>
  <option value="1">1hr</option>
  <option value="2">2hr</option>
  <option value="3">3hr</option>
</select>
<select id="qty1">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">3</option>
</select>

<input type="range" min="1" max="1000" id="child2">
<select id="hrs2">
  <option value=""></option>
  <option value="1">1hr</option>
  <option value="2">2hr</option>
  <option value="3">3hr</option>
</select>
<select id="qty2">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">3</option>
</select>

Javascript警告不完整的变量

1 个答案: