Использование GetElementsByClassName для проверки значений флажков и если флажок установлен программно - PullRequest
Новая
       0

Использование GetElementsByClassName для проверки значений флажков и если флажок установлен программно

1 голос
/ 29 января 2020

Задача - записать в строку, был ли установлен флажок из серии из 27 флажков с одинаковым именем класса "GEMS_0".

Когда я обращаюсь к элементам через консоль, это работает. 

document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value

возвращает «перемещено» 

document.getElementById(document.getElementsByClassName("GEMS_0")[0].id).value

возвращает ложь.

Когда я делаю это программно, вызывая getGEMSValue (0), он работает для первого элемента и затем возвращает значение null для значения второго элемента, когда он должен быть «заполнен чудом». Я попытался изменить его на «заполненный чудом», но это ничего не изменило.

Вот код для программного доступа к элементам: 

  function getGEMSValue(num) {
    let return_string = "";
    let checkboxes = document.getElementsByClassName("GEMS_" + num.toString());
    console.log(checkboxes);
    for (var i = 0; i < checkboxes.length; i++) {
      console.log(checkboxes[i].id);
      console.log(document.getElementById(checkboxes[i].id));
      let value = document.getElementById(checkboxes[i].id).value
      if (document.getElementById(checkboxes[i].id).checked) {
        return_string += value + ";";
      } else {
        return_string += "false;";
      }
    }
    //remove semicolon at end
    return_string = return_string.slice(0,-1);
    return return_string;
  }

Это HTML осуществляется доступ. 

      <p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
      <!-- 9 emotions per row, 5 rows -->
      <div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
          <label class="form-check-label" for="inlineCheckbox1">moved</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
          <label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
          <label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
          <label class="form-check-label" for="inlineCheckbox4">fascinated</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
          <label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
          <label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
          <label class="form-check-label" for="inlineCheckbox7">serene</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
          <label class="form-check-label" for="inlineCheckbox8">calm</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
          <label class="form-check-label" for="inlineCheckbox9">soothed</label>
        </div>
        <br />
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
          <label class="form-check-label" for="inlineCheckbox10">tender</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
          <label class="form-check-label" for="inlineCheckbox11">affectionate</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
          <label class="form-check-label" for="inlineCheckbox12">mellow</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
          <label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
          <label class="form-check-label" for="inlineCheckbox14">sentimental</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
          <label class="form-check-label" for="inlineCheckbox15">dreamy</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
          <label class="form-check-label" for="inlineCheckbox16">strong</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
          <label class="form-check-label" for="inlineCheckbox17">energetic</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
          <label class="form-check-label" for="inlineCheckbox18">triumphant</label>
        </div>
        <br />
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
          <label class="form-check-label" for="inlineCheckbox19">animated</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
          <label class="form-check-label" for="inlineCheckbox20">bouncy</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
          <label class="form-check-label" for="inlineCheckbox21">joyful</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
          <label class="form-check-label" for="inlineCheckbox22">sad</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
          <label class="form-check-label" for="inlineCheckbox23">tearful</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
          <label class="form-check-label" for="inlineCheckbox24">blue</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
          <label class="form-check-label" for="inlineCheckbox25">tense</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
          <label class="form-check-label" for="inlineCheckbox26">agitated</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
          <label class="form-check-label" for="inlineCheckbox27">nervous</label>
        </div>
        <br />
      </div>

Ответы [ 3 ]

1 голос
/ 29 января 2020

Как сказано в комментариях, document.getElementById( element.id ) - это анти-шаблон, и он должен быть просто element, поскольку id должен быть уникальным в документе.

Но для вашей задачи необходимо выполнить итерации по всем флажки, а затем проверяя все их checked статус для создания вашей строки, вы можете получить тот же результат гораздо быстрее, используя простой :checked селектор : 

document.getElementById('checker').onclick = (evt) => {
  // select only the checked inputs with class GEMS_0
  const checked_gems = document.querySelectorAll('.GEMS_0:checked');
  // compose your string of values
  const result = [...checked_gems].map( elem => elem.value ).join(';');
  console.log( result );
}
body { margin-bottom: 150px; }
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
    <label class="form-check-label" for="inlineCheckbox1">moved</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
    <label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
    <label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
    <label class="form-check-label" for="inlineCheckbox4">fascinated</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
    <label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
    <label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
    <label class="form-check-label" for="inlineCheckbox7">serene</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
    <label class="form-check-label" for="inlineCheckbox8">calm</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
    <label class="form-check-label" for="inlineCheckbox9">soothed</label>
  </div>
  <br />
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
    <label class="form-check-label" for="inlineCheckbox10">tender</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
    <label class="form-check-label" for="inlineCheckbox11">affectionate</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
    <label class="form-check-label" for="inlineCheckbox12">mellow</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
    <label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
    <label class="form-check-label" for="inlineCheckbox14">sentimental</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
    <label class="form-check-label" for="inlineCheckbox15">dreamy</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
    <label class="form-check-label" for="inlineCheckbox16">strong</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
    <label class="form-check-label" for="inlineCheckbox17">energetic</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
    <label class="form-check-label" for="inlineCheckbox18">triumphant</label>
  </div>
  <br />
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
    <label class="form-check-label" for="inlineCheckbox19">animated</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
    <label class="form-check-label" for="inlineCheckbox20">bouncy</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
    <label class="form-check-label" for="inlineCheckbox21">joyful</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
    <label class="form-check-label" for="inlineCheckbox22">sad</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
    <label class="form-check-label" for="inlineCheckbox23">tearful</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
    <label class="form-check-label" for="inlineCheckbox24">blue</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
    <label class="form-check-label" for="inlineCheckbox25">tense</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
    <label class="form-check-label" for="inlineCheckbox26">agitated</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
    <label class="form-check-label" for="inlineCheckbox27">nervous</label>
  </div>
  <br />
