Using ENTER to trigger a function

JavaScript
1

I wish to enter input and hit ENTER key to execute a function that provides data back.
Not doing anything else with the mouse or keyboard. I have been trying this which does give me my data back, but I need to use the mouse and keyboard to get my data.
Try to enter “John 3:16-20” to test for the data that comes back.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
	<input id="input" type="text" placeholder="Enter a Bible Reference" onkeydown="printInput()" />

	<script>
		function printInput() {
			if (event.key === 'Enter') {
			const input = document.getElementById("input");
			let bob = "https://api.biblia.com/v1/bible/content/KJV.html?passage=" + input.value + "&style=fullyFormatted&key=xxxx";
			document.write('<a href="'+bob+'">Get Reference</a>');
			}
		}
	</script>

</body>
</html>
2

If I am understanding your question correctly, you might want to take a look at the Fetch API and the text method in particular. This will allow you to get the HTML returned by the server which you can then inject into the page.

3

Also, I edited your code sample to remove your API key. You probably don’t want everyone to have that.

1 Like