onclick on all inputs | Sololearn: Learn to code for FREE!


onclick on all inputs

Hello, I have to write function in javascript that get value of specific input from all inputs type=button and display it on click. What I have so far is: function click() { var input = document.querySelectorAll('input[type=button]').value; document.frame.screen.value = input; } document.getElementById('firstbutton').onclick = click; Now I want to understand how can I to get specific value of "firstbutton" when I click on it. I know that if I put var input = document.querySelectorAll('input[type=button]')[0].value in function it will work but I want to write function that will return value on specific button from all buttons when I click it. Easier... when I click "firstbutton" I got value of 'firstbutton'. When I click "secondbutton" I got value of secondbutton and so far... and all of that with one function.... and I stuck... Any help? P.S. I cant use jQuery and loops in that task.

8/26/2017 11:28:35 AM

Maciej Mazurek

7 Answers

New Answer


Then...Had you try like this? function click(e){ document.querySelector('#frame>#screen').value=e.target.value; } or else function click(e){ e=e.target; e.parentElement.querySelector('#screen').value=e.value; } (document.frame.screen can't worked on me ) (also I don't like to use this keyword) More,Edited: For shorter form but slower input=document.querySelectorAll('input[type=button]',i=0); while(input[i])input[i++].onclick=click;


// function required is more simple than you think: function click() { document.frame.screen.value = this.value; } // and initialization of all <input> 'onclick' events can be done in a loop: var input = document.querySelectorAll('input[type=button]'); var i = input.length; while (i--) input[i].onclick = click; // obviously, you need to initialize event listeners when DOM is ready for JS access...


The while loop is a short way for doing the equivalent of (but reverse): for (var i=0; i<input.length; i++) { /* ... */ } (curly brackets are optional if contains only once statement ^^) 'i' is index of the array, initialized with length value of returned array like from .querySelectorAll() method. Loop do initialize each <input> selected by setting each 'onclick' event with the same function. At run time, when event handler is called, a special variables (an invisible argument of function) named 'this' is initialized with the reference of object throwing the event.


Why marking the not understanded way as good answer @@ ?


Well I don't know what kind of output do you want


HTML Code is : <form name="frame" id="frame"> <input name="screen" id="screen" value=""> <br> <input type="button" class="digits" value="1"> <input type="button" class="digits" value="2"> </form> and I need to write js function that show on "screen" value of input button when that one is clicked. It has to be one function for all buttons


visph thank you for a solution :) I tring to understand that : 1. We create variable which get from documents all inputs type=button. 2. Then we create variable "i" which is array containing input. and now i do not entirely understand what loop while do here... Function click is activate onclick of input elements with "i" index from "i" array. ? Very_Hard no offence but I'm total noob in JS and do not understand your way ;)