我使用的是Visual Studio代码。我试图控制台记录从UICtrl调用getInput方法的input变量的值，但它显示了错误"；未捕获的类型错误：无法读取HTMLButtonElement.ctrlAddItem(script.js:21(上未定义的属性"getInput"在控制台中。请帮忙。
HTML代码-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Kalam&family=Recursive&family=Rowdies:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assetsstylesheetmain.css">
<title>BUDGETOFY</title>
</head>
<body class="container">
<div class="background">
<div class="av-budget-heading">Available Budget:</div>
<div class="av-budget">+2,500</div>
<div class="income">
<div class="inex-heading left">Income</div>
<div class="inex-number little-right-1">+3,500</div>
</div>
<div class="expense">
<div class="inex-heading left">Expenses</div>
<div class="inex-number little-right-2">-1,000</div>
<div class="ex-percent right percent-main">28%</div>
</div>
</div>
<hr>
<div class="selections">
<select class="drop-down add-type">
<option value="inc" selected>+</option>
<option value="exp">-</option>
</select>
<input type="text" class="drop-down add-description" placeholder="Add Description">
<input type="number" class="drop-down add-value" placeholder="Value">
<button id="button"><i class="ion-ios-checkmark-outline ok-btn"></i></button>
</div>
<hr>
<div class="wrapper line">
<div class="income-down">
<h2 class="in">INCOME</h2>
<div class="add-income inc-left">salary</div>
<div class="income-amt inc-amt">+2,000</div>
<div class="add-income inc-left">sold car</div>
<div class="income-amt inc-amt">+1,500</div>
</div>
<div class="expense-down">
<h2 class="ex">EXPENSES</h2>
<div class="add-expense exp-left">rent</div>
<div class="expense-amt exp-amt">-900</div>
<div class="add-expense exp-left">grocery</div>
<div class="expense-amt exp-amt">-100</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript代码-
var budgetController = (function(){
})();
var UIController = (function(){
return {
getInput: function(){
return{
type: document.querySelector('.add-type').value, // inc or exp
decription: document.querySelector('.add-description').value,
value: document.querySelector('.add-value').value
};
}
};
})();
var controller = (function(budgetCtrl, UICtrl){
var ctrlAddItem = function(){
var input = UICtrl.getInput();
console.log(input);
}
document.getElementById('button').addEventListener('click', ctrlAddItem);
document.addEventListener('keypress', function(event){
if(event.keyCode === 13 || event.which === 13)
{ctrlAddItem();}
});
})();
您有一个函数需要2个参数，但您没有传递任何参数。
var budgetController = (function(){
})();
var UIController = (function(){
return {
getInput: function(){
return{
type: document.querySelector('.add-type').value, // inc or exp
decription: document.querySelector('.add-description').value,
value: document.querySelector('.add-value').value
};
}
};
})();
var controller = (function(budgetCtrl, UICtrl){
var ctrlAddItem = function(){
var input = UICtrl.getInput();
console.log(input);
}
document.getElementById('button').addEventListener('click', ctrlAddItem);
document.addEventListener('keypress', function(event){
if(event.keyCode === 13 || event.which === 13)
{ctrlAddItem();}
});
})(budgetController, UIController ); // Pass them here
我也不知道你为什么用(function(){})()包装所有东西，但你不需要到处都用。你可以这样做：
var budgetController = {
};
var UIController = {
getInput: function(){
return{
type: document.querySelector('.add-type').value, // inc or exp
decription: document.querySelector('.add-description').value,
value: document.querySelector('.add-value').value
};
}
}
var controller = (function(budgetCtrl, UICtrl){
var ctrlAddItem = function(){
var input = UICtrl.getInput();
console.log(input);
}
document.getElementById('button').addEventListener('click', ctrlAddItem);
document.addEventListener('keypress', function(event){
if(event.keyCode === 13 || event.which === 13)
{ctrlAddItem();}
});
})(budgetController, UIController ); // Pass them here
当ctrlAddItem函数运行时，错误会告诉您UICtrl未定义。这将导致检查您是如何调用CCD_ 4函数的。
只需更新调用controller函数的方式，以包含必须具有getInput函数的第二个参数。