I want to prevent user from entering a duplicate value in array

Viewed 82

full: https://onlinegdb.com/HJN6CGLTD

I need help in here : want a code that check input1 and see if its already in array or not if it is error if not push it in array.

function AddPoints()
{
    var item =  document.getElementById("input1").value;    
    if (points.includes(item) === false) points.push(parseInt( item )); // duplicate check
    
   else document.getElementById("demo2").innerHTML = "The number Exist" ; // duplicate error
     displayPoints();
}
1 Answers

if i understand your question you can try this code:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

    <label>input</label>
    <input id="input1" type="text"/>
    <input type="button" value="Add" onclick="AddPoints()"/>
    <div id="demo"></div>
    <div id="demo2"></div>
</body>
</html>

JS:

var i;
var points=[];

function AddPoints(){

    var item =  document.getElementById("input1").value;
    item=parseInt(item);//only integer number
    
    // I check if the item is a integer number
    if(Number.isInteger(item)){
        //when the item's value is not present in the array
        if (points.includes(item,0) === false) {
            points.push( item ); // new value
            document.getElementById("demo2").innerHTML = "" ;
            //displayPoints(); 
        }
        else {
            document.getElementById("demo2").innerHTML = "The number Exist" ; // duplicate error
            //displayPoints();
        }
    } 
    else{
        document.getElementById("demo2").innerHTML = "The number error" ; // It is not a number
    }    
    displayPoints();
}

function displayPoints(){
var i;
    text = "<table border=1>";
    for (i = 0; i < points.length; i++) {
        
        text += "<tr>";
        text += "<td>" + (i+1) + "</td>";
        text += "<td>" + points[i] + "</td>";
        text += "</tr>"
    }
    text += "<table>";

    document.getElementById("demo").innerHTML = text;
}

this is a test with the code

var i;
var points=[];

function AddPoints(){

    var item =  document.getElementById("input1").value;
    item=parseInt(item);//only integer number
    
    if(Number.isInteger(item)){
        if (points.includes(item,0) === false) {
            points.push( item );// new value
            document.getElementById("demo2").innerHTML = "" ;
            //displayPoints(); 
        }
        else {
            document.getElementById("demo2").innerHTML = "The number Exist" ; // duplicate error
            //displayPoints();
        }
    } 
    else{
        document.getElementById("demo2").innerHTML = "The number error" ; // It is not a number
    }    
    displayPoints();
}

function displayPoints(){
var i;
    text = "<table border=1>";
    for (i = 0; i < points.length; i++) {
        
        text += "<tr>";
        text += "<td>" + (i+1) + "</td>";
        text += "<td>" + points[i] + "</td>";
        text += "</tr>"
    }
    text += "<table>";

    document.getElementById("demo").innerHTML = text;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script>
</script>

<body>

    <label>input</label>
    <input id="input1" type="text"/>
    <input type="button" value="Add" onclick="AddPoints()"/>
    <div id="demo"></div>
    <div id="demo2"></div>
</body>
</html>

Related