时间戳

首页 > 解决方案 > JavaScript 函数不能被调用两次

javascript - JavaScript 函数不能被调用两次

问题描述

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

未捕获的类型错误：contact.src 不是 HTMLButtonElement.onclick 处的函数

功能：

let contact = {
  src: function () {
    let rawdata = new FormData(document.querySelector('#SrcContactForm'))
    let data = new FormData()
    data.append('FieldOne', rawdata.get('FindFieldOne'))
    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')
          th1.innerHTML = 'ID'
          thead.appendChild(th1)
          table.appendChild(thead)
          for (contact in data.result) {
            let tr = document.createElement('tr')
            tr.id = data.result[contact]['ID']
            let td1 = document.createElement('td')
            td1.innerHTML = data.result[contact]['ID']
            tr.appendChild(td1)
            table.appendChild(tr)
          }
          document.getElementById('table-responsive').appendChild(table)
        }
      })
      .catch(function (error) {
        console.log('Request failed', error)
      })
  }
}

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

let table = document.createElement('table')

但是随后没有创建表，这违背了函数的目的。

标签： javascript

解决方案

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

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);

使用带有or和不同名称的局部变量：varlet

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);

推荐阅读