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 input
s. 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>