Question

我有一个变量，我想在其中添加另外七个变量，但变量是连接而不是添加。

我可能会犯一些错误，也许我过于复杂。

尝试过一元+，但它没有工作......

＆＃13;

window.onload = function() {
  document.getElementById('inputButton').onclick = function() {
    var input = document.getElementById('inputRecomandate');
    var header = document.getElementById('headerA');
    header.innerHTML = input.value * 7;
    document.getElementById('dormiteButton').onclick = function() {
      var input1 = document.getElementById('inputDormite1');
      var input2 = document.getElementById('inputDormite2');
      var input3 = document.getElementById('inputDormite3')
      var input4 = document.getElementById('inputDormite4')
      var input5 = document.getElementById('inputDormite5')
      var input6 = document.getElementById('inputDormite6')
      var input7 = document.getElementById('inputDormite7')
      var oreTotale = document.getElementById('total');
      oreTotale.innerHTML = input1.value + input2.value + input3.value +
        input4.value + input5.value + input6.value + input7.value;
    }

  }
}

＆＃13;

<h1>Adauga aici nr de ore de somn pe zi recomandate de tine</h1>
<input id="inputRecomandate" type="text">
<button id="inputButton">Apasa aici</button>
<p> Nr de ore de somn recomandate pe saptamana <span id="headerA">0</span>
</p>
<input id="inputDormite1" type="text" placeholder="Ore dormite luni.">
<input id="inputDormite2" type="text" placeholder="Ore dormite marti.">
<input id="inputDormite3" type="text" placeholder="Ore dormite miercuri.">
<input id="inputDormite4" type="text" placeholder="Ore dormite joi.">
<input id="inputDormite5" type="text" placeholder="Ore dormite vineri.">
<input id="inputDormite6" type="text" placeholder="Ore dormite sambata.">
<input id="inputDormite7" type="text" placeholder="Ore dormite duminica.">
<button id="dormiteButton">Aduna</button>
<p id="total">gsga</p>

＆＃13;

Answer 1

在您的代码中，第二个onclick function 里面第一个！我不认为你打算这样做......

经过纠正后，+ s上的一些input.value似乎正常工作：

window.onload = function() {
  document.getElementById('inputButton').onclick = function() {
    var input = document.getElementById('inputRecomandate');
    var header = document.getElementById('headerA');
    header.innerHTML = +input.value * 7;
  }
  document.getElementById('dormiteButton').onclick = function() {
    var input1 = document.getElementById('inputDormite1');
    var input2 = document.getElementById('inputDormite2');
    var input3 = document.getElementById('inputDormite3');
    var input4 = document.getElementById('inputDormite4');
    var input5 = document.getElementById('inputDormite5');
    var input6 = document.getElementById('inputDormite6');
    var input7 = document.getElementById('inputDormite7');
    var oreTotale = document.getElementById('total');
    oreTotale.innerHTML = +input1.value + +input2.value + +input3.value +
      +input4.value + +input5.value + +input6.value + +input7.value;
  }
}

<body>
  <h1>Adauga aici nr de ore de somn pe zi recomandate de tine</h1>
  <input id="inputRecomandate" type="text">
  <button id="inputButton">Apasa aici</button>
  <p> Nr de ore de somn recomandate pe saptamana <span id="headerA">0</span>
  </p>
  <input id="inputDormite1" type="text" placeholder="Ore dormite luni.">
  <input id="inputDormite2" type="text" placeholder="Ore dormite marti.">
  <input id="inputDormite3" type="text" placeholder="Ore dormite miercuri.">
  <input id="inputDormite4" type="text" placeholder="Ore dormite joi.">
  <input id="inputDormite5" type="text" placeholder="Ore dormite vineri.">
  <input id="inputDormite6" type="text" placeholder="Ore dormite sambata.">
  <input id="inputDormite7" type="text" placeholder="Ore dormite duminica.">
  <button id="dormiteButton">Aduna</button>
  <p id="total">…</p>

</body>

⋅ ⋅ ⋅

无论如何，我建议您进行一些修改以简化您的功能：

