Adding a return value to an object-CodePudding

I am wanting to add the return value of a dropdown to an object I have created with placeholders. (Thanks and apologies in advance, very baby dev here).

pinecones.onchange = function(e) {
  let value = pinecones.options[pinecones.selectedIndex].value;
  console.log(value);
}

Instead of console logging the return value, I want to add it to this object:

let stack = {
pinecones: null,
kindling: null,
logs: null
};

CodePudding user response：

You seem to be wanting to add another key/value pair to your object (stack variable).

This would be my fix:

pinecones.onchange = function(e) {
    let value = pinecones.options[pinecones.selectedIndex].value;
    stack.value = value; // the key name can be something else
    console.log(value);
}

CodePudding user response：

You can get the value from the change event with e.target.value.

const pinecones = document.querySelector('select')

let stack = {
  pinecones: null,
  kindling: null,
  logs: null
};

pinecones.addEventListener('change', function(e) {
  let value = e.target.value
  stack.pinecones = value
  console.log(stack);
})

<select>
  <option value="">Select pinecones
  </option>
  <option value="Option1">Option1
  </option>
  <option value="Option2">Option2
  </option>
  <option value="Option3">Option3
  </option>
</select>

We can make our solution a little more re-usable by adding our change event listener to all select elements, and getting the name from the event target.

const selectEls = document.querySelectorAll('select')

let stack = {
  pinecones: null,
  kindling: null,
  logs: null
};

selectEls.forEach(selectEl => {
  selectEl.addEventListener('change', function(e) {
    let value = e.target.value
    let name = e.target.name
    stack[name] = value
    console.log(stack);
  })
})

<label>
pinecones: 
<select name="pinecones">
  <option value="Option1">Option1
  </option>
  <option value="Option2">Option2
  </option>
  <option value="Option3">Option3
  </option>
</select>
</label>

<label>
kindling: 
<select name="kindling">
  <option value="Option1">Option1
  </option>
  <option value="Option2">Option2
  </option>
  <option value="Option3">Option3
  </option>
</select>
</label>

<label>
logs: 
<select name="logs">
  <option value="Option1">Option1
  </option>
  <option value="Option2">Option2
  </option>
  <option value="Option3">Option3
  </option>
</select>
</label>