在将调用第一个函数的第二个函数中调用第一个函数

Question

我需要调用 addPatron 函数，该函数将从 addpatron 函数中调用 validateItems 函数。当我单击 addPatron 按钮时，它应该提交表单，除非未输入数据。但是我遇到了麻烦，因为当单击按钮而不添加信息时，我收到错误消息，但是当我输入信息时，错误消息仍然存在并且表单不会提交。我不确定我是否正确地从 ValidateItem 函数调用 addPatron 函数。请帮忙。这是代码。

var $ = function (id) {

  return document.getElementById(id)

}

var validateItems = function () {

  addpatron()

  var isValid = true

  var firstName = $('firstname').value

  $('firstname').focus() // puts crusor on field

  if (firstName == '') {

    $('firstnameerror').innerHTML = 'Enter First Name'

    isValid = false

  }

  var lastName = $('lastname').value

  if (lastName == '') {

    $('lastnameerror').innerHTML = 'Enter Last Name'

    isValid = false

  }

  var myEmail = $('email').value

  if (myEmail == '') {

    $('emailerror').innerHTML = 'Enter Email'

    isValid = false

  }

  var myCity = $('city').value

  if (myCity == '-') {

    $('cityerror').innerHTML = 'Select a City from the list'

    isValid = false

  }

  var myDonation = $('donation').value

  if (myDonation == '') {

    $('donationerror').innerHTML = 'Enter Donation Amount'

    isValid = false

  } else if (isNaN(myDonation)) {

    $('donationerror').innerHTML = 'Amount must be numeric'

    isValid = false

  }

  return isValid

}

var addpatron = function () {

  var isValid = validateItems

  if (isValid == true) {

    $('myform').submit()

  } else {

    $('endmessage').innerHTML = 'Patron Not Added!'

  }

}

var clearfields = function () {

  firstname.value = ''

  lastname.value = ''

  email.value = ''

  city.value = '-'

  donation.value = ''

  firstnameerror.innerHTML = ''

  lastnameerror.innerHTML = ''

  emailerror.innerHTML = ''

  cityerror.innerHTML = ''

  donationerror.innerHTML = ''

  endmessage.innerHTML = ''

}

window.onload = function () {

  $('validateItems').onclick = addPatron

  $('firstname').focus() // puts the crusor on field

  $('clearfields').onclick = clearfields

}

Answer 1

你并不需要调用addPatron的validateItems，但你确实需要调用validateItems的addPatron:-)var validateItems = function () {  // addpatron() // don't call this  var isValid = true  var firstName = $('firstname').value  $('firstname').focus() // puts crusor on field  if (firstName == '') {    $('firstnameerror').innerHTML = 'Enter First Name'    isValid = false  }  var lastName = $('lastname').value  if (lastName == '') {    $('lastnameerror').innerHTML = 'Enter Last Name'    isValid = false  }  var myEmail = $('email').value  if (myEmail == '') {    $('emailerror').innerHTML = 'Enter Email'    isValid = false  }  var myCity = $('city').value  if (myCity == '-') {    $('cityerror').innerHTML = 'Select a City from the list'    isValid = false  }  var myDonation = $('donation').value  if (myDonation == '') {    $('donationerror').innerHTML = 'Enter Donation Amount'    isValid = false  } else if (isNaN(myDonation)) {    $('donationerror').innerHTML = 'Amount must be numeric'    isValid = false  }  return isValid}var addpatron = function () {  var isValid = validateItems() // do call this  if (isValid == true) {    $('myform').submit()  } else {    $('endmessage').innerHTML = 'Patron Not Added!'  }}

Answer 2

此外，您的 CSS 选择器是错误的。我认为您的意图是查找具有属性id="firstname"、id="firstnameerror"等的html 元素。在 CSS 选择器中，#意味着按 id 查找元素，因此您确实想要$('#firstname')等。而且看起来你不懂jquery。Jquery 对象与https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API中记录的原始 DOM 元素不同。原始 DOM 元素是浏览器脚本中可用的最低级别的 DOM 接口。Jquery 是一个建立在它之上的库。一个 jquery 对象代表一个 DOM 元素（或者多个元素，或者根本没有）。但是 jquery 对象上可用的方法与原始 DOM 元素上可用的方法完全不同，您似乎正在尝试使用它们。请注意，由于 jquery 对象根本不能表示任何对象，因此当遇到 CSS 选择器无法匹配 DOM 中的任何元素时，jquery 不会抛出异常。有不同的方法来解决这个问题。您可以完全接受 jquery，使用 jquery 中可用的所有方法，而不是您所学的方法。例如，$('validateItems').onclick = addPatron会变成$('validateItems').click(addPatron). 有关更多详细信息，请参阅 jquery.com。或者你可以使用原始 DOM 的东西。您也可以混合使用这两种方法，只要您不要混淆这两种方法即可。例如，我相信 jquery 对象可以像原始 DOM 元素的数组一样被取消引用，$('#firstname')[0]即将是第一个（也是唯一一个）具有 id 的 DOM 元素firstname。这意味着您可以像对待任何 DOM 元素一样对待它；例如，var firstName = $('#firstname')[0].value。（虽然很烦人，但我在文档中找不到它。）相反，如果element是原始 DOM 元素，则$(element)是包含该元素（没有其他元素）的 jquery 对象。使用原始 DOM 元素很笨拙。方法名称很长，并且存在不同浏览器之间不一致的问题（虽然我怀疑这不像以前那么糟糕）。Jquery 在我看来更好。但是 jquery 现在也相当过时了。更现代的东西使用诸如 React 之类的库，它使用不同的范式，旨在避免诸如忘记更新页面部分之类的问题。