Berekeningen met Javascript
Momenteel heb ik het volgende script om het maximale aantal eenheden automatisch in te laten vullen: (Noot: Dit is van één eenheid:)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
$ruiters_hout = round($Hout / $WDE['Ruiter_Hout'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_steen = round($Steen / $WDE['Ruiter_Steen'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_ijzer = round($IJzer / $WDE['Ruiter_IJzer'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_zwavel = round($Zwavel / $WDE['Ruiter_Zwavel'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_klei = round($Klei / $WDE['Ruiter_Klei'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_zilver = round($Zilver / $WDE['Ruiter_Zilver'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_inwoners = round($Inwoners / $WDE['Ruiter_Inwoners'], 0, PHP_ROUND_HALF_DOWN);
$arr_telling = array($ruiters_hout, $ruiters_steen, $ruiters_ijzer, $ruiters_zwavel, $ruiters_klei, $ruiters_zilver, $ruiters_inwoners);
$ruiters = min($arr_telling);
?>
$ruiters_hout = round($Hout / $WDE['Ruiter_Hout'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_steen = round($Steen / $WDE['Ruiter_Steen'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_ijzer = round($IJzer / $WDE['Ruiter_IJzer'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_zwavel = round($Zwavel / $WDE['Ruiter_Zwavel'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_klei = round($Klei / $WDE['Ruiter_Klei'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_zilver = round($Zilver / $WDE['Ruiter_Zilver'], 0, PHP_ROUND_HALF_DOWN);
$ruiters_inwoners = round($Inwoners / $WDE['Ruiter_Inwoners'], 0, PHP_ROUND_HALF_DOWN);
$arr_telling = array($ruiters_hout, $ruiters_steen, $ruiters_ijzer, $ruiters_zwavel, $ruiters_klei, $ruiters_zilver, $ruiters_inwoners);
$ruiters = min($arr_telling);
?>
$WDE komt af van een array:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$WDE = array(
// RUITER
"Ruiter_AK" => "40",
"Ruiter_VK" => "10",
"Ruiter_S" => "20",
"Ruiter_Hout" => "200",
"Ruiter_Steen" => "200",
"Ruiter_IJzer" => "200",
"Ruiter_Zwavel" => "5",
"Ruiter_Klei" => "50",
"Ruiter_Zilver" => "50",
"Ruiter_Inwoners" => "1",
"Ruiter_Tijd" => "00:05:00"
);
?>
$WDE = array(
// RUITER
"Ruiter_AK" => "40",
"Ruiter_VK" => "10",
"Ruiter_S" => "20",
"Ruiter_Hout" => "200",
"Ruiter_Steen" => "200",
"Ruiter_IJzer" => "200",
"Ruiter_Zwavel" => "5",
"Ruiter_Klei" => "50",
"Ruiter_Zilver" => "50",
"Ruiter_Inwoners" => "1",
"Ruiter_Tijd" => "00:05:00"
);
?>
Dan de volgende Javascript code om het getal in een formulier te plaatsen:
Code (php)
1
2
3
4
5
2
3
4
5
<SCRIPT LANGUAGE="JavaScript">
function writeText (form) {
form.ruiters.value = "<?php echo $ruiters; ?>"
}
</SCRIPT>
function writeText (form) {
form.ruiters.value = "<?php echo $ruiters; ?>"
}
</SCRIPT>
En daarbij hoort de volgende HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<tr>
<td><a id="Ruiter" >Ruiter</a></td> <!-- Eenheid Naam -->
<td><?php echo $WDE['Ruiter_AK']; ?></td> <!-- Aanvalskracht -->
<td><?php echo $WDE['Ruiter_VK']; ?></td> <!-- Verdedigingskracht -->
<td><?php echo $WDE['Ruiter_S']; ?></td> <!-- Snelheid -->
<td><?php echo $WDE['Ruiter_Hout']; ?></td> <!-- Hout -->
<td><?php echo $WDE['Ruiter_Steen']; ?></td> <!-- Steen -->
<td><?php echo $WDE['Ruiter_IJzer']; ?></td> <!-- IJzer -->
<td><?php echo $WDE['Ruiter_Zwavel']; ?></td> <!-- Zwavel -->
<td><?php echo $WDE['Ruiter_Klei']; ?></td> <!-- Klei -->
<td><?php echo $WDE['Ruiter_Zilver']; ?></td> <!-- Zilver -->
<td><?php echo $WDE['Ruiter_Inwoners']; ?></td> <!-- Inwoners -->
<td><?php echo $WDE['Ruiter_Tijd']; ?></td> <!-- Tijd -->
<td><?php echo $Ruiter; ?></td> <!-- Bezit -->
<td><input type="number" name="ruiters" min="0" max="115"></td> <!-- Maken -->
<td><INPUT TYPE="button" NAME="button2" Value="<?php echo $ruiters; ?>" onClick="writeText(this.form)"></td> <!-- Maximaal -->
</tr>
<td><a id="Ruiter" >Ruiter</a></td> <!-- Eenheid Naam -->
<td><?php echo $WDE['Ruiter_AK']; ?></td> <!-- Aanvalskracht -->
<td><?php echo $WDE['Ruiter_VK']; ?></td> <!-- Verdedigingskracht -->
<td><?php echo $WDE['Ruiter_S']; ?></td> <!-- Snelheid -->
<td><?php echo $WDE['Ruiter_Hout']; ?></td> <!-- Hout -->
<td><?php echo $WDE['Ruiter_Steen']; ?></td> <!-- Steen -->
<td><?php echo $WDE['Ruiter_IJzer']; ?></td> <!-- IJzer -->
<td><?php echo $WDE['Ruiter_Zwavel']; ?></td> <!-- Zwavel -->
<td><?php echo $WDE['Ruiter_Klei']; ?></td> <!-- Klei -->
<td><?php echo $WDE['Ruiter_Zilver']; ?></td> <!-- Zilver -->
<td><?php echo $WDE['Ruiter_Inwoners']; ?></td> <!-- Inwoners -->
<td><?php echo $WDE['Ruiter_Tijd']; ?></td> <!-- Tijd -->
<td><?php echo $Ruiter; ?></td> <!-- Bezit -->
<td><input type="number" name="ruiters" min="0" max="115"></td> <!-- Maken -->
<td><INPUT TYPE="button" NAME="button2" Value="<?php echo $ruiters; ?>" onClick="writeText(this.form)"></td> <!-- Maximaal -->
</tr>
En dat ziet er dan als volgt uit:
Nu wil ik, dat als je bij het "Maken" 50 invult, dat de waardes dan aanpassen. Dan moeten dus de aantallen veranderen onder "Maximaal" naar het maximale op dat moment.
Hoe doe ik dit?
En kun je misschien je tabel hier plaatsen (dus de opgemaakte versie in html).
Verder zou ik classes of id's gebruiken bij al je td's.
Peter, het script die je hier geeft is een beetje veroudert. Het eerste wat me opvalt is dat je hoofdletters gebruikt voor element namen, het is de standaard om hiervoor kleine letters te gebruiken. Daarnaast gebruik je het "language" attribute, deze heeft nooit echt bestaan. Je hebt voldoende aan alleen <script>, maar je mag dan eventueel ook nog <script type="text/javascript"> gebruiken.
Als laatste zou ik het invullen van de standaard waarden niet door JavaScript laten doen, maar gewoon door PHP. Je kunt dan gewoon een "value" attribuut aan het input toevoegen en daar in plaatsen.
Dan je vraag: Hiervoor moet je een "listener" aan een "event" van het "Maken" input boxje toevoegen. Een event is een actie die wordt uitgevoerd wanneer een handeling wordt gedaan. Aan zo'n event kun je dan een functie koppelen (die noemen we dan een listener). Dat betekend dat zodra het event uitgevoerd ("getriggert") wordt, alle functies van het event worden uitgevoerd.
In dit geval zou ik kiezen voor het "keyup" event. Deze wordt uitgevoerd nadat iemand het inputboxje gefocused heeft en daar iets heeft in getypt.
Daarmee kun je dan de maximale waarde veranderen. Een voorbeeldje:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// verkrijg de input boxjes bij hun "id"
var riddersMaken = document.getElementById('ridders-maken');
// verkrijg op dezelfde manier de elementen voor de maximale waarde
var riddersMax = document.getElementById('ridders-max');
// de "listener" voor ridders
riddersMaken.onkeyup = function (e) {
// de huidige waarde van riddersMax, omgezet tot een geheel getal
var huidigeMax = parseInt(riddersMax.innerText);
// nieuwe max is huidige max + de waarde van het riddersMaken element
riddersMax.innerText = huidigeMax + parseInt(this.value);
};
var riddersMaken = document.getElementById('ridders-maken');
// verkrijg op dezelfde manier de elementen voor de maximale waarde
var riddersMax = document.getElementById('ridders-max');
// de "listener" voor ridders
riddersMaken.onkeyup = function (e) {
// de huidige waarde van riddersMax, omgezet tot een geheel getal
var huidigeMax = parseInt(riddersMax.innerText);
// nieuwe max is huidige max + de waarde van het riddersMaken element
riddersMax.innerText = huidigeMax + parseInt(this.value);
};
Een live voorbeeld: http://jsbin.com/jozesoje/1/watch
Zoals je ziet is dit best wel een ramp als je dit voor elke rij in de tabel moet doen. Gelukkig kun je het veel dymamischer maken. Zie daarvoor: http://jsbin.com/jozesoje/2/watch
Toevoeging op 06/04/2014 14:55:27:
Ter illustratie van mijn punt over jQuery. In jQuery zou de bovenstaande code er zo uitzien:
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// verkrijg de input boxjes bij hun "id"
var riddersMaken = $('#ridders-maken');
// verkrijg op dezelfde manier de elementen voor de maximale waarde
var riddersMax = $('#ridders-max');
// de "listener" voor ridders
riddersMaken.on('keyup', function (e) {
// de huidige waarde van riddersMax, omgezet tot een geheel getal
var huidigeMax = parseInt($(this).text());
// nieuwe max is huidige max + de waarde van het riddersMaken element
riddersMax.text(huidigeMax + parseInt($(this).val()));
});
var riddersMaken = $('#ridders-maken');
// verkrijg op dezelfde manier de elementen voor de maximale waarde
var riddersMax = $('#ridders-max');
// de "listener" voor ridders
riddersMaken.on('keyup', function (e) {
// de huidige waarde van riddersMax, omgezet tot een geheel getal
var huidigeMax = parseInt($(this).text());
// nieuwe max is huidige max + de waarde van het riddersMaken element
riddersMax.text(huidigeMax + parseInt($(this).val()));
});
Ziet iemand waarom dit "makkelijker" is?
Wouter J op 06/04/2014 14:17:38:
Kumkwat Trender, jQuery maakt dit totaal niet makkelijker. Gebruik jQuery alleen wanneer je het nodig hebt. Want jQuery is in de meeste simpele gevallen helemaal niet makkelijker, vooral niet bij een JavaScript script van 3 regels zoals hier te geval is. jQuery begint pas met dingen makkelijker te maken als je het gaat hebben over grote javascript applicaties (1000+ regels), javascript animaties of AJAX requests.
Ik ben het niet helemaal met je eens. Het is een klein script ja en je moet anders jquery inladen, maar dat het "helemaal niet makkelijker" maakt?!
Wouter J op 06/04/2014 14:17:38:
Zoals je ziet is dit best wel een ramp als je dit voor elke rij in de tabel moet doen. Gelukkig kun je het veel dymamischer maken. Zie daarvoor: http://jsbin.com/jozesoje/2/watch
http://jsbin.com/jozesoje/2/watch
Misschien eerst testen volgende keer?
Overmatig quoten verwijderd, volgende keer graag alleen relevante stukjes uit een bericht quoten of helemaal niet quoten als je op het hele bericht reageert. Alvast bedankt![/modedit]
Gewijzigd op 06/04/2014 15:30:34 door Wouter J
Heb je gekeken of het script werkt? En weet je waar die meldingen vandaan komen? Die meldingen komen namelijk van JShint, een website die kijkt of je script voldoet aan alle JavaScript conventions, best practises en strict standards. De radix parameter is vrij zinloos: http://jslinterrors.com/missing-radix-parameter/
>> maar dat het "helemaal niet makkelijker" maakt?!
Zie jij wat er makkelijker aan is aan de jQuery variant die ik poste? Ikke niet namelijk...
Gewijzigd op 06/04/2014 15:31:04 door Wouter J