So I want to make it like if the checkbox is checked, increase the variable hely, and if it is unchecked and is getting checked, decrease it by one. Hope you get my thoughts. (For example hely is now set to 30 but if i make the checkbox checked, i want to make it 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>
Now my problem is that it changes the entire space of checkbox to the current hely.
Aucun commentaire:
Enregistrer un commentaire