Блог

Главная - Вопросы по программированию - Флажок не активируется в функции If / Else

Флажок не активируется в функции If / Else

#javascript #dom

#javascript #dom

Вопрос:

Я собираю фрагменты таблицы символов D amp; D в HTML и Javascript, чтобы практиковать то, что я изучаю, и у меня возникли небольшие проблемы с флажком на нем. Я создал список «навыков», которые, если их установить, должны добавить дополнительный бонус. У меня это есть в операторе If / Else, который, по крайней мере, работает достаточно, чтобы показать значение «Else», но после нажатия флажка ничего не меняется. Похоже, проблема в том, как я установил флажок в операторе «If». Я все еще новичок, поэтому я уверен, что это что-то очевидное, что я пропустил. Любая помощь приветствуется!

 const abilityBonus = {
  strBonus: 3,
  dexBonus: 4,
  conBonus: 1,
  intBonus: 3,
  wisBonus: 2,
  chaBonus: 2,
  profBonus: 3,
};



// Test If/Else for checkbox to add Proficiency bonus, id as an arugement

function skillBonusTwo(ability, elementID) {
  const checkBox = document.getElementsByClassName('skill-box');
  const skillAbility = abilityBonus[ability];
  const totalBonus = skillAbility   abilityBonus.profBonus;
  if (checkBox.checked == true) {
    document.getElementById(elementID).value = totalBonus;
  } else {
    document.getElementById(elementID).value = skillAbility;
  }
}
skillBonusTwo('chaBonus', 'deception');
skillBonusTwo('chaBonus', 'intimidation');
skillBonusTwo('dexBonus', 'acrobatics');
skillBonusTwo('strBonus', 'athletics');  
 <div id="skills">
      <ul id="skill-list">
        <lh>Skills</lh>
        <li>
          <label><input class="skill-box" id="acro-box" type="checkbox" />Acrobatics </label><input id="acrobatics" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Animal Handling</label><input id="animal-handling" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Arcana</label><input id="arcana" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Athletics</label><input id="athletics" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" id="deception-box" type="checkbox" />Deception</label><input id="deception" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />History</label><input id="history" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Insight</label><input id="insight" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Intimidation</label><input id="intimidation" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Investigation</label><input id="investigation" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Medicine</label><input id="medicine" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Nature</label><input id="nature" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Perception</label><input id="perception" class="bonus-box" type="text" readonly="true"/>
        </li>

        <li>
          <label><input class="skill-box" type="checkbox" />Performance</label><input id="performance" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Persuasion</label><input id="persuasion" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Religion</label><input id="religion" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Sleight of Hand</label><input id="sleight-of-hand" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Stealth</label><input id="stealth" class="bonus-box" type="text" readonly="true"/>
        </li>
        <li>
          <label><input class="skill-box" type="checkbox" />Survival</label><input id="survival" class="bonus-box" type="text" readonly="true"/>
        </li>
      </ul>
    </div>

Комментарии:

1. document.getElementsByClassName возвращает HTMLCollection. Вы не можете проверить, установлен ли флажок htmlcollection.

2. замените document.getElementsByClassName(‘skill-box’) на => document.getElementsById(‘skill-box’) и вместо class=»skill-box» сделайте его id=»skill-box»

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