Not able to know whether values are being inserted or not

Question

Im taking input from user and keeping those values in new array called movie2. If user enters input again it should check the value from movie2 array and if it matches should give a pop up like it already added and if it is a different input it should add those values to movie2 array. I have tried many times but whatever the user inputs it is getting added, it is not comparing.

<!DOCTYPE html>
   <html>
     <head>
    <title>Movie Mania</title>
    <link rel="stylesheet" type="text/css" href="Movie.css" >
    <script src="Movie.js"></script>
    </head>
     <body>

   <div class="content">

   <div class="matter">

   <p class="header">Movie Mania</p>
  <div class="regis">

   <form class="reg">

    <input type="text" name="user" id="movie" placeholder="Please enter any 
    movie name"  size="40"><hr>
    <div><input type="submit" class="button" value="Search" id="sub" 
    onclick="validation()" /></div >

   </form></div>
    </div>
     </div></body>
     </html>

Javascript:

           var movie1 = ["Bahubali", "The Final Destination", "The Cars ","P.K ","   Bajarangi Baijaan ","Force "];
   var movie2=[];
   function validation() {
    var movie = document.getElementById("movie").value;
   if (!movie.trim()) { //its validate the input empty undefined null
     var name2 = "Please enter your favoite movie name";
   alert(name2);
    }
     else if (movie1.includes(movie)) { // includes used for  find the value is in array or not
    var name2 = "Movie exists in our database";
    alert(name2);
      } 
      else {
       insert();
        }}

    function insert(){
      var movie = document.getElementById("movie").value;

      if(movie2.indexOf(movie)==true){

        var name2="Movie already added to Array 2";
        alert(name2);
        }
       else{
        movie2.push(movie);
        var name2 = "Movie added into Array2";
        alert(name2);
          }
         }

`.includes()` is not very well supported by the browsers. Try using `.indexOf()` to see if it works. — abhishekkannojia, May 25 '17 at 16:11
Your posted code has `validation` function in HTML and the JS file has `insert` function. Could you post complete working code.. — Abhinav Galodha, May 25 '17 at 16:12
Which browser are you using? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes?v=control see browser support. Use 'indexOf' is a better option for now — Huangism, May 25 '17 at 16:13

Scott Marcus · Answer 1 · 2017-05-25T16:36:40.807

.includes() is part of ES2016, which isn't fully implemented in all browsers yet. Use .indexOf() instead. Now, indexOf() returns -1 when the value doesn't exist or the index position of the item when it does. You have:

if(movie2.indexOf(movie)==true){

Which is not the correct way to test against indexOf(). If indexOf() were to return 0, it would mean that the item was found at the first position in the array (indices start with 0). But, because you are attempting to compare it against true, true will be converted to a number (to perform a number to number comparison) and it will convert to 1. Since 0 doesn't equal 1, the test will fail, and insert the movie even though it already exists.

Also, JavaScript does not have block level scope when using the var keyword for declaration. If you declare a variable with var anywhere in a function, its scope is the entire function. So, you can't declare the variable in one branch of the if and then again in the other. In reality, you don't even need to set up your name variable because all you are doing with it is immediately displaying it in an alert(). Instead, you can just put your string in the alert().

Additionally, don't use inline HTML event attributes (onclick, etc.). Here's why.

Lastly, it appears that you are not actually trying to submit data anywhere. In that case, don't use a submit button, just use a regular button.

// Get refrence to button and textbox
var btn = document.querySelector("form.reg input[type=button]");

// Don't create references to DOM properties because if you decide you want
// to get the value of a different property later, you'll have to scan the DOM
// for the element all over again. Just get a reference to the element once and
// then you can access whatever property you need when you need it.
var movie = document.getElementById("movie");

// Set up click event handler
btn.addEventListener("click", validate);

var movie2 = [];

// Your two functions are redundant. They can be combined into this one:
function validate(evt){

  // Access the property of the DOM object you want (user input should always be trimmed)
  var mv = movie.value.trim();

  // Quick test for input:
  if(mv === "") {
    alert("You didn't enter anything!");
    return;
  }

  // If we've gotten this far, there is input, so test to see if it is already in the array
  var message = "";
  if(movie2.indexOf(mv) > -1){
    message = "Movie already added to Array 2!!!!";
  } else {    
    movie2.push(mv);
    message = "Movie added to Array 2";
  }
  
  alert(message);
  
  // Just for testing:
  console.clear();
  console.log(movie2);
}

<div class="content">
  <div class="matter">
    <p class="header">Movie Mania</p>
    <div class="regis">

       <form class="reg" action="#">
         <input type="text" name="user" id="movie" placeholder="Please enter any movie name" size="40">
         <hr>
         <div>
           <input type="button" class="button" value="Search" id="sub">
         </div>
       </form>
    </div>
  </div>
</div>

Ayush pratap · Answer 2 · 2017-05-25T19:37:14.173

The includes() method determines whether a string contains the characters of a specified string. This method returns true if the string contains the characters, and false if not.

Hence we shall not use includes() method to compare/search strings. There are multiple ways you can search for a string in an array of string. I check for string given to me in given array of string using

indexOf()

The indexOf() method returns the position of the first occurrence of a specified value in a string. This method returns -1 if the value to search for never occurs.

And where you are adding the movie to the array, you do not need to read data from input box again. The better idea is to clean up the input, validate it and provide it as input to insert(movie).

Here is the sample code, which is working for me.

var movie1 = ["Bahubali", "The Final Destination", "The Cars ","P.K ","   Bajarangi Baijaan ","Force "];
var movie2=[];
function validation() 
{
 var movie = document.getElementById("movie").value;
 movie = movie.trim();
 if (!movie) //its validate the input empty undefined null
 { 
    var name2 = "Please enter your favoite movie name";
    alert(name2);
  }
  else if (movie1.indexOf(movie) > -1) // check if movie already exists
  { 
    var name2 = "Movie exists in our database";
    alert(name2);
  } 
  else 
  {
    insert(movie);
  }
}      
function insert(movie)
{
  if(movie2.indexOf(movie) > -1)
  {
    var name2="Movie already added to Array 2";
    alert(name2);
  }
  else
  {
    movie2.push(movie);
    var name2 = "Movie added into Array2";
    //alert(name2);
    for (var i=0; i < movie2.length ; i++)
    {
      console.log(movie2[i]);
    }
  }
}

<!DOCTYPE html>
<html>
 <head>
     <title>Movie Mania</title>
     <script type="text/javascript" src="testjs.js"></script>
    </head>
    
    <body>
     <p class="header">Movie Mania</p>
     <form>
      <input type="text" name="user" id="movie" placeholder="Please enter any movie name"  size="40">
      <hr>
      <div>
       <input type="submit" class="button" value="Search" id="sub" 
       onclick="validation()" />
      </div >
     </form>
    </body>
</html>

Thanks for your time!! If I have given the same input it is not giving pop up as it is already added — Pran, May 25 '17 at 17:29
Yeah after every pop up movie 2 array is getting refreshed, when I tried your code it worked.Thanks — Pran, May 25 '17 at 20:06

Not able to know whether values are being inserted or not

2 Answers2