删除id并在7个输入上添加class="dormite"
使用querySelectorAll和.forEach(…)循环显示元素并创建总计。

这是一个工作片段：

var input = document.getElementById('inputRecomandate');
var header = document.getElementById('headerA');
document.getElementById('inputButton').onclick = function() {
  header.innerHTML = +input.value * 7;
  compare(); // Added this function after comment
}

var oreTotale = document.getElementById('total');
var inputs = document.querySelectorAll('.dormite');
document.getElementById('dormiteButton').onclick = function() {
  var total = 0;
  inputs.forEach(function(elm, index) {
    total += +elm.value;
  })
  oreTotale.innerHTML = total;
  compare(); // Added this function after comment
}

// Added this function after comment:
function compare() {
  console.clear();
  if (+oreTotale.innerHTML > +header.innerHTML)
    console.log("oreTotale > header");
  if (+oreTotale.innerHTML < +header.innerHTML)
    console.log("oreTotale < header");
}

<body>
  <h1>Adauga aici nr de ore de somn pe zi recomandate de tine</h1>
  <input id="inputRecomandate" type="text">
  <button id="inputButton">Apasa aici</button>
  <p> Nr de ore de somn recomandate pe saptamana <span id="headerA">0</span>
  </p>
  <input class="dormite" type="text" placeholder="Ore dormite luni.">
  <input class="dormite" type="text" placeholder="Ore dormite marti.">
  <input class="dormite" type="text" placeholder="Ore dormite miercuri.">
  <input class="dormite" type="text" placeholder="Ore dormite joi.">
  <input class="dormite" type="text" placeholder="Ore dormite vineri.">
  <input class="dormite" type="text" placeholder="Ore dormite sambata.">
  <input class="dormite" type="text" placeholder="Ore dormite duminica.">
  <button id="dormiteButton">Aduna</button>
  <p id="total">…</p>

</body>

希望它有所帮助。

Answer 2

尝试

oreTotale.innerHTML = input1.value*1 + input2.value*1 +  input3.value*1 + 
input4.value*1 + input5.value*1 + input6.value*1 + input7.value*1;

input1.value返回一个字符串，将其转换为mul的数字;将其改为1

Answer 3

由于.value返回string，

输入正在进行连接。并且在执行加法（+）时串联字符串。您需要将它们转换为number。有很多方法可以做到这一点。在下面列出几个

+ input1.value
数（input1.value）
parseFloat（input1.value）
parseInt（input1.value）//仅整数

您可以尝试使用其中一个，如下所示

window.onload = function() {
  document.getElementById('inputButton').onclick = function() {
    var input = document.getElementById('inputRecomandate');
    var header = document.getElementById('headerA');
    header.innerHTML = input.value * 7;
    document.getElementById('dormiteButton').onclick = function() {
      var input1 = document.getElementById('inputDormite1');
      var input2 = document.getElementById('inputDormite2');
      var input3 = document.getElementById('inputDormite3')
      var input4 = document.getElementById('inputDormite4')
      var input5 = document.getElementById('inputDormite5')
      var input6 = document.getElementById('inputDormite6')
      var input7 = document.getElementById('inputDormite7')
      var oreTotale = document.getElementById('total');
      oreTotale.innerHTML = +input1.value + +input2.value + +input3.value +
        +input4.value + +input5.value + +input6.value + +input7.value;
    }

  }
}

<h1>Adauga aici nr de ore de somn pe zi recomandate de tine</h1>
<input id="inputRecomandate" type="text">
<button id="inputButton">Apasa aici</button>
<p> Nr de ore de somn recomandate pe saptamana <span id="headerA">0</span>
</p>
<input id="inputDormite1" type="text" placeholder="Ore dormite luni.">
<input id="inputDormite2" type="text" placeholder="Ore dormite marti.">
<input id="inputDormite3" type="text" placeholder="Ore dormite miercuri.">
<input id="inputDormite4" type="text" placeholder="Ore dormite joi.">
<input id="inputDormite5" type="text" placeholder="Ore dormite vineri.">
<input id="inputDormite6" type="text" placeholder="Ore dormite sambata.">
<input id="inputDormite7" type="text" placeholder="Ore dormite duminica.">
<button id="dormiteButton">Aduna</button>
<p id="total">gsga</p>

