How to add passive values to radio buttons

Question

I want while the turtle radio button is selected for there to be a passive increase in strength like this:

Also on level up, I want it to add +1 to that value so when the turtle is level 2 the passive is +2 strength.

I'm mostly wondering how you do passive effects in HTML. Do radio buttons have the ability to passively modify variables when selected? My idea is similar to changing gear in an RPG. I would also like Cexp to go up 1 every second when the radio button is selected.

Here is my current code:

var Turtle = 1;
var Turtlelv = 1;
var TurtleCexp = 0;
var TurtleMexp = 100;
var NextMaxTurtleExp = TurtleMexp;
var Turtlestrength = 1 + Strength

function turtlepassive() {
    if (TurtleCexp < NextMaxTurtleExp) {
        TurtleCexp = TurtleCexp + 1;
        document.getElementById("TurtleCexp").innerHTML = TurtleCexp;
    } else {
        Turtlelv = Turtlelv + 1;
        TurtleCexp = 0;
        Turtle = Turtle + 1;
        Turtlestrength = Turtlestrength + 1;
        NextMaxTurtleExp = NextMaxTurtleExp * 1.5;
        document.getElementById("Strength").innerHTML = Strength;
        document.getElementById('TurtleMexp').innerHTML = 
NextMaxTurtleExp;
        document.getElementById('Turtlelv').innerHTML = Turtlelv;
        document.getElementById('TurtleCexp').innerHTML = TurtleCexp;
        document.getElementById('Turtle').innerHTML = Turtle;
     }
}

Html code:

<div id="turtle" class="control">
    <label class="radio">
        <input type="radio" name="Pets">
    </label>
    <img src="turtle.png" alt="turtle" height="100" width="100">Lv <span id="Magiclv">1</span> <span id="MagicCexp">0</span> / <span id="MagicMexp">100</span>
</div>

I expect while the turtle radio button is selected for exp to go up by 1 every second and to have a passive buff to strength by 1 at level 1 and 2 at level 2 and so on. But the actual result I can't get this to work properly.

Answer 1

Radio buttons can't passively change a variable, but this can be done programmatically.

This is basic code (that you should remake for your program) demonstrating how you could have strength affected by whether or not the turtle is selected and the turtle's level. When the turtle is selected, it adds the amount to the variable, and when the turtle is deselected it removes the amount.

<div id="turtle" class="control">
  <label class="radio">
    <input type="radio" name="Pets" id="turtle-radio">

document.getElementById("turtle-radio").addEventListener("change", () => {
  if (document.getElementById("turtle-radio").checked) {
    //increase strength by level
  } else {
    //decrease strength by level
  }
}

As for updating the turtle's level over time, this can also be done. Let's assume that the turtle always needs 100xp to level up. Every second that the radio is checked, it will add 1xp to the turtle and set a timeout for another check. When the xp reaches 100, have the turtle level up. When the radio button isn't check, the timeout shouldn't refresh.

function turtleXpUp() {
  if (document.getElementById("turtle-radio").checked) {
    setTimeout(turtleXpUp, 1000)
    //turtle xp +1
  }
  if (/* xp == 100*/) {
    if (document.getElementById("turtle-radio").checked) {
      //increase strength by 1
      //increase level by 1
    }
  }
}
document.getElementById("turtle-radio").addEventListener("change", turtleXpUp)