I have some buttons 1-9 and i want to show their numbers on div called "screen". So i wrote such code, but it not seem to work.

Piece of HTML code with those buttons:

  <div id="screen"></div>

  <div><input type="submit" class="numKey" id="key7" value="7" onclick="enterPIN();"></div>
  <div><input type="submit" class="numKey" id="key8" value="8" onclick="enterPIN();"></div>
  <div><input type="submit" class="numKey" id="key9" value="9" onclick="enterPIN();"></div>
       <div style="clear: both;"></div>
   <div><input type="submit" class="numKey" id="key4" value="4" onclick="enterPIN();"></div>
   <div><input type="submit" class="numKey" id="key5" value="5" onclick="enterPIN();"></div>
       (... AND SO ON ...)

JavaScript code:

function enterPIN()
{
    for (i=0; i<document.getElementsByClassName("numKey").length; i++)
    {
        var numKeyId = i + " " + document.getElementsByClassName("numKey")[i].id;
        console.log(numKeyId);
        return numKeyId;

    }

    var getElementId = function(numKeyId)
    {
        this.numKeyId = numKeyId;
        document.getElementById("screen").innerHTML = document.getElementsByClassName("numKey")[numKeyId].id;
        console.log("Asdasdasd");
    }
    getElementId();
}

It should work like this:

I have some buttons 1-9 and i want to show their numbers on div called "screen". So i wrote such code, but it not seem to work.

Piece of HTML code with those buttons:

  <div id="screen"></div>

  <div><input type="submit" class="numKey" id="key7" value="7" onclick="enterPIN();"></div>
  <div><input type="submit" class="numKey" id="key8" value="8" onclick="enterPIN();"></div>
  <div><input type="submit" class="numKey" id="key9" value="9" onclick="enterPIN();"></div>
       <div style="clear: both;"></div>
   <div><input type="submit" class="numKey" id="key4" value="4" onclick="enterPIN();"></div>
   <div><input type="submit" class="numKey" id="key5" value="5" onclick="enterPIN();"></div>
       (... AND SO ON ...)

JavaScript code:

function enterPIN()
{
    for (i=0; i<document.getElementsByClassName("numKey").length; i++)
    {
        var numKeyId = i + " " + document.getElementsByClassName("numKey")[i].id;
        console.log(numKeyId);
        return numKeyId;

    }

    var getElementId = function(numKeyId)
    {
        this.numKeyId = numKeyId;
        document.getElementById("screen").innerHTML = document.getElementsByClassName("numKey")[numKeyId].id;
        console.log("Asdasdasd");
    }
    getElementId();
}

It should work like this:

• javascript
• html
• innerhtml
• getelementbyid
• getelementsbyclassname

• 4 Is there a reason you're not just passing the value you want to display directly, as in onclick="enterPIN(4);? – Daniel Beck Commented Aug 7, 2015 at 21:53
• Is it just me or did you get the numKeyId wrong? It could be just me, it's pretty late and I'm just done with my work. EDIT: Yeah, I think it's just me, sorry. EDIT2: If you don't want to put enterPIN(4); like Daniel suggested, why not rely on this more? just get a value and put in element.innerHTML += "4"? – Toza Commented Aug 7, 2015 at 21:53

4 Answers 4

The first time the for loop iterates (with i=0), it will get to the return statement and the function will quit after just one iteration never reaching the last part of the script.

This can be done with less code if you just change the HTML a little bit by putting the value as an argument to enterPin:

<input type="button" class="numKey" id="key7" value="7" onclick="enterPIN(7);">

Or, as suggested by bcdan, by using this so you don't have to repeat yourself:

<input type="button" class="numKey" id="key7" value="7" onclick="enterPIN(this.value);">

Do note that I changed from submit to button since you do not actually want to submit the form once the buttons are pressed. Then you just need this JS:

function enterPin(number) {
    screen = document.getElementById("screen");
    screen.innerHTML = screen.innerHTML + String(number);
}

Or, if you want to use jQuery (and get rid of the onclick attribute):

$(".numKey").click(function() {
    screen = $("#screen");
    screen.html(screen.html + this.value);
});

Well if you just need it to output what you click, why not do something like

<html>
    <body>
        <script>
        function enterPIN(value)
        {
            document.getElementById('screen').innerHTML += String(value);
        }

        </script>

        <div id="screen"></div>

        <div><input type="submit" class="numKey" id="key7" value="7" onclick="enterPIN(this.value);"></div>
        <div><input type="submit" class="numKey" id="key8" value="8" onclick="enterPIN(this.value);"></div>
        <div><input type="submit" class="numKey" id="key9" value="9" onclick="enterPIN(this.value);"></div>

    </body>
</html>

Look at this example

window.onload = function(){
    var MAX_LEN = 4,
        currentValue = "",
        elScreen = document.getElementById('screen'),
        addDigit = function(digit){
            digit = digit instanceof MouseEvent ? this.value : digit;
            if (elScreen.innerHTML.length < MAX_LEN) elScreen.innerHTML += digit;
        },
        delDigit = function(){
            elScreen.innerHTML = elScreen.innerHTML.slice(0,elScreen.innerHTML.length - 1);
        };
    //setting handlers for numKeys
    numBtns = document.getElementsByClassName('numKey');
    for (var i = 0 ; i < numBtns.length; i++) numBtns[i].onclick = addDigit;
    //setting handler for backKey
    document.getElementById('backKey').onclick = delDigit;
}

Do not think about event handlers first. Write simple functions addDigit and delDigit, and after call them from handlers.

The simplest solution is to pass this.value in the onclick function parameters (as @DanielBeck suggests):

<input type="button" value="1" onclick="enterPIN(this.value)"/>

This is much simpler than trying to pull out which button was pressed, when that information can be directly delivered.