我正在从用户那里获取输入并将这些值保存在名为 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);
}
}
最佳答案
<强> .includes() 是 ES2016 的一部分，尚未在所有浏览器中完全实现。使用.indexOf() 相反。现在，当值不存在时，indexOf() 返回-1；当值不存在时，返回项目的索引位置。你有:
if(movie2.indexOf(movie)==true){
这不是测试 indexOf() 的正确方法。如果 indexOf() 返回 0，则意味着在数组的第一个位置找到了该项目(索引从 0 开始)。但是，因为您尝试将其与 true 进行比较，所以 true 将转换为数字(以执行数字与数字的比较)，并将转换为 1..由于 0 不等于 1，因此测试将失败，并插入影片，即使它已经存在。
此外，当使用 var 关键字进行声明时，JavaScript 没有 block 级作用域。如果在函数中的任何位置使用 var 声明变量，则其作用域是整个函数。因此，您不能在 if 的一个分支中声明变量，然后在另一个分支中再次声明该变量。实际上，您甚至不需要设置 name 变量，因为您使用它所做的只是立即将其显示在 alert() 中。相反，您可以将字符串放入 alert() 中。
此外，不要使用内联 HTML 事件属性(onclick 等)。 <强> Here's why 。
最后，看来您实际上并没有尝试在任何地方提交数据。在这种情况下，不要使用提交按钮，只需使用常规按钮即可。
// 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>关于javascript - 无法知道是否正在插入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44185033/