CODEWITHSUNDEEP
javascripthtmlinnerhtmlgetelementbyidgetelementsbyclassname
ScriptyChris
ScriptyChris

Reputation: 669

Changing innerHTML to value from div's Id captured by it's ClassName

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:

enter image description here

Upvotes: 4

Views: 1235

Answers (4)

Anders
Anders

Reputation: 8577

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);
});

Upvotes: 4

Naeel Maqsudov
Naeel Maqsudov

Reputation: 1434

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.

Upvotes: 1

Nathu
Nathu

Reputation: 262

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>

Upvotes: 2

bcdan
bcdan

Reputation: 1428

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.

Upvotes: 1

Related Questions