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
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.
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...
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);
});
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");
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.