Multiple text-areas being added after an update event

Question

I am making a simple code editor using codemirror. I am at the last stage but a bug has occurred which I am not able to get my heads around.

I have a select html tag with three options:

<select class="language" id="lang" onclick="update()">
  <option value="javascript">JavaScript</option>
  <option value="python">Python</option>
  <option value="python">C</option>
</select>

And my update() function is:

function update() {
  var select = $('#lang').val();
  var editor = CodeMirror.fromTextArea($('#text'), {
      mode: select,
      theme: "blackboard",
      });
}
update();

Now what happens is that everytime I select a different option from the dropdown, a new Code editor is added below the previous one.

Do you have some idea where I am going wrong in the code and how I can workaround?

Answer 1

Change your JS to this:

let editor;
function update() {
  var select = $('#lang').val();
  editor = editor ?? CodeMirror.fromTextArea($('#text'), {
      theme: "blackboard",
  });
  editor.setOption('mode', select);
}
update();

This makes it so if editor already exists, it is not created again, but instead re-used.