JQuery adding object function using .on() - javascript

I'm trying to add an object's function to a button that is created when some conditions are met. Does it matter if I have the var I'm trying to change outside document.ready?
var myvar = 1;
$(document).ready(function(){
var myobj = {
changeMyVar: function(){ myvar++;}
}
...
/* button id='my-button' is created in a div id='mydiv' */
...
$('#mydiv').on('click', '#my-button', myobj.changeMyVar);
});
No function is attached to the button and no error is thrown. In fact, console.log(myobj.changeMyVar) returns undefined. What am I missing here?
Edit: I lied about no errors, I get a 'undefined is not a function' on the .on() line.
Thanks!
Edit2: After further analysis, I discovered a silly type-o in my original code. Thanks for the answers!

I tried replicating your issue in a fiddle, but it worked.
Try this out http://jsfiddle.net/7fjk3wxs/1/
This is what I used:
var myvar = 1;
$(document).ready(function(){
var myobj = {
changeMyVar: function(){
myvar++;
alert(myvar);
}
};
$('#mydiv').on('click', '#my-button', myobj.changeMyVar);
});

After further analysis, I discovered a silly type-o in my original code. Thanks for the answers!

Related

Retrieving number of pages of a PDF using PDF.JS fails with return

I don't understand the following. Maybe I am missing some really stupid issue here... can anybody solve it? Thanks in advance.
I have this code in Javascript:
function funcLeNrPaginasPDF(strCaminhoPDF) {
var objLivrariaPDF = window['pdfjs-dist/build/pdf'];
var objDocumentoPDF = null;
objLivrariaPDF.workerSrc = '/pdfjs/pdf.worker.js';
// strCaminhoPDF var contains the pdf doc: "documento.pdf"
var oprCarregaPDF = objLivrariaPDF.getDocument(strCaminhoPDF);
oprCarregaPDF.promise.then(function(objDocumentoPDF) { document.getElementById('nr_paginas').textContent = objDocumentoPDF.numPages; });
It works like a charm, thus, if I change document.getElementById... and put
alert (objDocumentoPDF.numPages);
it works as well... However if I place a "return" the function returns me an undefined variable content. Like this:
oprCarregaPDF.promise.then(function(objDocumentoPDF) { return objDocumentoPDF.numPages; });
Any thoughts why? I need a variable to hold the number of pages.
Regards.
Solved it. Ashamed of such unimportant and easily spot-table fault. The return must've been put outside the bracket of the inner function... ahmen.

Test in JavaScript

Can you help me please?
During a test, I did not understand this question:
Given the following code, write two lines of JavaScript to call the
print() function in a way that prints the Window global object in the
JavaScript console?
Your code must not use the variable window. Feel free to comment.
Printer = function(){
this.print = function() {
console.log(this);
}
}
var printer = new Printer();
Answer:
printer.print.call(this);
//or
printer.print.bind(this)();
Why this is usefull:
Example: adding an event listener in an object:
function person(){
this.clicker=0;
document.body.addEventListener("click",function(){
this.clicker++;
});
}
So this should work, shouldnt it? Nope it doesnt, cause the eventlistener automatically binds this as the clicked element. So this will be body, wich hasnt a clicker property. So in that situation its usefull to override this...
document.body.addEventListener("click",function(){
this.clicker++;
}.bind(this))
Or in newer browsers (see arrow funcs):
document.onclick=()=>{
this.clicker++;
};
Thats what the tutorial wants to tell you. Hope it helps...

JS: call methods of an object inside jquery "click"

I have a fundamental misunderstanding of one of my numerous errors. I use jquery.
I have an object defined as:
var terms = {};
terms.clear_history = function(a, b)
{ /* DO SOMETHING */ }
I can call the terms.clear_history(1,2) function in my main js file, no problem. But when I try to call it from the "click" of a <a/> element:
$(document).on('click', '#clearterms', function(){
terms.clear_history(1, 2);
});
it gives me the following error:
Uncaught TypeError: Object # has no method 'clear_history'
I understand that I don't understand something fundamental here...
Thank you!
It sounds like a scope issue. Maybe the terms in the global scope the same as the one assigned clear_history given the method.
also, you don't want to name your param as this which is a reserved keyword in JS.
try this:
window.terms = {};
window.terms.clear_history = function(foo,bar){console.log(foo,bar);};
//then later:
$(document).on('click', '#clearterms', function(){
window.terms.clear_history(1, 2);
});

Using javascript functions in a Jquery script

Sorry if this sounds weird but i have tried to create a function that checks a variable before executing the remaining jQuery code, it looks something like this:
$(document).ready(function(){
var myVar = true;
var myFunction = function(){
if (myVar) {
// do something
};
};
$("div").click(function(){
myFunction();
$("div).fadeOut("fast");
});
});
I guess this is not how you implement a function in jQuery so i am a bit lost.
You are missing a double quote in your click handler:
$("div").fadeOut("fast");
$("div).fadeOut("fast");
Syntax error
replace it
$("div").fadeOut("fast");

Javascript closures problem

I have some inherited JS code that uses this format:
function main(param) {
var myVar;
function doSomething() {
...
}
....
doSomething();
....
}
It works, but now I have to control some click events. Something like this:
function main(param) {
var myVar;
function manageEvent(item) {
...
myVar = item.value;
...
}
....
item.onclick = function() { manageEvent(this) }
....
}
The problem is that manageEvent() has no access to myVar and I don't know how to solve the problem without rewriting all the code (really hard work). How can I manage the event in order to give "manageEvent" access to myVar?
It works: http://jsfiddle.net/kgmYM/
Your problem is somewhere else, it certainly is not in this code; it's perfectly fine. Try and see if what you're clicking actually has the same value; try and play with its value and see the result. But anyway, your posted code works, and without any further information, we can't find what's really wrong in your situation.

Categories