onclick on all inputs

Question

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.

Answer 1

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;

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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