Итак, я хочу создать функцию, чтобы увидеть, какая радиокнопка активна, а затем обработать эффекты удаления этого эффекта с помощью флага true / false для каждой черепашки радиокнопки. , волк, ящерица и др. Так же, как

var wolfActive = true;
var lizardActive = false;
var turtleActive = false;

Затем, когда вы устанавливаете один из этих активных, вы переходите к функции и смотрите на все остальные, чтобы убедиться, что это правда. Если это правда, вычтите его значения. И затем установите остальные в ложь.

Я в основном хочу, чтобы это было сделано, чтобы при переключении переключателей статистика / функции, связанные с этими переключателями, не переносились. При переходе от черепахи к ящерице я теряю 1 силу, и этого не должно случиться. Я новичок в JavaScript, поэтому я не знаю, как это сделать, чтобы это работало. Я покажу вам в своем коде, что я имею в виду

У меня был кто-то, кто пытался объяснить это мне, но я не смог правильно отформатировать его.

Он сказал: «Когда изменения радиокнопок заставляют Eventlistener вызывать функцию, которая определяет, какой из них активен, затем создайте функцию, чтобы выяснить, что активно, и сделайте удаление для каждой части удаления, чтобы установить его falseThen после того, как это закончили устанавливать новый true «

Это мой код JavaScript:

 var wolfRadio = document.getElementById("wolf-radio");
 var lizardRadio = document.getElementById("lizard-radio");
 var wolfInterval;

 var Wolf = 1;
 var Wolflv = 1;
 var WolfCexp = 0;
 var WolfMexp = 100;
 var NextMaxWolfExp = WolfMexp;
 var Wolfstrength = 1;
 var Strength = 2;

 // This is an event dispatcher function. Based on the radio
 // button that was clicked, run different functions.
 function radioChanged(event) {
  if (event.target === wolfRadio) {
    wolfandstrength(true);
    wolfXpUp(true);
    // Run other functions...
  } else if (event.target === lizardRadio) {
    wolfandstrength(false);
    wolfXpUp(false);
   // Run other functions...
  }
}

function wolfandstrength(wolfChecked) {
  if (wolfChecked) {
    Strength = Strength   Wolfstrength
document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = Strength - Wolfstrength;
    document.getElementById("Strength").innerHTML = Strength;
  }
}

function wolfXpUp(wolfChecked) {
  clearInterval(wolfInterval);

  if (wolfChecked && WolfCexp < WolfMexp) {
   wolfInterval = setInterval(function () { wolfXpUp(wolfChecked); }, 
  200);
    WolfCexp = WolfCexp   1;
    document.getElementById("WolfCexp").innerHTML = WolfCexp;
  } 

  if (WolfCexp >= WolfMexp) {
    Wolflv = Wolflv   1;
    WolfCexp = 0;
    Wolf = Wolf   1;
      Wolfstrength = Wolfstrength   1;
      Strength = Strength   1;
       NextMaxWolfExp = NextMaxWolfExp * 1.5;
    }

    document.getElementById("Strength").innerHTML = Strength;
    document.getElementById('WolfMexp').innerHTML = NextMaxWolfExp;
   document.getElementById('Wolflv').innerHTML = Wolflv;
    document.getElementById('WolfCexp').innerHTML = WolfCexp;
    //document.getElementById('Turtle').innerHTML = Turtle; 
  }

  //document.getElementById("turtle-radio").addEventListener("change", 
  turtleXpUp);
  //document.getElementById("turtle-radio").addEventListener("change", 
  turtleandstrength);
  wolfRadio.addEventListener("change", radioChanged);
  lizardRadio.addEventListener("change", radioChanged);
  document.getElementById("Strength").innerHTML = Strength;
 <div id="turtle" class="control">
   <label class="radio">
     <input type="radio" name="Pets" id="turtle-radio">
   </label><img src="turtle.png" alt="turtle" height="100" width="100"> Lv 
   <span id="Turtlelv">1</span> <span id="TurtleCexp">0</span> / <span 
  id="TurtleMexp">100</span>
       <br />
       <br />

       <div id="lizard" class="control">
         <label class="radio">
            <input type="radio" name="Pets" id="lizard-radio">
        </label><img src="lizard.png" alt="lizard" height="42" width="42"> 
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Lv <span 
    id="Lizardlv">1</span> <span id="LizardCexp">0</span> / <span 
    id="LizardMexp">100</span>
       <br />
        <div id="wolf" class="control">
          <label class="radio">
            <input type="radio" name="Pets" id="wolf-radio">
           </label><img src="wolf.png" alt="wolf" height="60" width="60"> 
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lv <span id="Wolflv">1</span> <span 
    id="WolfCexp">0</span> / <span id="WolfMexp">100</span></div>
       <br />
      <span id="Strength">0</span>

