/    Sign up×
Community /Pin to ProfileBookmark

How can I add onclic to the generated buttons?

Copy linkTweet thisAlerts:
Dec 07.2016

I have a field for input on an HTML page. I have generated buttons. But I have problem. I dont’n know how to add onclic for each button. I need to display value of buttons on my field after press on each button.

This is my code:

[CODE]
<html>
<head>
</head>
<body>
<form name=”field”>
<input type=”text” name=”input” size=”50″>
<input type=”reset”/>
</form>
<p></p>

<script>
var mylist = [‘first’, ‘second’, ‘third’, ‘fourth’, ‘fifth’]
var rand = null;
var word = null;
var threshold = 3

for (var i = 0; i < threshold; i++) {
rand = Math.floor(Math.random() * (mylist.length – 1)) + 1;
word = mylist[rand];
var btn = document.createElement(‘input’);
btn.id = ‘b’ + i;
btn.value = word;
btn.type = ‘button’;
document.body.appendChild(btn);
}
</script>
</body>
</html>
[/CODE]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumDec 07.2016 — Try this:[CODE] for (var i = 0; i < threshold; i++) {
rand = Math.floor(Math.random() * (mylist.length - 1)) + 1;
word = mylist[rand];
var btn = document.createElement('input');
btn.id = 'b' + i;
btn.value = word;
btn.type = 'button';
btn.addEventListener("click", function () {
document.querySelector("input[name='input']").value = this.value;
});
document.body.appendChild(btn);
}[/CODE]
Copy linkTweet thisAlerts:
@mikefromruauthorDec 07.2016 — Try this:[CODE] for (var i = 0; i < threshold; i++) {
rand = Math.floor(Math.random() * (mylist.length - 1)) + 1;
word = mylist[rand];
var btn = document.createElement('input');
btn.id = 'b' + i;
btn.value = word;
btn.type = 'button';
btn.addEventListener("click", function () {
document.querySelector("input[name='input']").value = this.value;
});
document.body.appendChild(btn);
}[/CODE][/QUOTE]

Thank you very much!
Copy linkTweet thisAlerts:
@rootDec 07.2016 — Your routine I note has the possibility to call the same reference twice.

Therefore I would suggest that you use something like word = mylist.splice(rand,1); which will remove the word in the array and then return that element to the variable word which will be an array, you only need modify btn.value = word; to btn.value = word[0]; or btn.value = word.toString(); or even btn.value = word.shift(); to get the 0th position of the array returned to a string.

You will then be assured of a unique return per iteration of your random call because each iteration takes the mew array length. You should also note that arrays start a zero, so +1 on the end will always result in a number 1 to nth element You may want to consider a bitwise method like rand = ~~(Math.random() * mylist.length - 1) | 0;

var mylist = ['first', 'second', 'third', 'fourth', 'fifth'],
rand = null,
word = '';
var threshold = 3
for (var i = 0; i &lt; threshold; i++) {
rand = ~~(Math.random() * mylist.length - 1) | 0;
word = mylist.splice(rand,1);
var btn = document.createElement('input');
btn.id = 'b' + i;
btn.value = word.toString();
btn.type = 'button';
btn.addEventListener("click", function () {
document.querySelector("input[name='input']").value = this.value;
});
document.body.appendChild(btn);
}
Copy linkTweet thisAlerts:
@rootDec 08.2016 — Infact... rand = ~~(Math.random() * mylist.length -1 ) | 0; should be rand = ~~(Math.random() * mylist.length ) | 0;
×

Success!

Help @mikefromru spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...