Question

以下函数基于从API请求接收的数据创建表。第一次可以成功调用，但是之后的任何调用都会导致

未捕获的TypeError：contact.src不是HTMLButtonElement.onclick上的函数

功能：

let contact = {
  src: function () {
    let rawdata = new FormData(document.querySelector('#SrcContactForm'))
    let data = new FormData()
    data.append('ContactName', rawdata.get('FindContactName'))
    data.append('CompanyName', rawdata.get('FindCompanyName'))
    data.append('Client', rawdata.get('FindClient'))
    data.append('PhoneNumber', rawdata.get('FindPhoneNumber'))
    data.append('EmailAddress', rawdata.get('FindEmailAddress'))
    data.append('Magazine', rawdata.get('FindMagazine'))
    data.append('Size', rawdata.get('FindSize'))
    data.append('Sector', rawdata.get('FindSector'))
    fetch('http://sub.domain.tld/api/v1/contacts/search', {
      method: 'post',
      body: data,
      headers: {
        'Auth-Token': getCookie('Auth')
      }
    })
      .then((resp) => resp.json())
      .then(function (data) {
        console.log(data)
        if (data.success !== true) {
          notif.show('Contacts could not be found.', 'red')
        } else {
          notif.show('Contacts successfully found.', 'green')
          let table = document.createElement('table')
          table.id = 'SrcContactTable'
          table.setAttribute('class', 'table table-bordered table-responsive')
          let thead = document.createElement('thead')
          thead.class = 'text-primary'
          let th1 = document.createElement('th')
          let th2 = document.createElement('th')
          let th3 = document.createElement('th')
          let th4 = document.createElement('th')
          let th5 = document.createElement('th')
          let th6 = document.createElement('th')
          th1.innerHTML = 'ID'
          th2.innerHTML = 'Contact Name'
          th3.innerHTML = 'Company Name'
          th4.innerHTML = 'Client'
          th5.innerHTML = 'Phone Number'
          th6.innerHTML = 'Email Address'
          thead.appendChild(th1)
          thead.appendChild(th2)
          thead.appendChild(th3)
          thead.appendChild(th4)
          thead.appendChild(th5)
          thead.appendChild(th6)
          table.appendChild(thead)
          for (contact in data.result) {
            let tr = document.createElement('tr')
            tr.id = data.result[contact]['ID']
            let td1 = document.createElement('td')
            let td2 = document.createElement('td')
            let td3 = document.createElement('td')
            let td4 = document.createElement('td')
            let td5 = document.createElement('td')
            let td6 = document.createElement('td')
            td1.innerHTML = data.result[contact]['ID']
            td2.innerHTML = data.result[contact]['Contact Name']
            td3.innerHTML = data.result[contact]['Company Name']
            td4.innerHTML = data.result[contact]['Client']
            td5.innerHTML = data.result[contact]['Phone Number']
            td6.innerHTML = data.result[contact]['Email Address']
            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)
            tr.appendChild(td4)
            tr.appendChild(td5)
            tr.appendChild(td6)
            table.appendChild(tr)
          }
          document.getElementById('table-responsive').appendChild(table)
        }
      })
      .catch(function (error) {
        console.log('Request failed', error)
      })
  }
}

从let更改为var并没有什么不同。删除以下行时，可以根据需要调用该函数多次：

let table = document.createElement('table')

但是随后没有创建表，这违背了该功能的目的。

Answer 1

您正在覆盖for循环中的contact变量：

var contact = {
  src: function() {
    for (contact in contact.data) {
      console.log(contact);
    }
  },
  data: {
    foo: 1,
    bar: 2,
    baz: 3
  }
};

contact.src();
console.log("Final value", contact);

使用带有var或let且名称不同的 local 变量：

var contact = {
  src: function() {
    for (let c in contact.data) {
      console.log(c);
    }
  },
  data: {
    foo: 1,
    bar: 2,
    baz: 3
  }
};

contact.src();
console.log("Final value", contact);

JavaScript函数不能被调用两次

1 个答案: