HTML <select> option to fill a textarea with HTML content

Question

I have been using the code below found on JSFiddle, which works fine but when I implement it with my code which is a text area supporting HTML it doesn't seem to work. This is the code I want to implement it into, but its not working. Can anyone advise? My Code:

<div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div>
  <p>
    <textarea type ="text" id="message" ng-model="htmlcontent" required="required" style="display: none;" name="message" required /></textarea>
  </p>

JSFIDDLE HTML:

<select id="dropdown">
    <option value="">None</option>
    <option value="text1">text1</option>
    <option value="text2">text2</option>
    <option value="text3">text3</option>
    <option value="text4">text4</option>
</select>

JSFIDDLE JS:

var mytextbox = document.getElementById('mytext');
var mydropdown = document.getElementById('dropdown');

mydropdown.onchange = function(){
  mytextbox.value = mytextbox.value  + this.value;
}

Any advice would be greatly appreciated?

Answer 1

You need to get the value from the event like so:

mydropdown.onchange = function(e){
    mytextbox.value = mytextbox.value  + e.value;
}

Answer 2

to acces to drop down element value use this

mydropdown.options[mydropdown.selectedIndex].value;

and when you concat to text area add a space to good view

 mytextbox.value = mytextbox.value +' '+ mydropdownValue;

see the code

 var mytextbox = document.getElementById('message'); var mydropdown = document.getElementById('dropdown'); mydropdown.onchange = function() { var mydropdownValue = mydropdown.options[mydropdown.selectedIndex].value; mytextbox.value = mytextbox.value + ' ' + mydropdownValue; } 

 My Code: <div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div> <p> <textarea type="text" id="message" ng-model="htmlcontent" required="required" style="display: block;" name="message" required /></textarea> </p> </div> HTML JSFIDDLE: <select id="dropdown"> <option value="">None</option> <option value="text1">text1</option> <option value="text2">text2</option> <option value="text3">text3</option> <option value="text4">text4</option> </select> 

Answer 3

 var text = document.getElementById('message'); var drop = document.getElementById('dropdown'); drop.addEventListener('change',function(e){ text.value += ' ' + e.target.value; //OR ` ${e.target.value}` }) 

 <div text-angular="text-angular" name="htmlcontent" ng-model="htmlcontent" ta-disabled='disabled'></div> <p> <textarea type="text" id="message" ng-model="htmlcontent" required="required" style="display: block;" name="message" required /></textarea> </p> </div> <select id="dropdown"> <option value="">None</option> <option value="text1">text1</option> <option value="text2">text2</option> <option value="text3">text3</option> <option value="text4">text4</option> </select>