Set attribute to a child element - javascript

I am trying to set an id attribute "gradient" to child element of the main one, which is grabbed by its id of "bg-gradient" , with below code, seems simple but its not working. Code is below, and the id "bg-gradient" is the only one in the document. It should set an id of "gradient" to the next div class "bg-gradient" when click the edit button but doesn't.
editSwatch() {
let elem = document.getElementById('#bg-gradient');
elem.childElement.setAttribute("id","gradient");
}
Any tips welcome.
Thanks

There is no childElement property for the DOM element instead use firstElementChild property to get the first child. In addition to that remove # from the argument since getElementById requires an id value and not a CSS selector.
editSwatch() {
let elem = document.getElementById('bg-gradient');
elem.firstElementChild.setAttribute("id", "gradient");
}
Or alternately you can use querySelector method to get the element.
editSwatch() {
document.querySelector('#bg-gradient > .bg-gradient').setAttribute("id", "gradient");
}

change
let elem = document.getElementById('#bg-gradient'); to
let elem = document.getElementById('bg-gradient');
and change
elem.childElement.setAttribute("id","gradient"); to
elem.firstElementChild.setAttribute("id","gradient");
dont put #. It is used by jquery like $("#bg-gradient")

Related

how to get the href value of a div using javascript

when i input the command
document.getElementsByClassName('grid')[5] :
i get this :TEST
HOwever i struggle finding how to get the href value (a link here), i have thought about using GetAttribute but it does no work
That's because you're selecting the <div> parent instead of <a>, div's doesn't have href attribute.
You can get the href by doing:
const $parentDiv = document.querySelectorAll('.grid')[5];
const $anchor = $parentDiv.querySelector('a');
console.log($anchor.href);
You can use children property to get the tag, and get the href thereafter
There are 2 ways how you can do that
1 -
You can add an id attribute to the <a> tag and then use document.getElementById("yourid").getAttribute("href");
2 =
As mentioned by Eliabe Franca -
const $parentDiv = document.querySelectorAll('.grid')[5];
const $anchor = $parentDiv.querySelector('a');
console.log($anchor.href);
What this does is that it first gets the .grid[5] element and then gets the first <a> in it. The last line will help you get the href value.

JS es6 on click add class to another element

I'm trying to show a div when another button has been clicked.
Unfortunately the site i'm using doesn't use jquery but has babel.js installed.
This is the HTML of the button the user is clicking
<button id="ba-Calculate" class="button">Calculate</button>
And this is the HTML for the button I would like to display
<button class="js-find-a-mortgage button u-margin-top-small" style="display: none;">Find a mortgage</button>
I've added a style of display none to hide the element.
This is what i've come up with so far.
var el = document.querySelector('#ba-Calculate');
el.onclick = function() {
document.getElementsByClassName('js-find-a-mortgage').style.display = 'block';
}
Any suggestions or where to read up on how I can crack this would be great.
I appreciate the feedback, thank you.
document.getElementsByClassName returns an array. So, you need to fetch the first element (I believe you have only one element with that class in the DOM) and add the style.
Try using
document.getElementsByClassName('js-find-a-mortgage')[0].style.display = 'block';
var trigger = document.querySelector('#ba-calculate')
var el = document.querySelector('.js-find-a-mortgate')
trigger.addEventListener('click', function () {
el.style.display = 'block'
})
getElementsByClassName returns an array like object
The getElementsByClassName method of Document interface returns an
array-like object of all child elements which have all of the given
class names. When called on the document object, the complete document
is searched, including the root node. You may also call
getElementsByClassName() on any element; it will return only elements
which are descendants of the specified root element with the given
class names.
Using querySelector will grab the first instance of a node matching that class name. You can then use the code you already had.
If you want to add class, I assume you need to use classList method add:
For example to add for your element class 'hidden':
document.getElementsByClassName('js-find-a-mortgage')[0].classList.add('hidden');
To see all classes use: document.getElementsByClassName('js-find-a-mortgage')[0].classList
https://www.w3schools.com/jsref/prop_element_classlist.asp

Select all the elements within an element having an attribute set to a specific value

