＃javascriptで足し算の計算を非同期で行いたい

＃javascriptで点数計算のアプリをさくせいしてます。
足し算は文字列として扱われると思いますが、どういった記述をすれば数値として扱われるのでしょうか？
ご教授お願いいたします。

下記の記述を行いました。

#score.js

window.addEventListener("load", function() {
  let score = document.getElementById("first-fa-score-field");
  score.addEventListener("input", function() {
    let first_fa_score = score.value
    let fa_total = document.getElementById("fa-total");
    fa_total.innerHTML = first_fa_score;
    
    let second_score = document.getElementById("second-fa-score-field");
    second_score.addEventListener("input", function() {
      let second_fa_score = second_score.value
      let fa_total = document.getElementById("fa-total");


      #以下の計算ができない
      total_score = (first_fa_score + second_fa_score)
      fa_total.innerHTML = total_score    
  
    })
  })
})

アドバイスをいただけると幸いです。
宜しくお願いいたします。

Zuishin

2020/10/03 08:52

文字列を整数に直すには parseInt を使います。実数に直すには parseFloat を使います。もっと簡単に Number を使うこともできます。それぞれ調べてみてください。

akari0509

2020/10/03 08:59

ありがとうございました。調べてみます。

行動規範の内容に同意します

回答1件

ベストアンサー

「非同期」ではないですよね
1を入力時は1、2を入力時は1+2でよいのでしょうか？

javascript
1<script>
2window.addEventListener("load", function() {
3  let score = document.getElementById("first-fa-score-field");
4  score.addEventListener("input", function() {
5    let first_fa_score = parseInt(score.value);
6    let fa_total = document.getElementById("fa-total");
7    fa_total.innerHTML = first_fa_score;
8    
9    let second_score = document.getElementById("second-fa-score-field");
10    second_score.addEventListener("input", function() {
11      let second_fa_score = parseInt(second_score.value);
12      let fa_total = document.getElementById("fa-total");
13      total_score = (first_fa_score + second_fa_score);
14      fa_total.innerHTML = total_score;    
15      
16    });
17  });
18});
19</script>
20<input type="text" id="first-fa-score-field">
21<input type="text" id="second-fa-score-field">
22<div id="fa-total"></div>