使用字符串模板时未定义 onchange 函数

Question

我正在尝试创建一个在输入值更改时调用的函数。单击按钮时会创建输入。我正在尝试使用onchange 属性作为输入，但是当我编辑第一个输入字段的值时，我收到此错误：addTitle is not defined at HTMLInputElement.onchange。我不明白为什么没有定义函数。

HTML：

<div id="self-container">
            <fieldset class="self">
                <legend class="self-title">curently reading</legend>
                <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
            </fieldset>
            <fieldset class="self">
                <legend class="self-title">want to read</legend>
                <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
            </fieldset>
            <fieldset class="self">
                <legend class="self-title">read</legend>
                <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
            </fieldset>
        </div>

JS：

const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName('add-book-btn');

let myBooks = [];

function createBook(title, author, rating) {
    let book = {};
    book.title = title;
    book.author = author;
    book.rating = rating;

    return book;
}

function addTitle(title) {
    console.log("The title is " + title);
}

for (let i = 0; i < addBookBtn.length; i++) {
    
    

    function addBookCard() {
            addBookBtn[i].addEventListener('click', function () {
                myBooks.push(createBook());
                selfs[i].innerHTML += `
                <div class="book-card bc-display">
                    <input type="text" placeholder="title" onchange="addTitle(this.value)">
                    <input type="text" placeholder="author">
                    <input type="text" placeholder="rating">
                </div>
                `;
                addBookCard();
            });
        };
    addBookCard();
}

Answer 1

这是实现此目的的一种更简洁的方法：

HTML 代码：

<div id="self-container">
  <fieldset class="self">
    <legend class="self-title">curently reading</legend>
    <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
  </fieldset>
  <fieldset class="self">
    <legend class="self-title">want to read</legend>
    <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
  </fieldset>
  <fieldset class="self">
    <legend class="self-title">read</legend>
    <button class="add-book-btn"><i class="fas fa-plus plus-icon"></i></button>
  </fieldset>
</div>

JS 代码：

const selfs = document.getElementsByClassName("self");
const addBookBtn = document.getElementsByClassName('add-book-btn');

let myBooks = [];

function createBook(title, author, rating) {
  let book = {};
  book.title = title;
  book.author = author;
  book.rating = rating;

  return book;
}

function addTitle(title) {
  console.log("The title is " + title);
}

function onButtonClicked(index) {
  let html_string = `
                <div class="book-card bc-display">
                    <input type="text" placeholder="title" onchange="addTitle(this.value)">
                    <input type="text" placeholder="author">
                    <input type="text" placeholder="rating">
                </div>
                `;
  selfs[index].insertAdjacentHTML("beforeend", html_string);
};

for (let i = 0; i < addBookBtn.length; i++) {
  addBookBtn[i].addEventListener('click', function() {
    onButtonClicked(i)
  }, false);
};

现场演示： https://jsfiddle.net/h1a92jg7/1/