mixing function in arrays

              //HTML

    <button type="button" class="input" id="submit" name="button">ask</button>

    <input class="ask" type="text" class="input" id="cuestion" name="name" value="">

     <p class="aiAnswer" id="texBox"></p>

          let input = document.querySelector('#cuestion');

          let button = document.querySelector('#submit');

          let pAI = document.querySelector(".aiAnswer");

        let array = [
          {
            newQuestion : "what is your name",
            newAnswer : "i do not have a name"
          },
          {
            newQuestion : "hi",
            newAnswer : "hello"
          },
          {
            newQuestion : "what are you",
            newAnswer : "i dont know"
          },
          {
            newQuestion : "what can you do",
            newAnswer : "what ever you teach me to do"
          },
          {
            newQuestion : "how old are you",
            newAnswer : "i dont age"
          }
      ];


button.addEventListener("click", () =>{

      for (var i = 0; i < array.length; i += 1)
          {
                let x = array[i];
                let value = input.value;
                if (value == "") {
                       return;
                }else  if( value.toLowerCase() === (x.newQuestion ).toLowerCase()){

                          pAI.innerHTML = x.newAnswer;
                          // break;

                 }else { // this runs don't matter what the the top statement does 
                       alert("what ever");
                 }

          }

})