Submitting user input on click and with enter key press (HTML and JavaScript)
Question
I'm finishing up a chrome extension that gets user input from a text box, feeds it to a JavaScript program, then converts it and returns a new output (HTML example below). So far I have everything working perfectly and am using a submit button to submit the input the user typed.
In short I'd like to make it so that a user can submit the input either by clicking the 'Submit' button or by pressing the enter key. I'm new to HTML and JavaScript so any help is appreciated.
JavaScript code:
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)
});
And HTML code:
<!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>
1 answers
solution1
0 2017-05-08 20:22:35
Add a keydown event to the element and bind to the enter the same function you use on click, moving the onclick code inside another function;
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.