Question

我正在完成一个chrome扩展程序，它从文本框中获取用户输入，将其提供给JavaScript程序，然后转换它并返回一个新输出（下面的HTML示例）。到目前为止，我已经完成了所有工作，并使用提交按钮提交用户输入的输入。

简而言之，我想让用户通过点击“提交”按钮或按回车键提交输入。我是HTML和JavaScript的新手，所以感谢任何帮助。

JavaScript代码：

document.addEventListener("DOMContentLoaded", function(event) { 

document.getElementById('button').onclick = function () {

console.log(document.querySelectorAll("textarea"))
// grabs and converts user input to uppercase letters, stores in variable n_seq
var n_seq = document.querySelectorAll("textarea")[0].value.toUpperCase();

// validate user input below
// only letters are acceptable characters, spaces, special characters, and 
// numbers will throw an error 
if (!/^[A-Z]+$/i.test(n_seq)) {
    alert("Invalid input!");
    return;
}

// if input is valid, program proceeds as normal
else {
    document.getElementById("amino_acid_seq").value = translateInput(codonDict, n_seq);
    return;
}
}

// function create second AA dictionary
function makeCodonDict (aminoDict) {
  let result = {}
  for (let k of Object.keys(aminoDict))
    for (let a of aminoDict[k])
      result[a] = k
  return result
}

// iterates through string of nucleotides, translates to AAs
function translateInput (dict, str) {
  let result = ''
  for (let i = 0; i < str.length; i += 3)
    result += dict[str.substr(i,3)]
  return result
}

// dictionary of codon to amino acids
const aminoDict={ 
     "A":["GCA","GCC","GCG","GCT"], 
     "C":["TGC","TGT"], 
     "D":["GAC", "GAT"],
     "E":["GAA","GAG"],
     "F":["TTC","TTT"],
     "G":["GGA","GGC","GGG","GGT"],
     "H":["CAC","CAT"],
     "I":["ATA","ATC","ATT"],
     "K":["AAA","AAG"],
     "L":["CTA","CTC","CTG","CTT","TTA","TTG"],
     "M":["ATG"],
     "N":["AAC","AAT"],
     "P":["CCA","CCC","CCG","CCT"],
     "Q":["CAA","CAG","caa","cag"],
     "R":["AGA","AGG","CGA","CGC","CGG","CGT"],
     "S":["AGC","AGT","TCA","TCC","TCG","TCT"],
     "T":["ACA","ACC","ACG","ACT"], 
     "V":["GTA","GTC","GTG","GTT"],
     "W":["TGG"],
     "Y":["TAC","TAT"],
     "*":["TAA","TAG","TGA"],
};

// creates codon dict from aa dict
const codonDict = makeCodonDict(aminoDict)

});

和HTML代码：

<!doctype html>

<html>

<head>
<script type="text/javascript" src="popup.js">
</script>
<link rel="stylesheet" href="popup.css">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" integrity="sha384-HzUaiJdCTIY/RL2vDPRGdEQHHahjzwoJJzGUkYjHVzTwXFQ2QN/nVgX7tzoMW3Ov" crossorigin="anonymous">
</head>
    <p>
	    <label for="input"><b>Input:</b><br></label>
        <textarea class="test" id="nucleotide_seq" name="nucleotide_seq" rows="4" cols="25"></textarea>
	</p>
<input type="submit" value="Submit" id="button" class="btn btn-default btn-xs">

    <p>
        <label for="input"><b>Output:</b><br></label>
        <textarea id="amino_acid_seq" name="amino_acid_seq" rows="4" cols="25"></textarea>
    </p>


</html>

Answer 1

向元素添加keydown事件并绑定到输入您单击时使用的相同函数，将onclick代码移动到另一个函数中;

document.querySelector('#amino_acid_seq').addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {  //checks enter key
        myAction();
    }
});

document.getElementById('button').onclick = myAction;

function myAction() {
    console.log(document.querySelectorAll("textarea"))
    var n_seq = document.querySelectorAll("textarea")[0].value;

    document.getElementById("amino_acid_seq").value = translateInput(codonDict, n_seq); 
}

点击提交用户输入并按回车键（HTML和JavaScript）

1 个答案: