CODEWITHSUNDEEP
javascripthtml
Julio
Julio

Reputation: 159

InnerHTML returning [object HTMLOptionElement]

I am trying to create a function to put options inside a select through the classes of these selects.

function selectOptionsClass(selectClass, arrayOptions) {
  let selects = document.querySelectorAll("." + selectClass);

  for (let i = 0; i < arrayOptions.length; i++) {
    let option = document.createElement("option");
    option.value = arrayOptions[i];
    option.text = arrayOptions[i];

    selects.forEach(select => {
      select.innerHTML += `${option}`;
      console.log(select);
    });   
  }
}

let testeOptions = [0, 10, 20];
selectOptionsClass('select-teste', testeOptions);
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  
</head>
<body>
  <div class="form-group col-2">
    <label for="teste">Teste</label>
    <select name="teste" id="teste" class="form-control select-teste" required></select>
   </div>
   <div class="form-group col-2">
    <label for="teste">Teste</label>
    <select name="teste" id="teste" class="form-control select-teste" required></select>
   </div>
   <div class="form-group col-2">
    <label for="teste">Teste</label>
    <select name="teste" id="teste" class="form-control select-teste" required></select>
   </div>
</body>
</html>

But the function is returning an [object HTMLOptionElement] inside select, not the object element I'd like.

Can someone help me? Thank you!

Upvotes: 1

Views: 2665

Answers (2)

Tigger
Tigger

Reputation: 9130

Edit: Looping over the selectClass, then the arrayOptions and using appendChild instead of using innerHTML resolves the issues.

innerHTML treats a "string" as if it was predefined HTML, but as you are creating an element, you need to use appendChild instead.

From “innerHTML += …” vs “appendChild(txtNode)” : Setting innerHTML does indeed invalidate any references to elements within the target element you may be holding -- because those elements don't exist anymore, you removed them and then put in new ones (that look very similar) when you set innerHTML.

function selectOptionsClass(selectClass, arrayOptions) {
  let selects = document.querySelectorAll("." + selectClass);
  let option;
  
  selects.forEach(select => {
    arrayOptions.forEach(opt => {
      option = document.createElement("option");
      option.value = opt;
      option.text = opt;
      select.appendChild(option);
    });
  });
}
let testeOptions = [0, 10, 20];
selectOptionsClass('select-teste', testeOptions);
<label for="teste">Teste</label>
<select name="teste1" id="teste1" class="form-control select-teste" required></select>
<label for="teste">Teste</label>
<select name="teste2" id="teste2" class="form-control select-teste" required></select>
<label for="teste">Teste</label>
<select name="teste3" id="teste3" class="form-control select-teste" required></select>

Upvotes: 1

Seano666
Seano666

Reputation: 2238

You're trying to treat an HTML Object in JavaScript like you would a string with this..

select.innerHTML += `${option}`;

You should try something like.

select.appendChild(option)

This actually adds the option as a DOM element as a child of the select.

Upvotes: 1

Related Questions