- 1

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.

26th Aug 2017, 11:28 AM
Maciej Mazurek
Maciej Mazurek - avatar
7 Answers
+ 5
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;
26th Aug 2017, 1:07 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
+ 4
// 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...
26th Aug 2017, 1:06 PM
visph
visph - avatar
+ 4
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.
26th Aug 2017, 3:03 PM
visph
visph - avatar
+ 4
Why marking the not understanded way as good answer @@ ?
26th Aug 2017, 3:03 PM
visph
visph - avatar
+ 3
Well I don't know what kind of output do you want
26th Aug 2017, 12:31 PM
Yanothai Chaitawat
Yanothai Chaitawat - avatar
- 1
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
26th Aug 2017, 12:58 PM
Maciej Mazurek
Maciej Mazurek - avatar
- 1
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 ;)
26th Aug 2017, 1:53 PM
Maciej Mazurek
Maciej Mazurek - avatar