</div>
<button id="checker">check selection</button>
0 голосов
/ 29 января 2020

В качестве упомянутого вопроса document.getElementsByClassName.

Просто небольшое изменение на JS ответа @Kaiido

const checkedVals = () => {
    let result = [];
    Array.from(document.getElementsByClassName("GEMS_0")).forEach(elem => elem.checked ? result.push(elem.value) : '');
    console.log(result, result.join(';'));
    // OR
    let result1 = Array.from(document.getElementsByClassName("GEMS_0")).map(elem => elem.checked ? elem.value : null).filter(x => !!x);
    console.log(result1, result1.join(';'));
};
document.getElementById('checker').onclick = checkedVals;
body {
  margin-bottom: 150px;
}
<p align="center">How would you describe this video's overall emotion? You may select multiple options.</p>
<!-- 9 emotions per row, 5 rows -->
<div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox1" value="moved">
    <label class="form-check-label" for="inlineCheckbox1">moved</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox2" value="filled with wonder">
    <label class="form-check-label GEMS_0" for="inlineCheckbox2">filled with wonder</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox3" value="allured">
    <label class="form-check-label GEMS_0" for="inlineCheckbox3">allured</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox4" value="fascinated">
    <label class="form-check-label" for="inlineCheckbox4">fascinated</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox5" value="overwhelmed">
    <label class="form-check-label" for="inlineCheckbox5">overwhelmed</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox6" value="feeling of transcendence">
    <label class="form-check-label" for="inlineCheckbox6">feeling of transcendence</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox7" value="serene">
    <label class="form-check-label" for="inlineCheckbox7">serene</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox8" value="calm">
    <label class="form-check-label" for="inlineCheckbox8">calm</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox9" value="soothed">
    <label class="form-check-label" for="inlineCheckbox9">soothed</label>
  </div>
  <br />
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox10" value="tender">
    <label class="form-check-label" for="inlineCheckbox10">tender</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox11" value="affectionate">
    <label class="form-check-label" for="inlineCheckbox11">affectionate</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox12" value="mellow">
    <label class="form-check-label" for="inlineCheckbox12">mellow</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox13" value="nostalgic">
    <label class="form-check-label" for="inlineCheckbox13">nostalgic</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox14" value="sentimental">
    <label class="form-check-label" for="inlineCheckbox14">sentimental</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox15" value="dreamy">
    <label class="form-check-label" for="inlineCheckbox15">dreamy</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox16" value="strong">
    <label class="form-check-label" for="inlineCheckbox16">strong</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox17" value="energetic">
    <label class="form-check-label" for="inlineCheckbox17">energetic</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox18" value="triumphant">
    <label class="form-check-label" for="inlineCheckbox18">triumphant</label>
  </div>
  <br />
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox19" value="animated">
    <label class="form-check-label" for="inlineCheckbox19">animated</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox20" value="bouncy">
    <label class="form-check-label" for="inlineCheckbox20">bouncy</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox21" value="joyful">
    <label class="form-check-label" for="inlineCheckbox21">joyful</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox22" value="sad">
    <label class="form-check-label" for="inlineCheckbox22">sad</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox23" value="tearful">
    <label class="form-check-label" for="inlineCheckbox23">tearful</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox24" value="blue">
    <label class="form-check-label" for="inlineCheckbox24">blue</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox25" value="tense">
    <label class="form-check-label" for="inlineCheckbox25">tense</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox26" value="agitated">
    <label class="form-check-label" for="inlineCheckbox26">agitated</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input GEMS_0" type="checkbox" id="inlineCheckbox27" value="nervous">
    <label class="form-check-label" for="inlineCheckbox27">nervous</label>
  </div>
  <br />
</div>
<button id="checker">check selection</button>
0 голосов
/ 29 января 2020

просто используйте этот код 

function getGEMSValue(num) {
  let inElm = document.getElementById('inlineCheckbox'+num);

  //... 
  console.log( inElm.id,  inElm.checked, inElm.value );
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...