Question

我从用户那里获取输入并将这些值保存在名为movie2的新数组中。如果用户再次输入输入，它应该检查movie2数组中的值，如果匹配应该弹出就像它已经添加的那样，如果它是一个不同的输入，它应该将这些值添加到movie2数组。我已经尝试了很多次，但无论用户输入是什么，它都会被添加，而不是比较。

<!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);
          }
         }

Answer 1

.includes() 是ES2016的一部分，尚未在所有浏览器中完全实现。请改用 .indexOf() 。现在，indexOf()在值不存在时返回-1，或者当项目的索引位置时返回if(movie2.indexOf(movie)==true){。你有：

indexOf()

这不是针对indexOf()进行测试的正确方法。如果0要返回true，则意味着该项目位于数组的第一个位置（索引从0开始）。但是，因为您尝试将其与true进行比较，1将转换为数字（执行数字与数字比较），它将转换为0。由于1不等于var，测试将失败，并插入电影，即使它已经存在。

此外，使用var关键字进行声明时，JavaScript没有块级范围。如果在函数中的任何位置声明带if的变量，则其范围是整个函数。因此，您不能在name的一个分支中声明变量，然后在另一个分支中声明变量。实际上，您甚至不需要设置alert()变量，因为您正在使用该变量立即将其显示在alert()中。相反，您可以将字符串放在onclick。

中

此外，请勿使用内联HTML事件属性（submit等）。的 Here's why

最后，您似乎并未尝试在任何地方提交数据。在这种情况下，请不要使用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>

ViewChild

Answer 2

includes（）方法确定字符串是否包含指定字符串的字符。如果是，则此方法返回true string包含字符，如果没有则为false。

因此我们不会使用include（）方法来比较/搜索字符串。有多种方法可以在字符串数组中搜索字符串。我使用

检查给定给定字符串数组的字符串

indexOf()

indexOf（）方法返回字符串中第一次出现指定值的位置。如果要搜索的值永远不会发生，则此方法返回-1。

在将影片添加到阵列的位置，您无需再次从输入框中读取数据。更好的想法是清理输入，验证输入并将其作为输入提供给 插入（电影） 。

以下是示例代码，对我有用。

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>

无法知道是否插入了值

2 个答案: