I am wanting to add the return value of a dropdown to an object I have created with placeholders.
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
};
You can get the value from the change event with e.target.value.
const pineconesSelectEl = document.querySelector('select')
let stack = {
pinecones: null,
kindling: null,
logs: null
};
pineconesSelectEl.addEventListener('change', (e) => {
const { value } = e.target
stack.pinecones = value
console.log(stack);
})<label>pinecones:
<select>
<option value="">Select pinecones</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
</label>We can make our solution a little more re-usable by adding our change event listener to all select elements, and getting both the name and value from the change event's target.
const selectEls = document.querySelectorAll('select')
let stack = {
pinecones: null,
kindling: null,
logs: null
};
selectEls.forEach(selectEl => {
selectEl.addEventListener('change', (e) => {
const {value, name} = e.target
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>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);
}