Berekeningen met Javascript

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Peter  Flos

Peter Flos

06/04/2014 11:05:08
Quote Anchor link
Beste Lezer,

Momenteel heb ik het volgende script om het maximale aantal eenheden automatisch in te laten vullen: (Noot: Dit is van één eenheid:)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
?>

$WDE komt af van een array:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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"
);
?>

Dan de volgende Javascript code om het getal in een formulier te plaatsen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<SCRIPT LANGUAGE="JavaScript">
function writeText (form) {
    form.ruiters.value = "<?php echo $ruiters; ?>"
}
</SCRIPT>

En daarbij hoort de volgende HTML:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


En dat ziet er dan als volgt uit:
Afbeelding

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?
 
PHP hulp

PHP hulp

28/03/2024 23:46:25
 
Kumkwat Trender

Kumkwat Trender

06/04/2014 11:49:19
Quote Anchor link
Is het voor jou een optie om jQuery te gebruiken? Dat maakt alles veel makkelijker.
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.
 
Wouter J

Wouter J

06/04/2014 14:17:38
Quote Anchor link
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.

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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?php echo $ruiters; ?>
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)
PHP script in nieuw venster Selecteer het PHP script
1
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);
};

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)
PHP script in nieuw venster Selecteer het PHP script
1
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()));
});

Ziet iemand waarom dit "makkelijker" is?
 
Kumkwat Trender

Kumkwat Trender

06/04/2014 15:02:54
Quote Anchor link
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?
Afbeelding

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
 
Wouter J

Wouter J

06/04/2014 15:29:08
Quote Anchor link
>> Misschien eerst testen volgende keer?

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.