テキスト入力をクリアせずにリセットすることはできますか？

Question

まず、私の前の質問で皆さんの助けをいただき、ありがとうございます。私は自分のコードを、私があなたの助けを借りてしたかったものとまったく同じようにしました。しかし今、私はそれがしたくないことをしています。

function raceMod() { 
    var race = document.getElementById("race").value; 
    var str = document.getElementById("strScore").value; 

    if (race == "orc") { 
    var orc = { 
     str: 4, 
     dex: 0, 
     con: 0, 
     int: -2, 
     wis: -2, 
     cha: -2 
    } 
    document.getElementById("strScore").value = (parseInt(str) + parseInt(orc.str)) 

    } else if (race == "ore") { 
    var ore = { 
     str: 2, 
     dex: 0, 
     con: 0, 
     int: 0, 
     wis: 2, 
     cha: -2 
    }; 
    document.getElementById("strScore").value = (parseInt(str) + parseInt(ore.str)) 

    } 
} 

これは私のjavascriptです。私は選ぶべき潜在的なレースのドロップダウンメニューを持っている。選択されたレースに応じて、その変数に対応するテキスト入力に影響を与える異なる変数が作成されます。

今では、ユーザーはテキスト入力に数字を入力し、レースを選択します。選択されたレースに応じて、ユーザーが既に入力した数値に変更子が追加または減算されます。

私が抱えている問題は、スクリプトが既に変更されていても引き続き入力に追加されてしまうことです。

たとえば、ユーザーが入力に「10」を入力してOrcを選択すると、10が14に変わります。しかし、彼がOread（「ore」）を選択すると、入力は16に変わります。基本的に私は新しい番号を無視し、元の入力にのみ変数を追加するjavascriptが必要です。

どうすればよいですか？

Answer 1

あなたができることは、strScore入力でユーザーの入力をキャプチャし、その値を保存します。

raceが変更されたときにスコアを再計算するときは、strScore入力の値ではなく、ユーザーが入力した値を使用します。 raceを変更すると、strScoreの値が変更され続けるためです。ここで

は、コードの概要（完全ではない、フィドルを参照してください）です

// the score the user filled in, defaults null 
var userScore = 0; 

// when the user inputs a score, save it 
score.addEventListener('input', function(e) { 
    userScore = e.target.value; 
}); 

function raceMod() { 
     // we only need the race value here 
    var race = raceSelector.value; 

    if (race == "orc") { 
     var orc = { 
      str: 4, 
      dex: 0, 
      con: 0, 
      int: -2, 
      wis: -2, 
      cha: -2 
     }; 

     // this is edited 
     // use the value of `userScore`, not the value from the input 
     score.value = (parseInt(userScore, 10) + parseInt(orc.str, 10)); 


    } else if (race == "ore") { 
     var ore = { 
      str: 2, 
      dex: 0, 
      con: 0, 
      int: 0, 
      wis: 2, 
      cha: -2 
     }; 

     // same as above 
     score.value = (parseInt(userScore, 10) + parseInt(ore.str, 10)); 
    } 
} 

フィドル：https://jsfiddle.net/pn8nm9js/2/