Какие мои флажки не реагируют индивидуально?

Поэтому проблема, с которой я сталкиваюсь, заключается в том, что мои флажки в моей JS-игре не отвечают на отдельные клики. Когда я console.log, я получаю индекс 0 каждый раз, независимо от того, какой ящик щелкнул и не отвечает. Однако функции уровня отвечают.

    window.onload = function() {

      console.log('DOM is loaded');
      fillAll = function() {
        // event.preventDefault();
        for (var i = 0; i < 25; i++) {
          document.bulbform.elements[i].checked = 1;
        }
      };

      clearAll = function() {
        for (var i = 0; i < 25; i++) {
          document.bulbform.elements[i].checked = 0;
        }
      };

      levelOne = function() {
        clearAll();
        document.bulbform.elements[10].checked = 1;
        document.bulbform.elements[12].checked = 1;
        document.bulbform.elements[14].checked = 1;
      };

      levelTwo = function() {
        clearAll();
        document.bulbform.elements[12].checked = 1;
        document.bulbform.elements[16].checked = 1;
        document.bulbform.elements[17].checked = 1;
        document.bulbform.elements[18].checked = 1;
        document.bulbform.elements[20].checked = 1;
        document.bulbform.elements[21].checked = 1;
        document.bulbform.elements[22].checked = 1;
        document.bulbform.elements[23].checked = 1;
        document.bulbform.elements[24].checked = 1;
      };

      levelThree = function() {
        fillAll();
        document.bulbform.elements[4].checked = 0;
        document.bulbform.elements[6].checked = 0;
        document.bulbform.elements[7].checked = 0;
        document.bulbform.elements[8].checked = 0;
        document.bulbform.elements[11].checked = 0;
        document.bulbform.elements[12].checked = 0;
        document.bulbform.elements[13].checked = 0;
        document.bulbform.elements[16].checked = 0;
        document.bulbform.elements[17].checked = 0;
        document.bulbform.elements[18].checked = 0;
        document.bulbform.elements[24].checked = 0;
      };

      levelFour = function() {
        clearAll();
        document.bulbform.elements[2].checked = 1;
        document.bulbform.elements[6].checked = 1;
        document.bulbform.elements[8].checked = 1;
        document.bulbform.elements[10].checked = 1;
        document.bulbform.elements[12].checked = 1;
        document.bulbform.elements[14].checked = 1;
        document.bulbform.elements[16].checked = 1;
        document.bulbform.elements[18].checked = 1;
        document.bulbform.elements[22].checked = 1;
      };

      levelFive = function() {
        clearAll();
        document.bulbform.elements[11].checked = 1;
        document.bulbform.elements[16].checked = 1;
        document.bulbform.elements[21].checked = 1;
      };

      checkAll = function() {
        var win = 1;
        for (var i = 0; i < 25; i++) {
          if (document.bulbform.elements[i].checked == 1) {
            win = 0;
          }
        }
        if (win == 1) {
          alert("You Won!");
        }
      };

      check = function(v) {
        a = parseInt(v);
        // console.log(parseInt(a));
        // console.log(typeof(a));

        if (document.bulbform.elements[v].checked == 1) {
          document.bulbform.elements[v].checked = 0;
        } else {
          document.bulbform.elements[v].checked = 1;
        }
        checkAll();
      };
    };
<body>
  <div class="row">
    <div class="col s12 m6">
      <div class="card-panel blue-grey lighten-3">
        <form name="bulbform">
          <!-- Row One -->
          <input type="checkbox" value="0" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="1" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="2" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="3" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="4" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>

          <!-- Row Two -->
          <input type="checkbox" value="5" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="6" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="7" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="8" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="9" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>

          <!-- Row Three -->
          <input type="checkbox" value="10" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="11" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="12" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="13" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="14" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>

          <!-- Row Four -->
          <input type="checkbox" value="15" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="16" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="17" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="18" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="19" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>

          <!-- Row Five -->
          <input type="checkbox" value="20" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="21" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="22" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="23" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <input type="checkbox" value="24" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" />
          <label for="filled-in-box"></label>
          <br>
          <!-- Stat Game Levels -->
          <a href="javascript:levelOne()" class="waves-effect waves-teal btn-flat">Level 1</a>
          <a href="javascript:levelTwo()" class="waves-effect waves-teal btn-flat">Level 2</a>
          <a href="javascript:levelThree()" class="waves-effect waves-teal btn-flat">Level 3</a>
          <a href="javascript:levelFour()" class="waves-effect waves-teal btn-flat">Level 4</a>
          <a href="javascript:levelFive()" class="waves-effect waves-teal btn-flat">Level 5</a>
          <!-- End Game Levels -->
          <br>
          <button class="btn waves-effect waves-light btn-large" type="reset" value="clear" name="action">Clear
            <i class="material-icons left">lightbulb_outline</i>
          </button>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="game.js"></script>
</body>

javascript,html,css,materialize,

0

Ответов: 2

2

У Дай есть хороший совет, но ваша актуальная проблема здесь:

... onclick="javascript:check(value)" ...

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

... onclick="javascript:check(this.value) ...

О, также:

флажки в моей JS-игре не отвечают на отдельные клики

потому что вы делаете:

if (document.bulbform.elements[v].checked == 1) {
  document.bulbform.elements[v].checked = 0;
} else {
  document.bulbform.elements[v].checked = 1;
}

Поэтому, если флажок снят, а затем щелкнет по нему, будет проверено состояние в прослушивателе, поэтому вы снова снимите его. И наоборот, если он проверен (пользователь щелкает, отключает его, тогда слушатель проверяет его снова). Это бессмысленно, просто удалите слушателя и установите флажок самостоятельно.

0

Думаю, ты поступаешь неправильно. 1) по умолчанию у вас установлен флажок true. 2) При щелчке по флажку он превращается в false, но ваш код имеет

if (document.bulbform.elements[v].checked == 1) { document.bulbform.elements[v].checked = 0; } else { document.bulbform.elements[v].checked = 1; }

которые снова вернут флажок в значение true. Поэтому всякий раз, когда вы пытаетесь щелкнуть этот флажок, check вернет false при изменении состояния и изменения кода ur, которые снова изменились на true

Удалите вышеуказанный код из своего кода. Он будет работать нормально.

JavaScript, HTML, CSS, материализуются,
Похожие вопросы
Яндекс.Метрика