unable to append dropdown's selected text to a table cell value

Question

i have a table with a header row and a drop down with three options. I want to append the selected option's text/value of drop down to the header row value of table. Please help on how can i accomplish this task.

Example: if first option of drop down is "First", and table header row value has "This is header", I want to append this "First" to "This is header" and show it as "This is header first"

[DEMO][1]


  [1]: https://jsfiddle.net/nocw3478/

Answer 1

Good attempt. As others have noted, you need an on-change listener. Here's one I put together for you, it's not perfect, but it will help you get started. Replace all your JavaScript in your example with this:

var original_header_text = document.querySelector('#headerText').innerText;
document.querySelector('#myOptions').addEventListener('change', function(event) {
  var selected = {
    'text': event.target[event.target.selectedIndex].text
  };
  document.querySelector('#headerText').innerText = original_header_text + selected.text;
});