Вы можете видеть, что переключение фрагмента с волка на ящерицу работает нормально, потому что вы начинаете с 2 силы. Но когда вы переключаетесь с черепахи на ящерицу, я не хочу, чтобы вы потеряли 1 силу. Любые переключатели радиокнопок должны быть включены, только когда радиокнопка выбрана. (следовательно, почему я хочу хороший флаг true / false). Мой фактический вывод: функции / статистика переключателей не привязаны к выбранным им напрямую. Я надеюсь сделать другие переключатели ложными, в то время как одна из них верна, и это исправит это.

Итак, я мог бы переписать это немного слишком слишком много, но лично я бы пошел по следующему пути.

Чтобы определить, какой питомец получает какой бафф и каков этот бафф, используйте атрибуты данных . Например, если wolf должен увеличить strength на 1, то в HTML будет data-buff-type="strength" и data-buff-amount="1".

Затем вы можете хранить базовую статистику отдельно и иметь функцию, которая проверяет / применяет бафф питомца. Я добавил комментарии рядом с каждой строкой, чтобы объяснить.

var baseStats = {
  strength: 1,
  mana: 1,
  regen: 1
};

function getStats() {
  var selectedPet = document.querySelector('input[name="Pets"]:checked');  //Find the selected pet
  if (!selectedPet) return baseStats;                                      //No pet selected, just return base stats
  
  var buffType = selectedPet.dataset.buffType;                             //Get selected pet's data-buff-type
  var buffAmount = parseInt( selectedPet.dataset.buffAmount );             //Get selected pet's data-buff-amount
  
  var stats = {...baseStats};                                              //Copy our base stats
  stats[buffType]  = buffAmount;                                           //Find the buff-type, add the buff-amount to it
  
  return stats;                                                            //Return the buffed stats
}

function updateStats() {
  var stats = getStats();                                                      //Get buffed stats
  document.querySelectorAll(".stat").forEach(e => e.innerHTML = stats[e.id]);  //Set spans where ID matches stat type
}

//Add listener to all radio buttons
document.querySelectorAll('input[name="Pets"]').forEach(e => e.addEventListener("change", updateStats));

//Set the stats on page-load
updateStats();
div { margin: 5px 0; }
<div>
  <input type="radio" name="Pets" id="wolf-radio" data-buff-type="strength" data-buff-amount="1">
  <label for="wolf-radio">Wolf</label>
</div>

<div>
  <input type="radio" name="Pets" id="lizard-radio" data-buff-type="mana" data-buff-amount="1">
  <label for="wolf-radio">Lizard</label>
</div>

<div>
  <input type="radio" name="Pets" id="turtle-radio" data-buff-type="regen" data-buff-amount="1">
  <label for="wolf-radio">Turtle</label>
</div>

<div>
  Strength: <span class="stat" id="strength"></span>
</div>

<div>
  Mana: <span class="stat" id="mana"></span>
</div>

<div>
  Regen: <span class="stat" id="regen"></span>
</div>