In your code you do not assign an event listener but the result of the call to the function
Remove the () and access the tags.
Also you create an out array and then immediately overwrite it with a string
Perhaps you meant
const tags = ['#tiktok', '#twitter', '#facebook', '#instagram', '#hot', '#youtube'];
let btn = document.getElementById("btn");
btn.addEventListener("click", myFunction);
let out = [];
function myFunction() {
const tag = tags[Math.floor(Math.random() * tags.length)];
if (!out.includes(tag)) out.push(tag);
console.log(out);
}
<div class="card-header bg-danger text-white">
<strong>tags</strong>
<button id="btn" class="btn-primary">Generate</button>
</div>
If you MUST pass the array, then you need to wrap in a function
const tags = ['#tiktok', '#twitter', '#facebook', '#instagram', '#hot', '#youtube'];
let btn = document.getElementById("btn");
btn.addEventListener("click", function() { myFunction(tags) });
function myFunction(array) {
var out = array[Math.floor(Math.random() * array.length)];
console.log(out);
}
<div class="card-header bg-danger text-white">
<strong>tags</strong>
<button id="btn" class="btn-primary">Generate</button>
</div>
Option One :
const tags = ['#tiktok', '#twitter', '#facebook', '#instagram', '#hot', '#youtube'];
let btn = document.getElementById("btn");
let generatedTags = document.getElementById("generatedTags");
function generateTag() {
myFunction(tags);
}
function myFunction(array) {
var out = [];
var out = array[Math.floor(Math.random() * array.length)];
let generatedTag = document.createElement('li');
generatedTag.innerText = out;
generatedTags.appendChild(generatedTag);
alert(out);
}
<div class="card-header bg-danger text-white">
<strong>tags</strong>
<ul id="generatedTags"></ul>
<button id="btn" class="btn-primary" onclick="generateTag()">Generate</button>
</div>
Option Two:
const tags = ['#tiktok', '#twitter', '#facebook', '#instagram', '#hot', '#youtube'];
let btn = document.getElementById("btn");
btn.addEventListener("click", function(){
myFunction(tags);
});
let generatedTags = document.getElementById("generatedTags");
function myFunction(array) {
var out = [];
var out = array[Math.floor(Math.random() * array.length)];
let generatedTag = document.createElement('li');
generatedTag.innerText = out;
generatedTags.appendChild(generatedTag);
alert(out);
}
<div class="card-header bg-danger text-white">
<strong>tags</strong>
<ul id="generatedTags"></ul>
<button id="btn" class="btn-primary">Generate</button>
</div>
Option Three:
const tags = ['#tiktok', '#twitter', '#facebook', '#instagram', '#hot', '#youtube'];
let btn = document.getElementById("btn");
btn.addEventListener("click", function() {
var out = [];
var out = tags[Math.floor(Math.random() * tags.length)];
let generatedTag = document.createElement('li');
generatedTag.innerText = out;
generatedTags.appendChild(generatedTag);
alert(out);
});
let generatedTags = document.getElementById("generatedTags");
<div class="card-header bg-danger text-white">
<strong>tags</strong>
<ul id="generatedTags"></ul>
<button id="btn" class="btn-primary">Generate</button>
</div>
So there are multiple ways to do it!
I also made it append the generated tag to a div if you don’t want it you can just remove it!!
btn.addEventListener("click", myFunction(tags));
You should change this line to below.
btn.addEventListener("click", () => myFunction(tags));
I want generate one tags when click the button, but unfortunately the tag only displays after the page load, but not when I click the button. can anyone help me?
const tags = ['#tiktok', '#twitter', '#facebook', '#instagram', '#hot', '#youtube'];
let btn = document.getElementById("btn");
btn.addEventListener("click", myFunction(tags));
function myFunction(array) {
var out = [];
var out = array[Math.floor(Math.random() * array.length)];
alert(out);
}
<div class="card-header bg-danger text-white">
<strong>tags</strong>
<button id="btn" class="btn-primary">Generate</button>
</div>
thank you very much, all of your three solutions work. Appreciate your help.
