Итак, у меня есть домашнее животное, привязанное к радио-кнопке. Когда вы меняете переключатели, пассивный должен исчезнуть. У меня есть это, когда опыт перестает расти, но мое значение силы не вернется к значению по умолчанию (сила - число под переключателем)

enter image description here

По умолчанию значение силы равно 2, поэтому, когда переключатель включен, 2 + turtlestrength, мне нужно вернуться к значению 2 при смене кнопок.

Я пытался возиться с утверждениями if / settimeout, но, похоже, ничего не работает.

Я ожидаю, что при увеличении уровня Turtlestrength значение увеличится на 1, а при смене переключателя будет убрано пассивное прибавление к силе (в этом случае оно уменьшится до 2). Но фактический результат на кнопке изменяет значение силы, оставаясь в сочетании с Turtlestrength, и когда я нажимаю кнопку назад, это добавляет Turtlestrength к силе. Эта 2-я часть должна быть легко исправлена, если сила будет корректно обновляться при смене кнопки. Также на уровне выше, Turtlestrength не обновляется, чтобы быть на 1 выше (например, на уровне 1 у меня было 3 общих силы пассивно, но когда я поднимаюсь, уровень должен повыситься до 4, но остается на уровне 3.

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

function turtleandstrength (){  
  if (document.getElementById("turtle-radio").checked) {
    Strength = Strength + Turtlestrength
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = Strength - Turtlestrength
    document.getElementById("Strength").innerHTML = Strength;
  }
}

function turtleXpUp() {
  if (document.getElementById("turtle-radio").checked && TurtleCexp < 
    TurtleMexp) {
    setTimeout(turtleXpUp, 200)
    TurtleCexp = TurtleCexp + 1;
    document.getElementById("TurtleCexp").innerHTML = TurtleCexp;
  } 

  if (TurtleCexp >= TurtleMexp) {
    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; 
}

document.getElementById("turtle-radio").addEventListener("change", turtleXpUp);
document.getElementById("turtle-radio").addEventListener("change", turtleandstrength);
document.getElementById("Strength").innerHTML = Strength;
<div 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 />
    <span id="Strength">0</span>
    <br />
    <label class="radio">
        <input type="radio" name="Pets" id="dog-radio">
    </label>
0
tmanrocks994 30 Май 2019 в 04:55

2 ответа

Лучший ответ

Если вы добавите прослушиватель событий на другую радиокнопку, Strength выключится при переключении кнопки.

Добавьте это после прослушивателя событий для turtle-radio:

document.getElementById("dog-radio").addEventListener("change", turtleandstrength);
1
Azer 30 Май 2019 в 02:56

Это происходит потому, что событие change не срабатывает на переключателе, когда оно становится неконтролируемым, только когда оно проверено. Вы можете добавить простое console.log() сообщение вверху вашей функции, чтобы увидеть, что функция запускается только при установленном переключателе. Это означает, что ваше else состояние, когда вы снимаете силу, никогда не происходит.

Вам нужно добавить событие change ко всем переключателям и проверить, какая из них отмечена. Есть несколько ответов на stackoverflow, которые охватывают похожий сценарий, но что-то вроде этого будет работать:

var turtleRadio = document.getElementById("turtle-radio");
var dogRadio = document.getElementById("dog-radio");
var turtleInterval;

var Turtle = 1;
var Turtlelv = 1;
var TurtleCexp = 0;
var TurtleMexp = 100;
var NextMaxTurtleExp = TurtleMexp;
var Turtlestrength = 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 === turtleRadio) {
    turtleandstrength(true);
    turtleXpUp(true);
    // Run other functions...
  } else if (event.target === dogRadio) {
    turtleandstrength(false);
    turtleXpUp(false);
    // Run other functions...
  }
}

function turtleandstrength(turtleChecked) {
  if (turtleChecked) {
    Strength = Strength + Turtlestrength
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = Strength - Turtlestrength;
    if (Strength < 2) Strength = 2;
    document.getElementById("Strength").innerHTML = Strength;
  }
}

function turtleXpUp(turtleChecked) {
  clearInterval(turtleInterval);

  if (turtleChecked && TurtleCexp < TurtleMexp) {
    turtleInterval = setInterval(function () { turtleXpUp(turtleChecked); }, 200);
    TurtleCexp = TurtleCexp + 1;
    document.getElementById("TurtleCexp").innerHTML = TurtleCexp;
  } 

  if (TurtleCexp >= TurtleMexp) {
    Turtlelv = Turtlelv + 1;
    TurtleCexp = 0;
    Turtle = Turtle + 1;
    Turtlestrength = Turtlestrength + 1;
    Strength = Strength + 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; 
}

//document.getElementById("turtle-radio").addEventListener("change", turtleXpUp);
//document.getElementById("turtle-radio").addEventListener("change", turtleandstrength);
turtleRadio.addEventListener("change", radioChanged);
dogRadio.addEventListener("change", radioChanged);
document.getElementById("Strength").innerHTML = Strength;
<div 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 />
    <span id="Strength">0</span>
    <br />
    <label class="radio">
        <input type="radio" name="Pets" id="dog-radio">
    </label>

Обратите внимание, что я также изменил setTimeout на setInterval, поскольку это именно та функция, которую вы действительно ищете.

1
skyline3000 30 Май 2019 в 03:21
56370690