Добавьте два числа в форму без кнопки, используя JavaScript (в cshtml MVC)

Question

Я строю в .net-mvc, и я хотел бы вычесть два числа в текстовое поле и отобразить в другом текстовом поле все в представлении (cshtml).Я перепробовал все способы, но не могу понять, почему это не сработает.

var a = parseInt(document.getElementById("sale").value);
var b = parseInt(document.getElementById("cost").value);
var c;

a.onkeyup = function() {
  var c;
  if (isNaN(a.value) == false) {
    c = (parseInt(a.value) || 0) - (parseInt(b.value) || 0);
    document.getElementById("profit").value = c;
  }

}
b.onkeyup = function() {

  if (isNaN(b.value) == false) {
    c = (parseInt(a.value) || 0) - (parseInt(b.value) || 0);
    document.getElementById("profit").value = c;

  }
}

<div class="form-style-5">
  <form method="get" action="InsertBattCalcDetails">
    <fieldset>
      <legend><span class="number">1</span> Insert Battery Calculations</legend>

      Date: <input type="date" name="Date" /> <br /> Battery Value: <input type="number" name="Batt_value" /> <br /> Battery Sales: <input type="text" name="Batt_sales" id="sale" /> <br /> Battery Cost: <input type="text" name="Batt_cost" id="cost" />      <br /> Battery Profit: <input type="text" name="Batt_profit" id="profit" /> <br /> Battery Bought: <input type="number" name="Batt_bought" /> <br />

    </fieldset>

    <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
  </form>
</div>

Answer 1

Попробуйте

<div class="form-style-5">
        <form method="get" action="InsertBattCalcDetails">
            <fieldset>
                <legend><span class="number">1</span> Insert Battery Calculations</legend>

                Date: <input type="date" name="Date" /> <br />
                Battery Value: <input type="number" name="Batt_value" /> <br />
                Battery Sales: <input type="number" name="Batt_sales" id="sale" onkeyup="substract()"/> <br />
                Battery Cost: <input type="number" name="Batt_cost" id="cost" onkeyup="substract()"/> <br />
                Battery Profit: <input type="text" name="Batt_profit" id="profit" /> <br />
                Battery Bought: <input type="number" name="Batt_bought" /> <br />

            </fieldset>

            <script>
                function substract() {
                    var sale = document.getElementById("sale").value;
                    var cost = document.getElementById("cost").value;

                    if (sale && cost) {
                        document.getElementById("profit").value = sale - cost;
                    }

                }  
            </script>

            <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
        </form>
    </div>

Answer 2

И a, и b должны содержать ссылки на элементы с продажами и стоимостью идентификаторов соответственно. Как вы их определили, они являются просто числовыми значениями, для которых не имеет смысла регистрировать события, например onkeyup.

Изменение a на saleInput и b на costInput сделает ваш код более читабельным:

var saleElement = document.getElementById("sale");
var costElement = document.getElementById("cost");

saleElement.onkeyup = calculateProfit;
 
costElement.onkeyup = calculateProfit;

function calculateProfit() {
  let sale = parseInt(saleElement.value, 10);
  let cost = parseInt(costElement.value, 10);
  
  if(isNaN(sale) || isNaN(cost)) {
      // either sale or cost are not numbers. profit cannot be calculated.
      return;
  }
  
  let profitElement = document.getElementById("profit");
  profitElement.value = sale - cost;
}

<div class="form-style-5">
<form method="get" action="InsertBattCalcDetails">
    <fieldset>
        <legend><span class="number">1</span> Insert Battery Calculations</legend>

        Date: <input type="date" name="Date" /> <br />
        Battery Value: <input type="number" name="Batt_value"  /> <br />
        Battery Sales: <input type="text" name="Batt_sales" id="sale" /> <br />
        Battery Cost: <input type="text" name="Batt_cost" id="cost" /> <br />
        Battery Profit: <input type="text" name="Batt_profit" id="profit" /> <br />
        Battery Bought: <input type="number" name="Batt_bought" /> <br />

    </fieldset>
    <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</form>
</div>