如何從JavaScript中的Handler函數獲取返回值？

我能夠從我用來存儲表單信息的對象中獲取信息，當一個人試圖在未成功填充字段的情況下觸發提交時，但是當我正確輸入所有信息時，我似乎無法成功後獲得同樣的結果嗎？如何從JavaScript中的Handler函數獲取返回值？

 var theForm = document.getElementsByTagName('form')[0]; 
     var firstNameInput = document.getElementById('firstNameInput'); 
     var lastNameInput = document.getElementById('lastNameInput'); 
     var emailInput = document.getElementById('emailInput'); 
     var stateInput = document.getElementById('stateInput'); 

     var theButton = document.querySelector('input[type=submit]'); 

     // Wire the form's submit event to a callback 
     theForm.addEventListener('submit', validate); 

     function validate(e) { 

      // Error tracking variable 
      var error = false; 

      // Do validations 
      var emailPattern = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 

      var formData = { 
       'firstName': null, 
       'lastName': null, 
       'email': null, 
       'stateInput': null 
      } 

      if ((firstNameInput.value == '') || (firstNameInput.value == null)) { 
       firstNameInput.classList.add('invalid-input'); 
       firstNameInput.nextElementSibling.style.display = 'block'; 
       firstNameInput.nextElementSibling.innerHTML = 'Not valid!'; 
       error = true; 
      } 

      if ((lastNameInput.value == '') || (lastNameInput.value == null)) { 
       lastNameInput.classList.add('invalid-input'); 
       lastNameInput.nextElementSibling.style.display = 'block'; 
       lastNameInput.nextElementSibling.innerHTML = 'Not valid!'; 
       error = true; 
      } 

      if (!emailPattern.test(emailInput.value)) { 
       emailInput.classList.add('invalid-input'); 
       emailInput.nextElementSibling.style.display = 'block'; 
       emailInput.nextElementSibling.innerHTML = 'Please enter valid email address!'; 
       error = true; 
      } 

      if ((stateInput.value == 'selectstate')) { 
       stateInput.classList.add('invalid-input'); 
       stateInput.nextElementSibling.style.display = 'block'; 
       stateInput.nextElementSibling.innerHTML = 'Not valid!'; 
       error = true; 
      } 

      // If error, stop the event 
      if (error) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       console.log('There is no data from the form: '); 
       for (var prop in formData) { 
        console.log(prop + ' : ' + formData[prop]); 
       } 
       return false; 

      } else { 

       formData['firstName'] = firstNameInput.value; 
       formData['lastName'] = lastNameInput.value; 
       formData['email'] = emailInput.value; 
       formData['stateInput'] = stateInput.value; 
       console.log('There is now data from the form: :) '); 
       for (var prop in formData) { 
        console.log(prop + ' : ' + formData[prop]); 
       } 
       return true; 
      } 
     }

我嘗試這樣做：

var result = theForm.addEventListener('submit', validate); 

    if (result) { 
    console.log(result); 
    }

任何幫助，將不勝感激！

來源

2017-05-03 Antonio Pavicevac-Ortiz

你應該知道'theForm.addEventListener'剛安裝偵聽器，但在實際提交表單之前偵聽器不會被執行。因此，結果只能告訴你監聽程序的安裝是否成功。 –

你沒有得到任何返回值。 [回調甚至還沒有執行]（http://stackoverflow.com/q/23667086/1048572） – Bergi

感謝球員，基本上我想得到一些反饋，以顯示在控制檯，也許以後用一個看法？ –

根據w3schools.com，這個函數addEventListener（）不返回任何東西。

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

如果你想知道是否正確安裝了事件偵聽器，則需要檢查是否函數存在：

if(theForm.addEventListener){ 
    theForm.addEventListener('submit', validate); 
}else{ 
    theForm.attachEvent('onclick', validate); 
}

來源

2017-05-03 13:44:54

本質上......就像我在上面的評論中提到的，我想在該函數中使用該對象來顯示數據。將它用於console.log或稍後可以在模板/視圖中使用。感謝您回覆Lan！ –

如何從JavaScript中的Handler函數獲取返回值？

回答

相關問題