Answer 4

使用Array对象的一些方法，这是一种快速而优雅的方法来实现所需的结果。

以下是实现目标的步骤：

使用类名input而不是每个inputDormite元素具有唯一ID。例如：

<input class="inputDormite" value="1" type="text" placeholder="Ore dormite luni.">

而不是：

<input id="inputDormite1" value="1" type="text" placeholder="Ore dormite luni.">

这样我们以后可以用querySelectorAll选择所有这些。

document.querySelectorAll('.inputDormite')

使用destructuring syntax将所选内容转换为Array：
```
[...document.querySelectorAll('.inputDormite')]
```
首先，我们将此数组映射到输入元素中包含的所有值的数组。使用.map方法执行此操作。它接受一个参数回调函数并将其应用于数组的每个元素以构成一个新数组。
```
Array.map(input => parseInt(input.value) || 0)
```
上面我们已经将每个输入元素转换为它包含的字符串值的int。 || 0允许将值设置为0，如果它不包含任何数字（它类似于默认值）
接下来我们将在修改过的数组上应用.reduce方法，这样我们就可以很容易地将所有值相加：
```
Array.reduce((sum, value) => sum + value)
```

完整的代码是：

document.querySelector('#inputButton').onclick = function() {
  const input = document.querySelector('#inputRecomandate')
  const header = document.querySelector('#headerA')

  header.innerHTML = input.value * 7;

  document.querySelector('#dormiteButton').onclick = function() {

    document.querySelector('#total').innerHTML = [...document.querySelectorAll('.inputDormite')]
      .map(input => parseInt(input.value) || 0)
      .reduce((sum, value) => sum + value)

  }

}

＆＃13;

document.querySelector('#inputButton').onclick = function() {
  const input = document.querySelector('#inputRecomandate')
  const header = document.querySelector('#headerA')

  header.innerHTML = input.value * 7;

  document.querySelector('#dormiteButton').onclick = function() {

    document.querySelector('#total').innerHTML = [...document.querySelectorAll('.inputDormite')]
      .map(input => parseInt(input.value) || 0)
      .reduce((sum, value) => sum + value)

  }

}

＆＃13;

<h1>Adauga aici nr de ore de somn pe zi recomandate de tine</h1>
<input id="inputRecomandate" value="1" type="text">
<button id="inputButton">Apasa aici</button>
<p> Nr de ore de somn recomandate pe saptamana <span id="headerA">0</span>
</p>

<input class="inputDormite" value="1" type="text" placeholder="Ore dormite luni.">
<input class="inputDormite" value="2" type="text" placeholder="Ore dormite marti.">
<input class="inputDormite" value="3" type="text" placeholder="Ore dormite miercuri.">
<input class="inputDormite" type="text" placeholder="Ore dormite joi.">
<input class="inputDormite" type="text" placeholder="Ore dormite vineri.">
<input class="inputDormite" type="text" placeholder="Ore dormite sambata.">
<input class="inputDormite" value="6" type="text" placeholder="Ore dormite duminica.">

<button id="dormiteButton">Aduna</button>
<p id="total"></p>

＆＃13;

Answer 5

如果输入是整数类型，请输入

oreTotale.innerHTML = parseInt(input1.value) + parseInt(input2.value) +  parseInt(input3.value) + 
parseInt(input4.value) + parseInt(input5.value) + parseInt(input6.value) + parseInt(input7.value);

Answer 6

默认情况下，从输入字段获取的值是字符串类型，而不是数字。因此，必须使用Number()函数将字符串输入值转换为整数。修改您的代码如下：

var input1 = Number(document.getElementById('inputDormite1'));
var input2 = Number(document.getElementById('inputDormite2'));
var input3 = Number(document.getElementById('inputDormite3'));
var input4 = Number(document.getElementById('inputDormite4'));
var input5 = Number(document.getElementById('inputDormite5'));
var input6 = Number(document.getElementById('inputDormite6'));
var input7 = Number(document.getElementById('inputDormite7'));

值是连接而不是添加

6 个答案: