CODEWITHSUNDEEP
javascripthtml
CabralAfterTheL
CabralAfterTheL

Reputation: 35

Datalist not into text box when I'm trying to add my array's values to it as options

Newbie here. I have made a program in which you can type an expression in a text box and click in a button to submit it as an item to an array.I am attempting to make a datalist that has as options the values that are in that array, and I have tried the solutions provided online, but couldn't make it work. Can you help me?

<!doctype html>

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>

<body>

<button id="clearcustom" type="button">Show Modal</button>  

<textarea id="writefrase" rows="2" cols="25" placeholder="Write the expression you want to add to the array"></textarea>

<button id="submeter" type="button">Submit</button>

<div class="clearpopup">
    <div class="clearpopupheader">
        <span class="closeclearpopup">&times;</span>
        <p>Choose the option</p>
    </div>
    <div class="clearpopupcontent">
        <form>
            <input id="chooseclear" list="chooseclearlist" name="items" />
            <datalist id="chooseclearlist"></datalist>
        </form>
        <button id="clearpopupbutton">Choose</button>
    </div>
</div>

<script type="text/javascript">

var TEF = [];

$("#submeter").click(function() {
    var newitem = $("#writefrase").val();
    if (newitem) {
        TEF.push(newitem);
         $("#writefrase").val("");
    }
});

let modalBtn = document.getElementById("clearcustom")
let modal = document.querySelector(".clearpopup")
let closeBtn = document.querySelector(".closeclearpopup")

modalBtn.onclick = function () {
    modal.style.display = "block"
}

closeBtn.onclick = function () {
     modal.style.display = "none"
}

</script>   
</body>
</html>

Upvotes: 1

Views: 93

Answers (2)

mukesh kumar
mukesh kumar

Reputation: 588

You can use JavaScript Array.prototype.includes() method

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
  if (fruits.includes("Mango")) {
    console.log('Mango');
  }

Upvotes: 0

Tudor Constantin
Tudor Constantin

Reputation: 26861

You have to create the HTML that goes into your <datalist> with the values from the TEF variable.

Something like this does the trick:

<!doctype html>

<html>

<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</head>

<body>

<button id="clearcustom" type="button">Show Modal</button>  

<textarea id="writefrase" rows="2" cols="25" placeholder="Write the expression you want to add to the array"></textarea>

<button id="submeter" type="button">Submit</button>

<div class="clearpopup">
    <div class="clearpopupheader">
        <span class="closeclearpopup">&times;</span>
        <p>Choose the option</p>
    </div>
    <div class="clearpopupcontent">
        <form>
            <input id="chooseclear" list="chooseclearlist" name="items" />
            <datalist id="chooseclearlist"></datalist>
        </form>
        <button id="clearpopupbutton">Choose</button>
    </div>
</div>

<script type="text/javascript">

var TEF = [];

function redrawDataList(){
  let options = [];
    TEF.forEach( el => {
        options.push(` <option value="${el}">`)
    })
    $("#chooseclearlist").html(options.join("\n"))
}

$("#submeter").click(function() {
    var newitem = $("#writefrase").val();
    if (newitem) {
        TEF.push(newitem);
         $("#writefrase").val("");
    }
    redrawDataList();
});

let modalBtn = document.getElementById("clearcustom")
let modal = document.querySelector(".clearpopup")
let closeBtn = document.querySelector(".closeclearpopup")

modalBtn.onclick = function () {
    modal.style.display = "block"
}

closeBtn.onclick = function () {
     modal.style.display = "none"
}

</script>   
</body>
</html>

Upvotes: 1

Related Questions