Как добавить литеры событий в Django?

У меня есть следующий код в html с js скриптом, но я хочу добавить его в мои django формы, но я не знаю как и с чего начать. Он автоматически перемножает два числа по мере ввода пользователем и показывает результат в другой части таблицы.

    {% extends "blog/base.html" %} {% block content %}
<h1>About Page</h1>

<div class="container">
  <h2>Basic Table</h2>
  <form>
    <table class="table">
      <thead>
        <tr>
          <th>Value</th>
          <th>Amount</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>10</td>
          <td>
            <div class="form-group">
              <label for="usr"></label>
              <input type="text" class="form-control" id="num1" />
            </div>
          </td>
          <td>
            <div id="total"></div>
          </td>
        </tr>
        <tr>
          <td>20</td>
          <td>
            <div class="form-group">
              <label for="tt"></label>
              <input type="text" class="form-control" id="num2" />
            </div>
          </td>
          <td>
            <div id="total 2"></div>
          </td>
        </tr>
        <tr>
          <td>30</td>
          <td><div class="form-group">
              <label for="ttt"></label>
              <input type="text" class="form-control" id="num3" />
            </div></td>
          <td><div id="total 3"></div></td>
        </tr>
      </tbody>
    </table>
  </form>
</div>
<script>
  function multiply(a, b, outputId) {
    var total = a * b;
    document.getElementById(outputId).innerHTML = total;
  }

  const num1 = document.getElementById('num1');
  const num2 = document.getElementById('num2');
  const num3 = document.getElementById('num3');

  num1.addEventListener('input', (event) => {
    console.log(event);
    multiply(10, Number(event.target.value), 'total');
  });

  num2.addEventListener('input', (event) => {
    multiply(20, Number(event.target.value), 'total 2');
  });

  num3.addEventListener('input', (event) => {
    multiply(30, Number(event.target.value), 'total 3');
  });
</script>

{% endblock content %}

Я знаю, что это должно быть сделано в функции mt views.py, но я не знаю, как или с чего начать.

Вернуться на верх