I have the following code:
<tr>
<td class="moduleSupport">
1
</td>
<td class="moduleName">
Cargo Hold
</td>
<td class="currentModuleQuantity">
<input class="currentModuleQuantity" placeholder="Enter current
quantity" type="text">
<span class="currentModuleQuantityErr"></span>
</td>
</tr>
<tr>
<td class="moduleSupport">
1
</td>
<td class="moduleName">
Crow Nest
</td>
<td class="currentModuleQuantity">
<input class="currentModuleQuantity" placeholder="Enter current quantity" type="text">
<span class="currentModuleQuantityErr"></span>
</td>
</tr>
<tr>
<td class="moduleSupport">
1
</td>
<td class="moduleName">
Galley
</td>
<td class="currentModuleQuantity">
<input class="currentModuleQuantity" placeholder="Enter current quantity" type="text">
<span class="currentModuleQuantityErr"></span>
</td>
</tr>
<tr>
<td class="moduleSupport">
1
</td>
<td class="moduleName">
Information Console
</td>
<td class="currentModuleQuantity">
<input class="currentModuleQuantity" placeholder="Enter current quantity" type="text">
<span class="currentModuleQuantityErr"></span>
</td>
</tr>
I want to grab the value of the moduleSupport class when I click in the currentModuleQuantity textbox as I want to check that the value entered by the user is not bigger than the value of the moduleSupport and if the amount in any given line is not to the standard to display an error underneath the current line I am working on.
Here is my current jquery code and I am struggling to get it write. Help would be much appreciated:
var calculateShipUpgradeCost = {
init: function(config){
this.config = config;
this.bindEvents();
},
bindEvents: function(){
this.config.currentModuleQuantity.on('click', this.checkCurrentModuleQuantity);
this.config.currentQuaterQuantity.on('click', this.checkCurrentQuaterQuantity);
},
//Checking if module quantities are good
checkCurrentModuleQuantity: function(){
var self = calculateShipUpgradeCost;
console.log('Click event detected in ship modules section');
// var row = self.config.currentModuleQuantity.parents('tr');
// var currentModuleQuantity = $('td', row).eq(0).html();
// console.log(row);
console.log(self.config.moduleSupport.text());
// console.log(self.config.upgradeModQantity.text());
console.log(self.config.currentModuleQuantity.val());
// self.config.moduleSupport.each(function(){
// var supports = self.config.moduleSupport.text(supports);
// });
},
//Check if quarter quantities are all good
checkCurrentQuaterQuantity: function(){
var self = calculateShipUpgradeCost;
console.log('Click event detected in the ship crew quarters section');
}
}
//Initiate the object
calculateShipUpgradeCost.init({
currentModuleQuantity: $('input.currentModuleQuantity'),
currentModuleQuantityErr: $('span.currentModuleQuantityErr'),
currentQuaterQuantity: $('input.currentQuaterQuantity'),
currentQuaterQuantityErr: $('span.currentQuaterQuantityErr'),
currentModules: $('table'),
moduleSupport: $('td.moduleSupport'),
upgradeModQantity: $('td.upgradeModQantity')
});
So, your problem is that you are accessing the config object every time instead of the event trigger. I made some changes to your code in order to access to the current module support value. Read the comment above every line in order to understand what I'm doing:
// ...
bindEvents: function() {
// let's create an alias of the object in order to
// use it inside jQuery callback without loosing the scope
var self = this;
// your way to call those functions was kind of weird, better this way
this.config.currentModuleQuantity.on('click', function (e) {
// lets store the trigger and pass it to the functions
var $trigger = $(this);
self.checkCurrentModuleQuantity($trigger);
// self.checkCurrentQuaterQuantity();
});
},
checkCurrentModuleQuantity: function($trigger) {
console.log('Click event detected in ship modules section');
// your big problem. you were trying to access an element from
// the config object instead of the trigger. in your config object,
// moduleSupport selector was selecting more than one element. also,
// no need to alias the object here because we are not digging deeper in
// any jQuery callback
var module_support = $trigger.parents('tr').find('.moduleSupport').text();
// output the text content of the current moduleSupport td by accessing the parent tr first and then finding the td.moduleSupport
console.log('Current module support value:', module_support);
},
// ...
I don't really know if this answer your whole question. But I think is enough to go further from here by your own. If you have any other question, I'm happy to help.