Editable Vinyl/Text Editor using Javascript-CodePudding

Hello as I'm finding ways to create and editable Vinyl or text editor I cant make it work, I want an output similar to this link

function SetColor()
{
  var value = document.getElementById("selectElement").value;
  var textareaElement = document.getElementById("resultTextArea");
  textareaElement.style.color = value;  
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<div >
  Select Color:
  <select id="selectElement" onchange="SetColor()">
    <option>Choose a Color</option>
    <option id="btnRed" value="red">Red</option>
    <option id="btnBlue" value="blue">Blue</option>
    <option id="btnGreen" value="green">Green</option>
  </select>
  <textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea>

CodePudding user response：

I developed this solution using jQuery for simplicity. When the change event of the <select> element is triggered, the value of the <option> elements is assigned to the <textarea> element whose id attribute is resultTextArea.

$( ".target" ).change(function() {
  $('#resultTextArea').css('color', this.value);
});

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  Select Color:
  <select >
    <option>Choose a Color</option>
    <option id="btnRed" value="red">Red</option>
    <option id="btnBlue" value="blue">Blue</option>
    <option id="btnGreen" value="green">Green</option>
  </select>
  <textarea id="resultTextArea" style="width: 25%; height: 200px;"></textarea>
</div>