This is original code:
h1tag= document.getElementById("myHeading");
h1tag.addEventListener("mouseover", ()=>{h1tag.style.backgroundColor="blue"});
After combining:
h1tag= document.getElementById("myHeading").addEventListener("mouseover", ()=>{h1tag.style.backgroundColor="blue"});
What is the reason behind this?
The problem with this line :
h1tag= document.getElementById("myHeading").addEventListener("mouseover", ()=>{h1tag.style.backgroundColor="blue"});
Is that the statement is evaluated from left to right, so the last method that will be called is addEventListener, so in other words you are trying to store the returned result from addEventListener in your h1tag variable while addEventListener doesn't have a return type so it will return undefined.
To expand on the previous answers, the key issue here is that h1tag is not defined (because addEventListener doesn't return a value) and you are trying to change it's properties.
Fortunately, javascript provides a way to access the element that an event is called on, through an argument passed to the event function.
Try running
document.getElementsById("myHeading")
.addEventListener("mouseover", (e)=>{e.target.style.backgroundColor = "blue"})
h1tag is not defined in your second attempt.
document.getElementById("myHeading").addEventListener("mouseover", (e)=>{e.currentTarget.style.backgroundColor="blue"});
if you still want to kep a reference to the element:
(h1tag=document.getElementById("myHeading")).addEventListener("mouseover", (e)=>{e.currentTarget.style.backgroundColor="blue"});
I updated a property of Controller and attempted to use it in a console.log(). In the HTML page I see the updated value of the property, but console.log() still shows me the old value. What did I do wrong? How to get the new value in console.log()?
Details are in http://emberjs.jsbin.com/AHiVeGe/3/edit
First, you have to use 'get' on a property. Instead of:
console.log(this.controllerFor('index').latitude);
write
console.log(this.controllerFor('index').get('latitude'));
Second, navigator.geolocation.getCurrentPosition runs asynchronously and returns immediately, so your console.log is running before latitude is set, but after it returns.
Third, the model hook runs before the controller is set up.
Fourth, the model has to be an object.
I wasn't quite sure what you wanted to do, but in http://emberjs.jsbin.com/AHiVeGe/6/edit I change a property on the model after the latitude is set and console.log it.
In ASP.NET we are calling defined js-functions with the:
Page.ClientScript.RegisterStartupScript(GetType(), "", "JSFuncNameHere();", true);
I wonder:
Why there isn't any method, which has a name like: Page.ClientScript.CallJSScript("someJSFunc");
Why does the upper-method require the reflection method GetType() ? Something isn't defined at runtime, is it?
Why do I need the 2nd argument key? As I have tested, I can left it empty and the existed JS-function shall be called.
Why there isn't any method, which has a name like: Page.ClientScript.CallJSScript("someJSFunc");
Probably because this is more generic solution, since by just adding 2 characters you get the same result and if you need you can add arguments and anything else.
Why does the upper-method require the reflection method GetType() ? Something isn't defined at runtime, is it?
Why do I need the 2nd argument key? As I have tested, I can left it empty and the existed JS-function shall be called.
For both of these the same reason - the method will detect if you run the same script multiple times and in such case, call it just once. The two arguments are the means how it identifies duplicates - a key is not sufficient since another class in a different library might be using the same key - so you need to pass in the type of your own class to ensure that the script is executed when you want it to.
I'm using jQuery for a dynamic content behavior on a website. I've got an error:
TypeError: $("#id").attr("src",
thisContent.attr("data-attr")).show is not a function
Firstly I thought that it was browser related, but it turns out that it isn't. The error is on this line:
$('#id').attr('src', thisContent.attr('data-attr')).show();
If the second argument of .attr() is undefined the getter will be invoked.
Seems like the getter is invoked instead of the setter.
Getter:
$(...).attr(String) // returns String which has no method .show()
Setter:
$(...).attr(String, String) // returns jQuery object, which has method .show()
thisContent.attr('data-attr') might return undefined in some cases, and therefor the getter gets invoked instead of the desired setter method.
Try the following.
Rename your data-attr to something else.
see if data-attr exists inside thisContect.attr.
Log the following line and go to the Console. There you will see the data-attr does not exist or is at the wrong place.
console.log(thisContent);
Random question, but to be sure...
Are you accessing jQuery via their CDN?
If you are, do both machines load the jQuery code in ok? Both can see the CDN with no issues (both connected to the internet)? and other bits of jQuery code are working?
It's very rare that a browser would have a difference in the way it renders/handles JS as it is such a well established language. So my suggestion is, rather than being a browser based issue, it's something outside of your code.
Just an idea..
In a Django template, I have a function
function show_graph(i){
$("#"+i+"seegraph").click(function(){
$("#"+i+"graph").show();
var qaa = {{ question_ids }};
var qid = qaa[i-1];
jQuery.ajax({
url: "/canvas/recreatechart/",
type: "get",
data: {qid: qid },
success: function(response){
var resp = jQuery.parseJSON(response);
alert("chart1"+i);
show_graph("chart1"+i, resp['chart_type'], resp['series_names'], JSON.stringify(resp['data1']), resp['answer'], resp['stories1'], resp['colors'], resp['stacked'], resp['title1']);
show_graph(resp['second_graph']+i,resp['chart_type'], resp['series_names'], resp['data2'], resp['answer'], resp['stories2'], resp['colors'], resp['stacked'], resp['title2']);
}
});
});
}
and an alert immediately inside show_graph, from which I've deduced that show_graph just isn't getting called, but I don't know why.
I don't have any errors in my console, when I tried alerting each argument in the first call one by one, they all showed up as expected, although "data1" showed up as "object Object" with a type of "object" (When I stringified data1, it came out as expected, although I don't know if that means anything).
Note that data1 is an array of dictionaries, the values of which are arrays of arrays. So, slightly complicated, and I'm not sure if js can parse the structure.
Is that why my function is not getting called? If not, what is it? If so, how do I fix it (given that this is the format I have to pass my data in). How can I find the problem?
EDIT: I would also like to note that I just tested something simple like [5] in place of data1, as that's what I was afraid was messing up the function call, but I'm still not getting the alert from show_graph, so I think that's not it after all.
You're already inside of a function called show_graph. Instead of calling the function you want, it's calling itself, and adding another click action to...a jquery selector that doesn't match anything. So rename your inner function and everything should work.
Do you have more than one function called show_graph()? Is the intention for the function to call itself from within the ajax success callback?
The function you posted has one parameter, i:
function show_graph(i){ ... }
Within the function you seem to be treating i as a number, e.g., at the point where you say qaa[i-1]. But then within your ajax call your success callback calls show_graph like this:
show_graph("chart1"+i, resp['chart_type'], resp['series_names'], JSON.stringify(resp['data1']), resp['answer'], resp['stories1'], resp['colors'], resp['stacked'], resp['title1']);
I don't know if you intended for it to call itself, but you're not passing in a single numeric parameter, you're passing in lots of parameters. (Of course JavaScript lets you do that if you use the arguments object, but in your case you're passing a string as the first argument but as I said above the function treats it as a number.)
A few thoughts...
Your function show_graph(i) is expecting a single argument. In the way you're using it in your selectors (like $("#"+i+"seegraph")), we can assume that the i refers to a string or a number. Later, you're sending show_graph a list to use in place of i, by calling:
show_graph("chart1"+i, resp['chart_type'], resp['series_names'], JSON.stringify(resp['data1']), resp['answer'], resp['stories1'], resp['colors'], resp['stacked'], resp['title1']);
It sounds like you might have another function somewhere that needs to show a graph (perhaps a 2nd show_graph, while this function creates the graph?
Perhaps your Ajax is failing (for one of many possible reasons) and so it isn't calling the success callback? Try adding an error: callback to see if it is called.
As for the [object Object] bit, that is a side effect of alert-ing objects. alert() converts its arguments to strings and the default Object toString method returns that "[object Object]". Use console.log (or directly inspect values in the debugger) to avoid this problem.
I think the problems is, show_graph attaches a click event to an element
When the click event happens, the callback for click is called, which performs an ajax call.
In successful ajax call, you call show_graph again, expecting it to fully execute, but doesn't. It just attaches another click event listener (considering an element is found)
So, your show_graph shouldn't bind the click event.