Как изменить текст метки только под флажком? - PullRequest
0 голосов
/ 17 января 2019

Поэтому я хочу сделать так, чтобы, если флажок установлен, увеличьте переменную hely , а если он не проверен и проверяется, уменьшите его на единицу. Надеюсь, вы получите мои мысли. (Например, hely теперь установлено на 30, но если я поставлю галочку, я хочу сделать 29)

var hetfoTomb = document.forms['checkbox'].elements['hetfo'];
var keddTomb = document.forms['checkbox'].elements['kedd'];
var szerdaTomb = document.forms['checkbox'].elements['szerda'];
var csutortokTomb = document.forms['checkbox'].elements['csutortok'];
var button = document.querySelector(".button");
var change = document.querySelector("#change");
var kotelezo = 2;
var hetfoC = 0;
var keddC = 0;
var szerdaC = 0;
var csutortokC = 0;
var hely = 30;

function checkingFunction() {
  if (checkbox.enabled == true) {
    hely++;
    change.innerHTML = hely;
  } else {
    hely--;
    change.innerHTML = hely;
  }
}

button.addEventListener("click", function() {
  for (var i = 0; i < hetfoTomb.length; i++) {
    if (hetfoTomb[i].checked) {
      hetfoC++;
    }
  }
  for (var i = 0; i < keddTomb.length; i++) {
    if (keddTomb[i].checked) {
      keddC++;
    }
  }
  for (var i = 0; i < szerdaTomb.length; i++) {
    if (szerdaTomb[i].checked) {
      szerdaC++;
    }
  }
  for (var i = 0; i < csutortokTomb.length; i++) {
    if (csutortokTomb[i].checked) {
      csutortokC++;
    }
  }
  if (hetfoC >= kotelezo && keddC >= kotelezo && szerdaC >= kotelezo && csutortokC >= kotelezo) {
    alert("Tovább a véglegesítéshez!");
  } else {
    alert("Hiba");
  }
})
<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Piarista Kollégium - Stúdiumi jelentkezés</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

  <div class="topnav">

    <div class="topnav-centered">
      <a href="#home" class="active">Jelentkezés</a>
    </div>

    <a href="updates.html">Frissítések</a>

    <div class="topnav-right">
      <a href="login.html">Bejelentkezés</a>
    </div>
  </div>
  <div id="head">
    <img src="logo.png">
  </div>
  <h2>Üdvözöllek, XY!</h2>
  </div>


  <form class="checkbox" id="checkbox" action="">
    <table>
      <thead>
        <tr>
          <th></th>
          <th>1.</th>
          <th>2.</th>
          <th>3.</th>
          <th>4.</th>
          <th>5.</th>
          <th>6.</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>Hétfő</th>
          <td><label><input type="checkbox" onclick="checkingFunction()" id="he2" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he3" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he1" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he4" name="hetfo">8</label></td>
          <td><label><input type="checkbox" id="he5" name="hetfo">8</label></td>
          <td><label id="change"><input type="checkbox" id="he6" name="hetfo">8</label></td>
        </tr>
        <tr>
          <th>Kedd</th>
          <td><label><input type="checkbox" id="ke1" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke2" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke3" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke4" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke5" name="kedd">8</label></td>
          <td><label><input type="checkbox" id="ke6" name="kedd">8</label></td>
        </tr>
        <tr>
          <th>Szerda</th>
          <td><label><input type="checkbox" id="sze1" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze2" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze3" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze4" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze5" name="szerda">8</label></td>
          <td><label><input type="checkbox" id="sze6" name="szerda">8</label></td>
          <tr>
            <hr>
            <th>Csütörtök</th>
            <td><label><input type="checkbox" id="cs1" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs2" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs3" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs4" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs5" name="csutortok">8</label></td>
            <td><label><input type="checkbox" id="cs6" name="csutortok">8</label></td>
          </tr>
      </tbody>
    </table>
    <input type="submit" class="button" value="Jelentkezés elküldése">
  </form>
  <script type="text/javascript" src="main.js"></script>
</body>

</html>

Теперь моя проблема в том, что он меняет все пространство флажка на текущий hely .

Ответы [ 2 ]

0 голосов
/ 17 января 2019

В вашей функции:

function checkingFunction() {
  if (checkbox.enabled == true) {
    hely++;
    change.innerHTML = hely;
  } else {
    hely--;
    change.innerHTML = hely;
  }
}

Измените свойство 'enabled' на 'флажок' следующим образом:

function checkingFunction() {
  if (checkbox.checked == true) {
    hely++;
    change.innerHTML = hely;
  } else {
    hely--;
    change.innerHTML = hely;
  }
}
0 голосов
/ 17 января 2019

Проблема в том, что метка change обернута вокруг флажка. Поэтому, когда вы присваиваете change.innerHTML, вы также перезаписываете флажок.

Вы должны снять флажок за пределами метки и использовать атрибут for, чтобы связать их.

<td><input type="checkbox" id="he6" name="hetfo"><label id="change" for="he6">8</label></td>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...