無法知道值是否被插入

我正在接受來自用戶的輸入並將這些值保存在名爲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); 
      } 
     }

來源

2017-05-25 Praneeth Kumar

'.includes（）'也沒有很好的被瀏覽器支持。嘗試使用'.indexOf（）'來查看它是否有效。 – abhishekkannojia

您發佈的代碼在HTML中具有「驗證」功能，JS文件具有「插入」功能。你能發佈完整的工作代碼嗎？ – Agalo

你正在使用哪種瀏覽器？ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes?v=control查看瀏覽器支持。現在使用'indexOf'是一個更好的選擇 – Huangism

.includes()是ES2016，這是不完全在所有瀏覽器尚未實現的一部分。改爲使用.indexOf()。現在，indexOf()返回-1當值不存在或項目的索引位置時。你有：

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

這不是正確的方式來測試對indexOf()。如果indexOf()要返回0，則意味着該項目在數組中的第一個位置（索引從0開始）被找到。但是，因爲您正試圖將其與true進行比較，因此將true轉換爲數字（執行數字與數字的比較），它將轉換爲1。由於0不等於1，測試將失敗，並插入電影，即使它已經存在。

此外，在使用var關鍵字進行聲明時，JavaScript沒有塊級別範圍。如果您在函數的任何位置聲明一個變量爲var，則其範圍是整個函數。因此，您不能在if的一個分支中聲明變量，然後再在另一個分支中聲明該變量。實際上，你甚至不需要設置你的變量name，因爲你所做的全部變量都會立即顯示在alert()中。相反，你可以把你的字符串放在alert()。

此外，請勿使用內聯HTML事件屬性（onclick等）。 Here's why。

最後，您似乎並未嘗試在任何地方提交數據。在這種情況下，請勿使用submit按鈕，只需使用常規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>

來源

2017-05-25 16:21:05

的包括（）方法確定一個字符串是否包含指定字符串的字符。如果字符串包含字符，則此方法返回true，否則返回false。

因此，我們不應該使用includes（）方法來比較/搜索字符串。有多種方法可以搜索字符串數組中的字符串。我檢查使用

indexOf()

的的indexOf（）方法返回在字符串中指定的值的第一次出現的位置在串的給定陣列給我字符串。如果搜索的值永遠不會發生，則此方法返回-1。

而您將電影添加到陣列的位置，您不需要再次從輸入框中讀取數據。更好的想法是清理輸入，驗證它並將其作爲輸入提供給插入（電影）。

下面是示例代碼，它爲我工作。

var movie1 = ["Bahubali", "The Final Destination", "The Cars ","P.K "," Bajarangi Baijaan ","Force "]; 
 
var movie2=[]; 
 
function validation() 
 
{ 
 
\t var movie = document.getElementById("movie").value; 
 
\t movie = movie.trim(); 
 
\t if (!movie) //its validate the input empty undefined null 
 
\t { 
 
    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); 
 
    } 
 
}  \t \t 
 
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> 
 
\t <head> 
 
    \t <title>Movie Mania</title> 
 
    \t <script type="text/javascript" src="testjs.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
    \t \t <p class="header">Movie Mania</p> 
 
    \t \t <form> 
 
    \t \t <input type="text" name="user" id="movie" placeholder="Please enter any movie name" size="40"> 
 
    \t \t <hr> 
 
    \t \t <div> 
 
    \t \t \t <input type="submit" class="button" value="Search" id="sub" 
 
    \t \t \t onclick="validation()" /> 
 
    \t \t </div > 
 
    \t \t </form> 
 
    </body> 
 
</html>

來源

2017-05-25 17:13:43

感謝您的時間！如果我給了相同的輸入，它不會彈出，因爲它已被添加 –

這就是爲什麼，因爲每次刷新movie2數組。 –

是的每個彈出後電影2陣列得到刷新，當我試着你的代碼它的工作。謝謝 –

無法知道值是否被插入

回答

相關問題