CODEWITHSUNDEEP
javascriptdomhtml-datalist
Squinshee
Squinshee

Reputation: 27

Adding options to a datalist via array in DOMS and Javascript

I'm trying to create a search datalist with DOMs, and populating the datalist with options from allCardsArray. I know that the option.value is working, but none of the options are being appended to the datalist. Below is the simple table I'm trying to make. I appreciate the help.

function generate_topnav(lowerCaseHeroName, allCardsArray){
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    var row = document.createElement("tr");
    var cell1 = document.createElement("td");
    var database = document.createTextNode("OverRealm Card Database")
    database.id = 'database';
    cell1.appendChild(database);
    row.appendChild(cell1);
    var cell2 = document.createElement('td');
    var input = document.createElement('input');
    input.style.fontSize = '18pt';
    input.style.height = '56pt';
    input.style.width = '300px';
    input.setAttribute('placeholder', ' Search for a card...');
    input.setAttribute = ('type', 'text');
    input.id = 'minionSearch';
    input.setAttribute = ('list', 'cardSearch');
    input.onchange = function() {
        redirect(value);
    };
    cell2.appendChild(input);
    var datalist = document.createElement('datalist');
    datalist.id = 'cardSearch';
    //THIS IS WHERE I'M TRYING TO POPULATE OPTIONS IN DATALIST
    allCardsArray.forEach(function(item){
        var option = document.createElement('option');
        option.value = item;
        datalist.appendChild(option);
    });
    input.appendChild(datalist);
    row.appendChild(cell2);
    tblBody.appendChild(row);
    tbl.appendChild(tblBody);
    body.appendChild(tbl);}

I originally did this in HTML and it worked and it looked like this:

 <input style="font-size:18pt; height:56px; width:300px;" type="text" id="minionSearch" list="cardSearch" placeholder=" Search for a card..." onchange="javascript:redirect(value)">
      <datalist id="cardSearch"></datalist>
          <script>
                var list = document.getElementByID("cardSearch");
                allCardsArray.forEach(function(item){
                    var option = document.createElement('option');
                    option.value = item;
                    list.appendChild(option);
                 });
          </script>

I'm curious as to why my DOMs version isn't working.

Upvotes: 2

Views: 1360

Answers (1)

guest271314
guest271314

Reputation: 1

input.setAttribute = ('type', 'text'); should be input.setAttribute('type', 'text'); and input.setAttribute = ('list', 'cardSearch'); should be input.setAttribute('list', 'cardSearch');

The <option> elements are being appended to <datalist> element. The issue is that JavaScript at Question does not set .textContent of created <option> element.

Upvotes: 2

Related Questions