0

Below is the code I have for checking whether an element exists or not and then assigning a class to it. With the jquery datepicker control, the document.queryselectorall results come up blank, how can I get all items for "allInputsAndSelects = document.querySelectorAll('input, select, datepickerFilterStartDate, datepickerFilterEndDate');" ?

It's an input, but that doesn't work with my code and div as well as the actual id did not work either?

Thanks

          var controlList = ['datepickerInputStart', ]; //'tbxPassword', 'tbxConfirmPassword', 'ddlLogonDomain', 'ddlDatabase', 'tbxOuNameSelected'];
          if (checkControlExistence(controlList)) {
              var valToCheck = ($("#datepickerInputStart").val())
              if (($('#datepickerInputStart').val() != '')) {
                  if (checkForNumericValuesOnly(valToCheck)) {
                      if (valToCheck.length == 6) {
                          document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " inprogress";
                          document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " required";
                          document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className + " successful";
                      }
                      else {
                          document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " successful";
                          document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " required";
                          document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className + " inprogress";
                      }
                  }
                  else if (checkForNumericValuesOnly(valToCheck) == false) {
                      document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " successful";
                      document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " required";
                      document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className + " inprogress";
                  }
              }
              else {
                  document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " inprogress";
                  document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className - " successful";
                  document.getElementById("datepickerInputStart").className = document.getElementById("datepickerInputStart").className + " required";
              }

          }




  function checkControlExistence(controlsToCheckFor) {
      var existingControlCount = 0;
      var allInputs = new Array();
      var allSelects = new Array();
      var foundControls = new Array();
      var allInputsAndSelects = new Array();
      //allInputs = document.getElementsByTagName('input');
      allInputsAndSelects = document.querySelectorAll('input, select, datepickerFilterStartDate, datepickerFilterEndDate');
      //allSelects = document.getElementsByTagName('select');
      var inputNameList = ["First Element", " ", controlsToCheckFor];
      for (i = 0; i < allInputsAndSelects.length; i++) // mazda, bmw, saab, volvo, toyota
      {
          for (var j = 0; j < controlsToCheckFor.length; j++) {
              var inputName = allInputsAndSelects[i].name.toString();
              inputNameList.push(inputName);
              if (inputName.indexOf(controlsToCheckFor[j].toString()) !== -1) {
                  existingControlCount++;
                  foundControls.push(controlsToCheckFor[j].toString());
              }
          }
      }

      inputNameList;
      if (controlsToCheckFor.length == existingControlCount) {
          return true;
      }
      else {
          return false;
      }
  }
Bbb
  • 517
  • 6
  • 27
  • Can sure cut that all down a lot using `classList.add()` and `classList.remove()` and cache a reference to that element so you don't write `document.getElementById()` 37 times – charlietfl May 29 '18 at 22:57
  • Can you show the html template file you're running this javascript on? – Andrew May 29 '18 at 23:00
  • Being able to concatenate strings with `+` doesn't mean you can substract substrings with `-`. `"someString" - "some"` does not equal `"String"`. It equals `NaN` (not a number). To remove classes you want to use `classList.remove('class')` method. You should also use `classList.add('class')` to add it, so you don't end up with the same string twice. – tao May 29 '18 at 23:06
  • This all seems grossly over complicated. Can you provide an explanation of what your overall objective is here? – charlietfl May 29 '18 at 23:07
  • So instead of providing an answer, everyone is correcting the form of other functions that are working? I don't mind learning, I can admit that I'm new to html/JS and will certainly try the classlist add/remove, but contrary to what's been posted, that code works. I need help with what isn't working, which is the code centered around `allInputsAndSelects = document.querySelectorAll('input, select, datepickerFilterStartDate, datepickerFilterEndDate');` . I'm not getting all controls, for example the datapicker jquery code. My end goal is to be able to iterate through all controls. – Bbb May 30 '18 at 03:18

1 Answers1

0

The answer is to use jquery and this function

Check if element exists in jQuery

I'm sure there is a way to use javascript within the code above, but I do not know the answer for that. Maybe someone will post that up if they stumble upon this post.

Bbb
  • 517
  • 6
  • 27