CODEWITHSUNDEEP
javascriptinput
Krystian
Krystian

Reputation: 987

Check if inputs are empty or have text instead of numbers

as you can see here https://jsfiddle.net/kztnmm9o/ I am trying to check if the inputs are empty. If they are empty I want to display the div id="fehler", if every input has a value (must be a number, if not it shall display id="fehler" as well) I want to do the function. I am pretty new to javascript, might be a obvious mistake. Thank you for your help!

This is the orignal javascript code without checking the inputs, which works:

var selectors = document.querySelectorAll("#eing1, #eing2, #eing3");
    for (var i = 0; i < selectors.length; i++) {
        selectors[i].addEventListener('keyup', function(event) {
        event.preventDefault();
         if (event.keyCode == 13) {
         document.getElementById("button").click();
       }
        });
    }

  function ausgeben(){


            var kostentisch = parseInt(document.getElementById("eing1").value)
            var bruttogehalt = parseInt(document.getElementById("eing2").value)
            var arbeitstage = parseInt(document.getElementById("eing3").value)

            var stundenlohn = bruttogehalt/arbeitstage/8;
            var arbeitszeit = arbeitstage*8;
            var produktivitaetssteigerung = arbeitszeit*0.12;
            var produktivitaetssteigerung2 = arbeitstage/produktivitaetssteigerung;
            var gewinnprotag = produktivitaetssteigerung2*stundenlohn;
            var amortisationszeit = Math.round(kostentisch/ gewinnprotag);

            document.getElementById("arbeitszeit").innerHTML=arbeitszeit + " Stunden";
            document.getElementById("produktivitaetssteigerung").innerHTML=produktivitaetssteigerung + " Stunden";
            document.getElementById("amortisationszeit").innerHTML=amortisationszeit + " Tage";
    }

Upvotes: 0

Views: 57

Answers (1)

A. L
A. L

Reputation: 12639

updated fiddle: https://jsfiddle.net/kztnmm9o/3/

Changed the testing to this:

    var test = document.querySelectorAll('input[type="text"]');
var error = false;

    for (var i = 0; i < test.length; ++i) {
    if (test[i].value == "")
  {
    test[i].style.borderColor = "red";
    error = true;
  }
}

I also made some minor changes following this logic, but it should be pretty simple to understand.

I also added this.style.borderColor = "transparent"; to keyup event but I'm not sure whether you like or not. So change on will.

Upvotes: 1

Related Questions