This question already has answers here:
Accessing an object property with a dynamically-computed name
(19 answers)
Closed 6 years ago.
I'm animating an svg file, and in order not to bloat my code I have written the follow function:
function animateSingleAtt(svgName, element, attToAnimate, attValue, animationTiming) {
svgName.select( element ).animate({
attToAnimate : attValue
}, animationTiming);
}
All parameters are loaded just fine, except for attToAnimate. I have no clue as to why this is – it is just passed to the svg element as an attribute named 'attToAnimate'.
I have tried logging it outside of the animate-function, and when I do that, it's passed just fine.
Any help will be greatly appreciated!
It looks like you are using attToAnimate as a key on an object. To do this properly, change the code to something like this:
function animateSingleAtt(svgName, element, attToAnimate, attValue, animationTiming) {
var anObject = {};
anObject[attToAnimate] = attValue;
svgName.select( element ).animate(anObject, animationTiming);
}
This should properly build the object you want to pass to .animate
Related
This question already has answers here:
Do DOM tree elements with IDs become global properties?
(5 answers)
Is there a spec that the id of elements should be made global variable?
(5 answers)
Closed 9 months ago.
While coding some js for a webpage, I had initially written a function to parse every div with an id and assign it to a variable for easy targeting:
var div={};
for (let e of Array.from(document.getElementsByTagName('div'))
.filter(div => div.id)) {
div[e.id] = e;
};
But while debugging I suddenly realized that js recognized all these divs "out of the box" and that I could call them directly. For example, if my HTML contains
<div id='status'>
<div id='modtime'></div>
<div id='client'></div>
</div>
Then I can simply do modtime.innerText='abc' – without having to assign modtime via something like div.modtime = document.getElementById('modtime')
Would like to know more about this 'functionality'; cannot find any documentation on it. Not sure what it's called.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
I have the following piece of code in my javascript file(helper.js):
var a = $('li')
$(window).keydown(function(e) {
\\whatever
})
it is supposed to select all tags in my html file and store in in a, however when I use this code, it a is null(which it shouldn't be). when I change my code to:
$(window).keydown(function(e) {
var a = $('li')
\\whatever
})
a is initialized correctly. Does anyone knows why? I am using jquery 3.3.1.
If you are dealing with the DOM (Document Object Model), use $(document).
If you are dealing with how user interact with the window, screen and so on, use $(window)
Here is a link for better understanding window and document
Window vs Dom
This question already has answers here:
Javascript getElementById based on a partial string
(9 answers)
Closed 3 years ago.
I just want to know to how to use custom varible with javascript.suppose we have 5 id with name zawsz,baws2,tawsx,paws4,vawsa and we want to execute single DOM command to all these element whose id is define here.
document.getElementById("-aws-").onclick=function(){}
Here -aws- define all the id define above.(-) can be replace with any char/int value;
You could use the following code:
(The following code will select all elements of which the id includes aws.
I have tested this code and it works: https://jsfiddle.net/5042woqz/)
document.querySelectorAll('*[id*="aws"]').forEach(function(item) {
item.onclick=function() {
console.log('click!');
};
});
Items will now be an array containing all your aws- items.
If you have further questions, just let me know.
P.S.: You could achieve the same thing really easily with jquery.
You can use document.querySelectorAll for this:
document.querySelectorAll('[id^="aws"]')
That will select all elements where the id attribute starts with (^=) "aws".
This question already has answers here:
jQuery Data vs Attr?
(3 answers)
Closed 5 years ago.
In code I do this:
var markerName = $(fileInput).closest('tr.file-input-row').find('input[type="text"]')[0].value.replace(/[^a-z0-9]/gi, '-');
$.data(fileInput, 'for', markerName);
in this case, markerName is "file-1"
If I check using:
$('input[type="file"][data-for="file-1"]')
I get an object with length equal to 0... so not found.
However, if I do:
$('input[type="file"]:first').data().for
in this case, the first input[type="file"] is the same input I set the data attribute for, I get:
"file-1"
...as expected.
It looks like it is being set, but it is then not accessible.
Any thoughts why?
TIA
This is not working because you aren't updating the DOM object when you perform the data-for adjustment in the first part of your code. To update the DOM object you should use attr(key, value).
For more info on the differences between data and attr there is a good answer related to this: jQuery Data vs Attr?
If I check using:
$('input[type="file"][data-for="file-1"]')
Neither .data() nor jQuery.data() is part of the object returned by jQuery() : $() call.
This question already has an answer here:
Passing objects to client in node + express + jade?
(1 answer)
Closed 9 years ago.
When rendering a view with node/express I pass a locals object which holds different information for the view.
else {
res.render('transactions', locals);
}
I got an Array in locals.tags which works perfectly when doing loops in the jade view.
But I can't figure out, how I can use the array within a <script> tag in my view.
script.
(function() {
// some code here ...
$("#transTagsInput").select2({tags: HERESHOULDBEMYARRAY});
})();
I tried with #{locals.tags} but this obviously calls the "toString" method and gives me "[object] Object". When I just use locals.tags the script tag obviously interprets it as normal text. Any other suggestion?
Try !{JSON.stringify(locals.tags)}
!{} is unescaped interpolation.