Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Calling function with onkeyup or with key event without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
I want to call a function only when the ENTER key is pressed (or released) in an input field. My old code worked but had the problem that it called the function on every keyup, not just the ENTER key:
Old HTML:
<input class="halter" type="text" onkeyup="checkLoesung(id);">
JS:
function checkLoesung(id){do stuff}
Now I tried to change it so that only the ENTER key triggers the function:
document.getElementsByClassName('halter').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
checkLoesung(id){do stuff}
return false;
}
}
Shouldn’t this work if I remove the onkeyup="checkLoesung(id);" from my input element? Is the problem here connected to the id that I am trying to pass to the function?
EDIT: removed typo EDIT 2: Full code:
<meta charset="UTF-8">
<div id="digger_cont">
<p id="ueberschrift_koth">King of the Hill</p>
<div id="fragen_halter">
<input id="ha_1" class="halter" placeholder="안녕하세요" type="text" ><br/>
<input id="ha_2" class="halter" placeholder="얼굴" type="text" ><br/><br/>
<input id="ha_3" class="halter" placeholder="유방" type="text" ><br/><br/>
<input id="ha_4" class="halter" placeholder="물" type="text" ><br/><br/>
<input id="ha_5" class="halter" placeholder="병" type="text" ><br/><br/>
<input id="ha_6" class="halter" placeholder="책상" type="text" ><br/><br/>
<input id="ha_7" class="halter" placeholder="노래" type="text" >
</div>
<div id="score_halter">
<p>Punkte: <span id="score_not" style="display:none"></span></p>
<p id="melder"></p>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
var l_count = 0; // Counter init, 0!
var last_sol = 7; // ECHTE Anzahl an Luecken
document.getElementsByClassName('halter')[0].onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
checkLoesung(id);
return false;
}
}
function checkLoesung(id){
if(l_count != last_sol) {
var e_dies = document.getElementById(id).id;
var LoesungArray = [
"Hallo",
"gesicht",
"brust",
"wasser",
"flasche",
"tisch",
"lied"
];
var score_not = document.getElementById('score_not');
var punkt_score = (l_count + 1) * 3 + " / " + 3 * last_sol;
// Meldungen
var success_meldung = "richtig!";
var fehler_meldung = "falsch!";
var melde_mich = document.getElementById('melder');
// String Formatierung
var loe_strip = document.getElementById(e_dies).value.replace(/ /g,'');
var loe_fin = loe_strip.toLowerCase();
var array_fin = LoesungArray[l_count].toLowerCase();
// Testen
if (loe_fin == array_fin){
melde_mich.innerHTML = success_meldung;
$('#' + e_dies).nextAll('.halter:first').fadeIn('2000');
$('#' + e_dies).nextAll('.halter:first').focus();
l_count++;
score_not.innerHTML = punkt_score;
$('#score_not').css('display', 'none');
$('#score_not').fadeTo('3000', 1);
// Bei letztem Durchgang
if(l_count == last_sol){
melde_mich.innerHTML = 'Richtig, du hast alles gelöst!';
return false;
};
// Bei Leereingabe
} else if(document.getElementById(e_dies).value == "") {
melde_mich.innerHTML = '';
}
else {
melde_mich.innerHTML = fehler_meldung;
};
} else {return false};
};
</script>
Answer
declare the function checkLoesung outside the if.
also add [0] index to document.getElementsByClassName because it returns a collection
document.getElementsByClassName('halter')[0].onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
console.log("Enter");
return false;
}
}
function checkLoesung(id){//do stuff
}<input class="halter" type="text" onkeyup="checkLoesung(id);">
Update based on comment and updated question.
I added the functionality to all inputs. So, for that, use document.querySelectorAll and use a css query. It returns an array. Use forEach and add the addEventListener for keypress to the elements.
Read the 2 comments I made and Do Whatever you want there.
The code is below.
var l_count = 0;
var last_sol = 7;
document.querySelectorAll('.halter').forEach(function(elem){
elem.addEventListener('keypress',function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
//Key pressed is enter. Do whatever you want
//console.log("Enter");
alert('hello');
return false;
}
//If required, add an else and add whatever you want when the key pressed is not enter
});});
function checkLoesung(id){
if(l_count != last_sol) {
var e_dies = document.getElementById(id).id;
var LoesungArray = [
"Hallo",
"gesicht",
"brust",
"wasser",
"flasche",
"tisch",
"lied"
];
var score_not = document.getElementById('score_not');
var punkt_score = (l_count + 1) * 3 + " / " + 3 * last_sol;
var success_meldung = "richtig!";
var fehler_meldung = "falsch!";
var melde_mich = document.getElementById('melder');
var loe_strip = document.getElementById(e_dies).value.replace(/ /g,'');
var loe_fin = loe_strip.toLowerCase();
var array_fin = LoesungArray[l_count].toLowerCase();
if (loe_fin == array_fin){
melde_mich.innerHTML = success_meldung;
$('#' + e_dies).nextAll('.halter:first').fadeIn('2000');
$('#' + e_dies).nextAll('.halter:first').focus();
l_count++;
score_not.innerHTML = punkt_score;
$('#score_not').css('display', 'none');
$('#score_not').fadeTo('3000', 1);
if(l_count == last_sol){
melde_mich.innerHTML = 'Richtig, du hast alles gelöst!';
return false;
};
} else if(document.getElementById(e_dies).value == "") {
melde_mich.innerHTML = '';
}
else {
melde_mich.innerHTML = fehler_meldung;
};
} else {return false};
};<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <div id="digger_cont"> <p id="ueberschrift_koth">King of the Hill</p> <div id="fragen_halter"> <input id="ha_1" class="halter" placeholder="안녕하세요" type="text" ><br/> <input id="ha_2" class="halter" placeholder="얼굴" type="text" ><br/><br/> <input id="ha_3" class="halter" placeholder="유방" type="text" ><br/><br/> <input id="ha_4" class="halter" placeholder="물" type="text" ><br/><br/> <input id="ha_5" class="halter" placeholder="병" type="text" ><br/><br/> <input id="ha_6" class="halter" placeholder="책상" type="text" ><br/><br/> <input id="ha_7" class="halter" placeholder="노래" type="text" > </div> <div id="score_halter"> <p>Punkte: <span id="score_not" style="display:none"></span></p> <p id="melder"></p> </div>
We are here to answer your question about Calling function with onkeyup or with key event - If you find the proper solution, please don't forgot to share this with your team members.