Geek Answers Handbook

Changing innerHTML to the value from the div id captured by it ClassName

I have several buttons 1-9, and I want to show their numbers on a div called "screen". Therefore, I wrote such code, but it does not work.

Part of the HTML code with these 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 as follows:

enter image description here

+4
source share
4 answers

See 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. Write simple addDigit and delDigit and after calling them from handlers.

+1
source

The first time the for loop starts (with i=0 ), it goes to the return , and the function stops working after one iteration, never reaching the last part of the script.

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

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

Or, as bcdan suggested, using this , so you don't need to repeat:

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

Notice that I changed from submit to button , since you really don't want to submit the form after clicking the buttons. 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); });
+4
source

Well, if you just need 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>
+2
source

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

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

This is much easier than trying to pull out which button is pressed when this information can be delivered directly.

+1
source

More articles:


All Articles