关于不完整变量的 Javascript 警报

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>