Question

我有一个带有书串的数组，这个代码将数组中的每个项目放到一个按钮中。如何获取按钮以传递按钮字符串的参数？

<p id="bil"></p>

function nb() {
    for (var i = 0; i < booksInLibrary.length; i++) {
        document.getElementById("bil").innerHTML += "<button class='btn' onclick='add()'>" + booksInLibrary[i] + "</button> "
    }
}

var booksInLibrary = [
    "Bambi",
    "The Lord of the Rings",
    "Aladdin",
    "Dune",
    "I, Robot",
    "The Martian"
]

Answer 1

您可以使用插值将文本设置为

document.getElementById("bil").innerHTML += `<button class='btn' onclick='add("${booksInLibrary[i]}")'>${ booksInLibrary[i]}</button>`;

function nb() {
    for (var i = 0; i < booksInLibrary.length; i++) {
        document.getElementById("bil").innerHTML += `<button class='btn' onclick='add("${booksInLibrary[i]}")'>${ booksInLibrary[i]}</button>`;
    }
}

var booksInLibrary = [
    "Bambi",
    "The Lord of the Rings",
    "Aladdin",
    "Dune",
    "I, Robot",
    "The Martian"
]

nb();

<p id="bil"></p>

Answer 2

将onclick='add()'替换为onclick='add(" + i + ")'>"

然后您可以做：

var booksInLibrary = [
    "Bambi",
    "The Lord of the Rings",
    "Aladdin",
    "Dune",
    "I, Robot",
    "The Martian"
]

function nb() {
    for (var i = 0; i < booksInLibrary.length; i++) {
        document.getElementById("bil").innerHTML += "<button class='btn' onclick='add(" + i + ")'>" + booksInLibrary[i] + "</button> "
    }
}

function add(bookId) {
    var bookTitle = booksInLibrary[bookId]
    // do something with book title
    alert(bookTitle)
}

如果您真的需要书名作为字符串：

var booksInLibrary = [
    "Bambi",
    "The Lord of the Rings",
    "Aladdin",
    "Dune",
    "I, Robot",
    "The Martian"
]

function nb() {
    for (var i = 0; i < booksInLibrary.length; i++) {
        var btn = document.createElement("button")
        btn.innerText = booksInLibrary[i]
        btn.className = "btn"
        btn.onclick = (function(i) {
            add(booksInLibrary[i])
        }).bind(null, i)
        document.getElementById("bil").appendChild(btn)
    }
}

function add(bookTitle) {
    alert(bookTitle)
}

如何通过数组按钮传递参数

2 个答案: