如何在 HTML + Javascript 中发送数组编号

Question

我找不到这个，因为我不知道如何正确地表达这个问题，很抱歉。

我正在尝试制作一个网站，您可以在其中单击一个按钮，然后您会看到一个带有预选文本的弹出窗口：

var text = ["test1", "test2", "test3"];
var x;

function copyToClipboard(text[x]) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

像这样。问题是我不知道如何从按钮发送正确的数组编号。这是否可能我需要妥协并可能只编写几个函数来决定 x 是什么？

编辑：我对问题的措辞有误，我想要几个按钮，一个抓取文本[1]、另一个文本[2]、下一个文本[3] 等等

所以它会是这样的：

<button id="btn1" onClick="copyToClipboard(1)"></button>
<button id="btn2" onClick="copyToClipboard(2)"></button>
<button id="btn3" onClick="copyToClipboard(3)"></button>

编辑 2：已得到解答，而且非常简单。抱歉打扰了。

Answer 1

如果您尝试获取与提示中输入的值相匹配的索引，您将使用以下内容：

var enteredValue = window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
var x = text.indexOf(enteredValue);

Answer 2

Quit Simple passe position to function 然后提示它的值（知道数组中第一个值是从0开始的）:

var text = ["test1", "test2", "test3"];

function copyToClipboard(x) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text[x]);
}

<button id="btn1" onClick="copyToClipboard(0)" >Btn 1</button>

<button id="btn2" onClick="copyToClipboard(1)" >Btn 2</button>

<button id="btn3" onClick="copyToClipboard(2)" >Btn 3</button>

Answer 3

虽然你已经接受了一个答案，但我想提供一个替代方案来简单地展示一种不需要使用 in-line JavaScript 的方法（这很难维护，将来更新或更改）。它还在整个代码中散落 event-handlers 并且需要更新 HTML 元素以将预期参数传递给命名函数，这本身会导致潜在问题。

也就是说，我建议的备选方案如下：

// the zero-indexed Array of Strings:
var text = ["test1", "test2", "test3"];

// the named function:
function copyToClipboard() {
  window.prompt("Copy to clipboard: Ctrl+C, Enter",

  // here we find the sequence of one, or more, numbers
  // ('\d+') at the end of the String ('$') (derived from
  // the 'id' property of the passed-in the 'this' element,
  // passed automatically from the addEventListener() method)
  //  using a regular expression literal ('/.../');
  // we use the unary '+' operator to convert that numeric
  // String into a real Number and then subtract 1,to move
  // from a one-based index to JavaScript's zero-based index:
  text[ +this.id.match(/\d+$/) - 1 ]);
}

// here we convert the Array-like NodeList (from
// document.querySelectorAll('button') retrieving
// the <button> elements) into an Array using
// Array.prototype.slice() along with
// Function.prototype.call():
Array.prototype.slice.call(document.querySelectorAll('button'))
  // we then use Array.prototype.forEach() to iterate over the
  // Array of <button> elements:
  .forEach(
    function(button) {
    // 'button' a reference to the current <button> element
    // in the Array of <button> elements over which we're
    // iterating.

    // here we add an event-listener for the 'click' event,
    // binding the copyToClipboard() function as the event-
    // handler for that event (note the deliberate lack of
    // parentheses):
    button.addEventListener('click', copyToClipboard);
  });

<!-- note the removal of the 'onclick' event-handlers -->
<button id="btn1">One</button>
<button id="btn2">Two</button>
<button id="btn3">Three</button>

参考文献：

如何在 HTML + Javascript 中发送数组编号

How to send array number in HTML + Javascript

html

javascript

arrays

copy

copy-paste