I have the followings defined :
var excludedFiltersPanel = $("#excludedFiltersPanel");
var includedfiltersPanel = $("#includedfiltersPanel");
where *Panel is just a div.
in excludedFiltersPanel there are some div's with attribute data-iscorefilter="true" e.g. :
<div id="filterPanel-LastName" class="filterPanel" data-iscorefilter="true">
<Some Stuff here!>
</div>
I am trying to get them and move them to includedfiltersPanel:
It seems neither of these is a correct syntax:
excludedFiltersPanel.('[data-iscorefilter="true"]')
excludedFiltersPanel.$('[data-iscorefilter="true"]')
1.What is the correct syntax?
2.How do I append them to includedfiltersPanel? (I know how to append a single item, but not sure what is the common good practice here, e.g. using for loop or some JQuery magic)
Since excludedFiltersPanel there are some div's with attribute data-iscorefilter="true"
Use .find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
It would look like :
excludedFiltersPanel.find('[data-iscorefilter="true"]')

Hide div based on value of attribute?

I'm looking to change the class (hide) of certain div's dependent on their attribute values.Here's my code, it might make a bit more sense once you've seen this:
jQuery('#menu1').click(function() {
jQuery([.attr('imageref')]!=[.attr('menuref')]).removeClass('pics').addClass('.pics-hidden').removeClass('pics').fadeOut(200);
jQuery('#projectimages').masonry('reload');
});
So what I'm after is that if you click on #menu1 it will remove .pics with the same imageref attribute as the #menu1 atrribute menuref.
So clicking on #menu1 which has menuref equal to 1, will hide the relevant .pics with an imageref also equal to 1.Hopefully that makes sense, any help would be greatly appreciated!
You can use the css selectors to make this.
ie:
jQuery('#menu1').click(function()
{
jQuery('[imgeref="menuref"]').removeClass('pics').addClass('pics-hidden');
});
edit:
this will search all the elements wich his atribute 'imageref' is set to 'menuref' and then remove the class pics and add the class pics-hidden.
if it's only necesary to img tags. then you could change:
jQuery('[imgeref="menuref"]')
to
jQuery('img[imgeref="menuref"]')
You might use the jQuery filter function.
http://api.jquery.com/filter/
Description: Reduce the set of matched elements to those that match the selector or pass the function's test.
var menuref = ("#menu1").attr('menuref')
// Get all pics with an imageref attribute
jQuery(".pics[imageref]")
// Filter them
.filter(function(){
return $(this).attr('imageref') != menuref;
})
// Do what ever you want e.g. remove the pics class
.removeClass('pics')
You use the attribute-equals selector, and concatenate into the selector the value of the menuref attribute.
jQuery('#menu1').click(function() {
var menu = $(this).attr('menuref');
jQuery(".pics[imageref='" + menu + "']").toggleClass('pics pics-hidden')
.fadeOut(200);
jQuery('#projectimages').masonry('reload');
});

How to get attributes of container in jquery?

How can I get attributes values from an container using jquery ?
For example:
I have container div as:
<div id = "zone-2fPromotion-2f" class = "promotion">
here how can I get attribute id value using jquery and than how can I trim the value to get component information ?
update : how can i get attribute values ?
UPDATE: If I have multiple components on page with same div information than how would I know what attribute value is for which component ?
Thanks.
First, that seems to be a ridiculously long ID -- I'm sure it could be made much shorter while still retaining its uniqueness.
Anyway, on to the answer: First you need a way of accessing your "container" div. Typically, one might use a class or ID to get an element. For example, you could "select" this div with the following call to jQuery:
var container = jQuery('#zone-3a...'); // Fill in ... with really long ID
But, since you're asking how to retrieve the ID, I'm presuming that selecting it via the ID is not an option. You could also select it using the class, although it's not guarenteed to be the only element on the page with that class:
var container = jQuery('.promotion');
There are other ways to narrow down the search, such as:
jQuery('div.promotion');
jQuery('div.promotion:first');
Once you have a reference to your "container", you can retrieve the ID like so:
container.attr('id'); // => zone-3a...
// or:
container[0].id; // => zone-3a...
So assuming your div looks like this.
<div id="foo"/>
You could get the ID attribute by using the attr method.
$("div").attr("id);
That assumes that you only have one div on the page. Not really sure what component information you are looking to get?
You read node attributes with the attr() method.
var id = $( '.promotion' ).attr( 'id' );
In terms of parsing that ID for any other arbitrary information, I can't say since it looks like you're using some sort of proprietary format of which I have no knowledge.
loop thru and get all divs with the class promotion and get the id of each...
$('div.promotion').each(function(){
var attr = $(this).attr('id'); // or whatever attribute
});
or single
var myDivClass = $('zone-3a-2f-2f-2fPortal-2fPages-2fHome-2fZones-2fLeft-2f-7ccomponent-3a-2f-2f-2fSpm-2fComponents-2fPromotion-2f').attr('class');
or another single
var myDivID = $('.promotion').attr('id');

Categories