javascript - Calling function with onkeyup or with key event

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=".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>

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./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>

Share Improve this question edited Mar 23, 2017 at 15:43 asked Mar 23, 2017 at 15:23 sojutyp 3161 gold badge2 silver badges11 bronze badges

getElementsByClassName('halter') returns a collection. It seems you want to add the event to each element in there but your code right now tries to add it to the collection. – takendarkk Commented Mar 23, 2017 at 15:25
You're not calling the function checkLoesung, you're defining it. – Arg0n Commented Mar 23, 2017 at 15:25
What do you want to do ? Because you can use the onsubmit event to catch when enter is pressed on every input of your form. – Anthony Granger Commented Mar 23, 2017 at 15:25
I want to use the ENTER trigger for every input field with the class="halter" . In the final version there will be 10 input fields with this class and each of them should have the same behavior. @Arg0n my bad. should have been a call ... just checkLoesung(id); – sojutyp Commented Mar 23, 2017 at 15:30

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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 ment 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 ments 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./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>

Accessing to the element with getElementsByClassName it will return an array. So you should access to it by using it's index

Here you can test it in this plnkr

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Calling function with onkeyup or with key event - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)