I have made a simple code that changes the heading when you input text in the input, but I want the event to trigger when I press the enter key as I have to press the button to get it to work, is there a piece of code I can implement to have his work? cheers.
function block() {
var myValue = document.getElementById('textBox').value;
if (myValue.length == 0) {
alert('Please fill with valid text');
return;
}
var myTitle = document.getElementById('Heading');
myTitle.innerHTML = myValue;
};<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fundamentals.css">
<script src="fundamentals.js"></script>
<title>Javscript</title>
</head>
<body>
<h1 id="Heading">This is a heading</h1>
<input type="text" id="textBox">
<input type="submit" value="Click Me" onclick="block()">
</body>
</html>Wrap your input in a form element, so Enter triggers a submit event:
document.getElementById('heading-changer').addEventListener('submit', function (event) {
event.preventDefault(); // otherwise page reloads
var myValue = document.getElementById('textBox').value;
if (myValue.length == 0) {
alert('Please fill with valid text');
return;
}
var myTitle = document.getElementById('Heading');
myTitle.innerHTML = myValue;
});<h1 id="Heading">This is a heading</h1>
<form id="heading-changer">
<input type="text" id="textBox">
<input type="submit" value="Click Me">
</form>Or you can do this:
function handleKeyPress(e){
if(e.keyCode === 13){
e.preventDefault();
var myValue = e.target.value;
if (myValue.length == 0) {
alert('Please fill with valid text');
return;
}
var myTitle = document.getElementById('Heading');
myTitle.innerHTML = myValue;
}
}<h1 id="Heading"></h1>
<input onkeypress={handleKeyPress(event)} />Add an eventListener to the input that is fires when keypressed, it the key is enter, then tha function is the same, as you made.
var myInput = document.getElementById("textBox");
var myTitle = document.getElementById("Heading");
myInput.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
if (myInput.value.length == 0) {
alert("Please fill with valid text");
return;
}
event.preventDefault();
myTitle.innerHTML = myInput.value;
}
});<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fundamentals.css">
<script src="fundamentals.js"></script>
<title>Javscript</title>
</head>
<body>
<h1 id="Heading">This is a heading</h1>
<input type="text" id="textBox">
</body>
</html>