So I want to make a function to see which radio button is active, then process the effects of removing that effect with a true/false flag for each radio button turtle, wolf, lizard, etc . So like

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

Then when you set one of those active you pass to a function and look at all the others to see if it's true. If it's true, subtract it's values. And then set the others to false.

I mostly want this done so when you switch radio buttons the stats/ functions tied to those radio buttons don't carry over. When switching from turtle to lizard I lose 1 strength and that shouldn't happen with this method. Im new to doing JavaScript so this kind of concept im not sure how to set up to make it work. I will show you in my code what i mean

I had someone try to explain it to me but i couldn't format it correctly.

He said "When the radiobutton changes make the eventlistener call a function which determines which of those is active then create a function to figure out what is active and make a remove for each one Part of the remove is to set it false Then after that's finished set the new one true"

This is my JavaScript code:

 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>

You can see from the snippet switching from wolf to lizard radio button works fine because you start with 2 strength. But when you switch from turtle to lizard I don't want you to lose 1 strength. Each radio buttons buffs should only be on while the radio button is selected. (hence why i want a good true/false flag) . My actual output the radio buttons functions / stats aren't tied to directly to them being selected. I'm hoping makinging the other radio buttons false while one is true will fix this.

1 Answers

1
Tyler Roper On

So, I may have rewritten this a bit too much, but personally I'd go a route like the following.

To define which pet gets which buff, and how much that buff is, use data attributes. For example, if wolf should buff strength by 1, then it would have data-buff-type="strength" and data-buff-amount="1" in the HTML.

Then, you can store the base stats separately, and have a function that checks/applies the pet buff. I've added comments beside each line to explain.

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>