Я хочу иметь возможность отображать объект Django на HTML и иметь возможность другим объектам Django манипулировать отображаемым HTML

Я создаю фан-сайт для своего портфолио для популярной игры MOBA. Я хочу, чтобы при переходе на страницу с подробной информацией о чемпионе, где отображаются его статистические данные (урон атаки, магический урон и т.д.), пользователь мог нажать на предмет, и статистика этого предмета добавится к уже отображенному значению статов.

Например, чемпион "x" имеет 25 базового урона атаки. Предмет "a" имеет 5 единиц урона атаки. Нажмите на предмет "a", и статистика чемпиона покажет 30 единиц урона атаки. При двойном щелчке по предмету он уберет добавленные 5 единиц урона атаки и снова покажет 25 единиц урона атаки.

Метод и порядок кликов не обязателен, но предпочтителен, потому что это был мой первоначальный проект, и так как я учусь, я думаю, что должен заставить себя разобраться с этим.

Мне интересно, может ли кто-нибудь указать мне правильное направление для использования слушателей событий/какой javascript или метод будет лучшим способом сделать это, кроме загрузки каждого элемента в глобальные переменные в файле скрипта. Код для справки.

Я слышал об AJAX, но я не хочу погружаться в это в данный момент, если это не является чем-то необходимым.

Спасибо!

HTML

    {% extends "./base.html" %}
    {% block title %}<title>Champ | Name</title>{% endblock %}
    {% block content %}
      <tr>{{ object.name }}'s stats</tr>
      <p> Base Health: {{ object.hp }} </p>
      <p> HP increased per level: {{ object.hp_gain_per_lvl }} </p>
      <p> Health Regen:  {{ object.hp_regen }} </p>
      <p> Health Regen Gain Per level:  {{ object.hp_regen_gain_per_lvl }} </p>
      <p> Base Mana:  {{ object.mana }} </p>
      <p> Mana increased per level:  {{ object.mana_gain_per_lvl }} </p>
      <p> Mana Regen:  {{ object.mana_regen }} </p>
      <p> Mana Regen increased per level:  {{ object.mana_regen_gain_per_lvl }} </p>
      <p> Base Attack Damage:  <p id="attack-damage">{{ object.attack_damage }}</p> </p>
      <p> Attack Damage increased per level:  {{ object.attack_damage_gain_per_lvl }} </p>
      <p> Base Attack Speed:  {{ object.attack_speed}} </p>
      <p> Attack Speed increase per level:  {{ object.attack_speed_gain_per_lvl }} </p>
      <p> Base Armor:  {{ object.armor }} </p>
      <p> Armor Increased per level:  {{ object.armor_gain_per_lvl }} </p>
      <p> Base Magic Resist:  {{ object.magic_resist }} </p>
      <p> Magic Resist increase per level:  {{ object.magic_resist_gain_per_lvl }} </p>
      <p> Base Movement Speed:  {{ object.movement_speed }} </p>
      <p> Base range:  {{ object.range }} </p>
      <p> Base Ability Power:  {{ object.ability_power }} </p>
      <p> Base Ability Haste: <p id="ability-haste">{{ object.ability_haste }}</p> </p>
      <p> Base Critical hit chance:  {{ object.crit }} </p>
      
      
    
    <div class="items-container">
      {% for item in Items %}
      <div class="item-card">
        <input type="checkbox" id="{{item.name}}" onclick="manageItem('{{item.name}}')">
        <label for="{{item.name}}"><img src="{{ item.image.url }}"></label>
        <p>{{item.name}}</p>
      </div>
    {% endfor %}
    </div>
    <!-- double click to remove item, click to add item, run it through an if/else to check to see if there are more than 6 items in the inventory -->
    
    <!-- Gonna use this as an item tray for 6 items, have the item tray then effect the champs stats -->
    <div class="item-container">
      <div id="item1"></div>
      <div id="item2"></div>
      <div id="item3"></div>
      <div id="item4"></div>
      <div id="item5"></div>
      <div id="item6"></div>
    </div>```

Script

const CaulfieldWarhammer = {attack_damage:25, ability_haste:10}

let numClicks = 0;
function manageItem(item) {
  numClicks++;
  if (numClicks === 1) {
    singleClickTimer = setTimeout(() => {
      numClicks = 0;
      console.log("item added");
      function addItem(item){
        console.log(item)
      }
      addItem(item)
    }, 400);
  } else if (numClicks === 2) {
    clearTimeout(singleClickTimer);
    numClicks = 0;
    console.log("item removed");
  }
};

Views

class CharacterStatsDetailView(DetailView):
    model = CharacterStats
    extra_context={'Items': ItemStats.objects.all()}

Model

class CharacterStats(models.Model):
    name = models.CharField(max_length=50)
    hp = models.FloatField()
    hp_gain_per_lvl = models.FloatField()
    hp_regen = models.FloatField()
    hp_regen_gain_per_lvl = models.FloatField()
    mana = models.FloatField()
    mana_gain_per_lvl = models.FloatField()
    mana_regen = models.FloatField()
    mana_regen_gain_per_lvl = models.FloatField()
    attack_damage = models.FloatField()
    attack_damage_gain_per_lvl = models.FloatField()
    attack_speed = models.FloatField()
    attack_speed_gain_per_lvl = models.FloatField()
    armor = models.FloatField()
    armor_gain_per_lvl = models.FloatField()
    magic_resist = models.FloatField()
    magic_resist_gain_per_lvl = models.FloatField()
    movement_speed = models.FloatField()
    range = models.FloatField()
    ability_power = models.FloatField()
    ability_haste = models.FloatField()
    crit = models.FloatField()
    image = models.ImageField(default='charicondefault.jpg', upload_to='characterpics')

    def __str__(self):
        return f'{self.name}'

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