Update amino acid in DOM after selection.

1 files changed, 15 insertions, 2 deletions

diff --git a/codon.mjs b/codon.mjs
index 6163883..c5f8328 100644
--- a/codon.mjs
+++ b/codon.mjs
@@ -4,7 +4,6 @@ import Nucleotide from './nucleotide.mjs'
 class Codon {
     constructor(n1, n2, n3) {
         this.bases = [n1, n2, n3]
-        this.aminoAcid = new AminoAcid(n1, n2, n3)
 
         const nucleotideList = document.createElement('ol')
         this.bases = [n1, n2, n3].map(base => {
@@ -14,7 +13,8 @@ class Codon {
             return n
         })
         this.elt.appendChild(nucleotideList)
-        this.elt.appendChild(this.aminoAcid.elt)
+
+        this.aminoAcid = new AminoAcid(n1, n2, n3)
     }
 
     get elt() {
@@ -29,6 +29,19 @@ class Codon {
         return this.bases.map(b => b.value).join('')
     }
 
+    get aminoAcid() {
+        return this._aminoAcid
+    }
+
+    set aminoAcid(value) {
+        this._aminoAcid = value
+        const oldElt = this.elt.querySelector('.amino-acid')
+        if (oldElt) {
+            this.elt.removeChild(oldElt)
+        }
+        this.elt.appendChild(value.elt)
+    }
+
     lock() {
         this.bases.forEach(n => n.lock())
         this.aminoAcid.lock()