PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
P

Waarde controle en inkleuren werkt niet 100% met javascript.

Door Pascal Schuffelers op 22-03-2019 07:40 gewijzigd op 22-03-2019 07:42
2.358 views
Ik heb op mijn pagina een controle op mijn input velden zitten.
Hij controleert aan de hand van de ingelezen waarde of het ingevulde waarde er tussen in ligt.
Echter ik heb een fenomeen, ook vermoedelijk te begrijpen, dat hij sommige input velden rood kleurt terwijl niets is ingevuld.

Mijn code die ik hiervoor bv gebruik is deze.:
if (t1 == 0 && t2 == 0) { $('#KleurL').css({'backgroundColor':'white'});  }
    else if (isNaN(get_value) || get_value < t1 || get_value > t2) {
        $('#KleurL').css({'backgroundColor':'red'});
        }  else { //$("#KleurL").addClass('green');
        $('#KleurL').css({'backgroundColor':'white'});
        } ;


Als beide ingelezen waarde (t1 en t2) beide 0 zijn doet hij niets, blijft de achtergrond van de input veld wit, dat is goed.
Maar als de grenzen bv 0 en 20 en ingevulde waarde buiten de grenzen valt van t1 en t2 kleurt hij ook rood, dat is goed en als ik niks invul blijft hij wit, vermoedelijk, naar mijn mening ziet hij de begin waarde als 0 aan als niks is ingevuld.
Maar als ik grenzen heb van 70 en 80 , dan kleurt hij zonder iets in te vullen al rood.

Hopelijk is mijn vraagstelling duidelijk en is dit eventueel op te lossen?
R
Rob Doemaarwat
22-03-2019 08:07
En wat is de waarde van get_value dan (waar komt deze waarde vandaan; op welke event voer je dit uit)?
P
Pascal Schuffelers
22-03-2019 11:48
Rob Doemaarwat op 22/03/2019 08:07:29

En wat is de waarde van get_value dan (waar komt deze waarde vandaan; op welke event voer je dit uit)?


get_value is de waarde die hij uitleest wat je invult in het input field.
var get_value = $("#KleurL").val();

Thomas van den Heuvel
22-03-2019 13:40
Pascal Schuffelers op 22/03/2019 07:40:46
dan kleurt hij zonder iets in te vullen al rood.

Komt dat niet gewoon doordat isNaN(get_value) dan true oplevert?
P
Pascal Schuffelers
22-03-2019 13:47
Thomas van den Heuvel op 22/03/2019 13:40:57

[quote="Pascal Schuffelers op 22/03/2019 07:40:46"]dan kleurt hij zonder iets in te vullen al rood.

Komt dat niet gewoon doordat isNaN(get_value) dan true oplevert?
[/quote]

Als ik die weg laat doet hij namelijk ook hetzelfde.
Thomas van den Heuvel
22-03-2019 15:34 gewijzigd op 22-03-2019 15:35
Zet je get_value wel ergens expliciet om naar een integer met parseInt()? Alle formulierinhoud is per definitie van het type string geloof ik. JavaScript is (nogal) typegevoelig.
P
Pascal Schuffelers
23-03-2019 06:51 gewijzigd op 23-03-2019 08:21
Thomas van den Heuvel op 22/03/2019 15:34:28

Zet je get_value wel ergens expliciet om naar een integer met parseInt()? Alle formulierinhoud is per definitie van het type string geloof ik. JavaScript is (nogal) typegevoelig.


Nee dat had ik niet gedaan, nu net even gedaan en nu kleuren alle vakken rood en de ene wel en de andere niet, dus ik ga ervan uit dat die controle nu niet correct is.

Vraag, die parseInt() rond die af op hele getallen? merk dat hij op hele getallen wel werkt maar niet achter de komma of moet deze ook omgezet worden .: var t1 = document.getElementById('emp_RColorLMin').innerHTML;


[update]
Opgelost met parseFloat :D
Moet je wel gelijk geven Javascript is wel heel erg gevoelig voor fouten :S
Thomas van den Heuvel
23-03-2019 16:46 gewijzigd op 23-03-2019 23:48
Nah, JavaScript is gewoon (veel) strict(er). Waarschijnlijk was je strings aan het vergelijken in plaats van getallen. Dan geldt een andere (alfabetische) sorteringsvolgorde waardoor het lijkt alsof de resultaten willekeurig zijn.

Vergelijk:
<!DOCTYPE html>
<html>
<head>
<title>sortering test</title>
</head>

<body>
<script type="text/javascript">
var test1 = '3.14'; // let op quotes
var test2 = '12'; // alles wat uit een formulier komt is per definitie van het type string

alert(test1 < test2); // levert false, immers 3 komt alfabetische gezien na 1
alert(parseFloat(test1) < parseFloat(test2)); // levert true, immers 3.14 is kleiner dan 12
</script>
</body>
</html>

Reageren

Inloggen om te reageren