InnerHTML doesn't work with if condition in regExp [closed]

Question

i'm trying to add some confirmation to my form using RegExp The thing is that i use some condition in that way i can show to the user that the input is correct or not So i've created a below my input and using nextElementSibling and after that i'm using a innerHtml to add some Text and show it to the user here's the project on my GitHub https://github.com/Chardema/openclassroomp3.github.io But that doesn't work The is correct and JS can have access to it here's my code

const validFirst = function (inputFirst) {
  let msg;
  let valid = false;
  // au moins 2 caractère
  if (inputFirst.value.length < 2) {
    msg = "Le prénom est trop court";
  } else {
    msg = "le prenom est correct !!!";
    valid = true;
  }
  //Affichage
  //Récupération de la balise Small
  let small = inputFirst.nextElementSibling;

  //on test l'expression régulière
  if (valid) {
    small.innerHtml = "OK 👨🏼‍💻";
    small.classList.remove("text-danger");
    small.classList.add("text-success");
  } else {
    small.innerHtml = "c pas bon cthistoire 🥸";
    small.classList.remove("text-success");
    small.classList.add("text-danger");
  }
};

and the HTML

     <div
        class="formData">
        <label for= "first">Prénom</label>
        <input
          class="text-control"
          type="text"
          id="first"
          name="first"
          minlength="2"
        />
        <small></small>


         </div>

Thanks in advance :)

Answer 1

A few console messages show your code is fine up to the point where the text is sent to the page. This allows the error to be found - innerHtml should be innerHTML;

In the working snippet, I've called the function from the input's onchange event (so click outside the input after entering something). If you call by some other method, be sure to check the function receives the element and that each stage is performing the tasks expected of it. I also used 'test' as inner content of the small element to ensure all was as expected.

const validFirst = function (inputFirst) {
  console.log(inputFirst.value.length);
  let msg;
  let valid = false;
  // au moins 2 caractère
  if (inputFirst.value.length < 2) {
    msg = "Le prénom est trop court";
  } else {
    msg = "le prenom est correct !!!";
    valid = true;
  }
  console.log(valid, msg);
  //Affichage
  //Récupération de la balise Small
  let small = inputFirst.nextElementSibling;
  console.log(small.innerText);
  //on test l'expression régulière
  if (valid) {
    small.innerHTML = "OK ????";
    //small.classList.remove("text-danger");
    //small.classList.add("text-success");
  } else {
    small.innerHTML = "c pas bon cthistoire ?";
    small.classList.remove("text-success");
    small.classList.add("text-danger");
  }
};

     <div
        class="formData">
        <label for= "first">Prénom</label>
        <input
          class="text-control"
          type="text"
          id="first"
          name="first"
          minlength="2"
          onchange="validFirst(this)" 
        />
        <small>test</small>


         </div>

Answer 2

Replace .innerHtml by .innerHTML