I'm new to javascript And facing a little issue,
I hope I will get the solution here
I have a nav Item with a data like this
<button data-home="home" class="nav-item"></button>
I did select the button element as a var and got its dataset
var navI = document.querySelector('.nav-item')
var homeC = navI.dataset
And then I wanted to set this item as a class to select a new element
new element,
<div class="home"></div>
And placed the dataset like this to select the element
var pageHome = document.querySelecter('.' + homeC)
But pageHome comes with a null element
Pls pass me a solution if possible
dataset is the entire data set, i.e. the result of all data-* attributes on the element or properties set via the element data API.
You need to reach into it and get the property you need. In short, change
var homeC = navI.dataset
to
var homeC = navI.dataset.home
Also be aware that these days var is not recommended; use let or const.
[EDIT]
Since you know say the home element has the ID "home", not the class "home", you need:
document.querySelector('#'+homeC);
Related
I would like to display some of my data for each item from my list. The problem is that the function is displaying only information about the last item.
Here's how the function looks:
drivers.forEach(addLink);
function addLink(driver, index) {
const nameList = document.getElementById('nameList');
const driverImg = document.getElementById('driverImg');
nameList.href = `?driver=${index}`;
nameList.textContent = driver.name;
driverImg.src = driver.image;
driverImg.height = "45";
list.appendChild(nameList);
list.appendChild(driverImg);
}
It was working when it was creating elements (const nameList = document.createElement('a'); , but I wanted to change that to getElementById
html looks like this:
<nav id="list">
<a id="nameList"></a>
<img id="driverImg">
</nav>
Your function is called addLink but it gets an existing element (with getElementById) and changes it. When you change it multiple times, you end up with the last set of changes you made to it.
If you want to create a link you need createElement.
Since you actually want to add Elements you need to create them like you did before, now you are just getting the same element that allready is on the document and changing it's values (overwrititing the changes from the previous iteration in every iteration)
Hi there I'm fiarly new to coding. and doing some javascipt layouting. but I need to make some variables. and don't know how. I want to make a dropdown menu. for this site. bertconinx.com now in order to do the thing I want to do I need to be albe to select a href without having to change any html. let the browser go to the link and then execute some javascript so what I need to do is find a way how to select the specific a href. I need to select the head menu intem without selecting any submen Items. because they should be dropdowns on a clickevent.
I got as far as this..
a href="http://bertconinx.com/category/portrets/">Portrets</a
a href="http://bertconinx.com/category/weddings/">Weddings</a>
should load first and then should dropdown his submenu clickevents.
but slecting the a href seems trick I've tried.
var MenuEvent = document.getElementsByClassName("menu-item").getElementsByTagName("a");
But it does not work.
Any Ideas on how to select them?
thanks.
The documentNode.getElementsByClassName returns a list of items, so while you can call .getElementsByTagName on each one, you can't call the function on the list directly. What you need to do is something like
// initialize an array to hold the anchors we get, and get all menu items on the document
var firstAnchors = [],
menuItems = document.getElementsByClassName('menu-item');
// iterate through the menu items and their specific anchors, adding only the first one of each menu item to our list
for(var menuItem of menuItems){
firstAnchors.push(menuItem.getElementsByTagName('a')[0]);
}
// now, our anchors should be here
console.log(firstAnchors);
var parentMenus = [],
parentMenueElems = document.getElementById("menu-main-nav").children;
for(var parentMenueElem of parentMenueElems){
if(!parentMenueElem){continue;}
var parentMenue = {
"name": parentMenueElem.firstElementChild.text,
"anchor": parentMenueElem.firstElementChild
};
parentMenus.push(parentMenue);
}
console.log(parentMenus)
OutPut:
[
{"name":"Portrets","anchor":element},
{"name":"Weddings","anchor":element},
{"name":"Wild","anchor":element},
{"name":"Commercial Work","anchor":element},
{"name":"About","anchor":element}
]
Example: element --> Portrets
Now you can perform any event on element
parentMenus[2].anchor.click();
So I have multiple of a particular tag. For example, we'll go for 100 of them as I'm trying to get clear examples not specific to my application but that I could apply to other uses if needed.
So maybe we have 100 divs, all with ordered ids in such a fashion:
<div id = '1'></div>
<div id = '2'></div>
.
.
.
<div id = '99'></div>
<div id = '100'></div>
Given a starting value, maybe I want to select the one 6 spaces before it and change its class or style. So something like:
var id = $(this).attr('id');
var new = id-6;
$('#new').addClass('');//line
That line is what I want to figure out. I essentially want to pass that calculated value as the id to be searched for in a jQuery selector. Can this be done?
You're soo close..one small change
var id = $(this).attr('id');
var new = id-6;
$('#'+new).addClass('');//line
The jQuery object will parse strings, so passing in '#'+new will work.
I'm trying to add a search link to an online form with a userscript using jQuery. I don't work too much in firefox and I feel like things that would normally work in chrome don't in ff 9/10 times for me. But anyway... this needs to be with ff.
I'm taking the text from a <p> element and creating a search url out of it (or trying to). Right now this is the function I'm trying that should be doing it... but it's doing nothing, not even any errors in console
$(function() {
var companyName = $('p')[7]; // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var mixRankUrl = $("<a></a>").innerHTML("Search Mixrank"); // Create an <a> element
mixRankUrl.href = 'https://mixrank.com/appstore/sdks?search=' + companyText; // Define the href of the a element
var sdkPara = $('label.control-label')[10]; // Where I want it to go
sdkPara.append(mixRankUrl); // Append the element
});
Also, whoever wrote the html uses hardly any ids, and most classes are assigned to 10 or more elements... so unless there's a better way, I'm sort of stuck using node selectors (which stay the same form to form).
The problem is that you try to use jQuery method on DOM element. Don't understand why you don't have any errors with your code.
For exemple : $('p')[7] return a DOM element while $('p').eq(7) return a JQuery object. So you can't use a jQuery method like text() on your DOM element. You need to deal with jQuery object.
For the same reason, you had a problem with the declaration of your label object and with the modification of the href attribute of your link.
Try like this :
$(function() {
var companyName = $('p').eq(7); // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var sdkPara = $('label.control-label').eq(10); // Where I want it to go
var mixRankUrl = $('<a>',{
text: 'Search Mixrank',
href: 'https://mixrank.com/appstore/sdks?search=' + companyText
}).appendTo(sdkPara); // Append the element
});
I am trying to add the ajax response text, to a div that has a class on it, and not an id. I try the following:
var notice = $$('.testdiv');
Element.update(notice, transport.responseText)
This doesn't work but if I change it to update an element that has an ID on it, it works.
var notice = $('testdiv');
Element.update(notice, transport.responseText)
This is because $$('.testdiv') is returning an array. Try this:
Element.update(notice[0], transport.responseText)