Как отправить номер массива в HTML + Javascript

Question

Я не мог найти это, потому что я не знаю, как правильно словить вопрос, так что пожалеете об этом.

Я пытаюсь сделать веб-сайт, где вы нажимаете на кнопку, и вы получите всплывающее окно с предварительно выбранным текстом:

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

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

как так. Проблема в том, что я не знаю, как отправить правильный номер массива с помощью кнопки. Возможно ли, что мне нужно идти на компромисс и, возможно, просто написать несколько функций, определяющих, что такое x?

EDIT: Я сформулированный вопрос неправильно, я хочу несколько кнопок один, который захватывает текст [1], другой текст [2], следующий текст [3] и т.д. и т.п.

Так что было бы что-то например:

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

EDIT 2: Ответ получен, и это было просто. Извините за беспокойство.

Answer 1

Выход Простой PASSE позиции функционировать, а затем предложит это значение (зная, что первое значение statrt от 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 2

Если вы пытаетесь получить индекс, соответствующий значение, введенное в строке, можно использовать следующее:

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

Answer 3

в то время как вы уже приняли ответ, я тусклый чтобы предложить альтернативу просто показать подход, который не требует использования встроенного JavaScript (который трудно поддерживать, обновлять или изменять в будущем). Он также помещает обработчики событий по всему коду и требует, чтобы элементы 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>

Ссылки:

• Array.prototype.slice().
• Array.prototype.forEach().
• document.querySelectorAll().
• EventTarget.addEventListener().
• Function.prototype.call().
• Guide to JavaScript Regular Expressions (MDN).
• String.prototype.match().
• Unary +.
• Window.prompt().