Javascript代码在按钮单击时生成随机标签不起作用

Question

我想在单击按钮时生成一个标签，但不幸的是该标签仅在页面加载后显示，但在我单击按钮时不显示。谁能帮帮我？

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>

Answer 1

在您的代码中，您没有分配事件侦听器，而是分配函数调用的结果

删除 () 并访问标签。

你也创建了一个输出数组，然后立即用一个字符串覆盖它

也许你的意思

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>

如果你必须传递数组，那么你需要包装在一个函数中

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>

Answer 2

选项一：

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>

选项二：

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>

选项三：

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>

所以有多种方法可以做到！

我还让它将生成的标签附加到一个 div，如果你不想要它，你可以删除它！！

Answer 3

btn.addEventListener("click", myFunction(tags));

你应该把这一行改成下面。

btn.addEventListener("click", () => myFunction(tags));