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

-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.

8/26/2017 11:28:35 AM

Maciej Mazurek

7 Answers

New Answer

+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;

+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...

+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.

+4

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

+3

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

-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

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