How do you access a list element without assigning a class/id to it?
0
I'm trying to change the color of a link in a <li> element without assigning an id to it on a certain page of my website.
So far I've had no luck. I've tried the following:
function writeNav() {
document.write('<link rel="stylesheet" href="css/navbar.css"> <ul id="nav"> <li> <a href="/">Home</a> </li> <li> <a href="#">Interests</a> </li> <li> <a href="#">Gaming</a> <li> <a href="/Resume.pdf">Resume</a> </li> </ul>');
if (window.location.href == "mywebsite.com/anime.html") {
document.getElementByTagName("li")[0].style.color="#FFE4E1";
}
}
and
document.getElementById("nav").a.style.color = "#FFE4E1";
I've done quite a bit of looking around but with not luck.
javascript html-lists
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
add a comment |
0
I'm trying to change the color of a link in a <li> element without assigning an id to it on a certain page of my website.
So far I've had no luck. I've tried the following:
function writeNav() {
document.write('<link rel="stylesheet" href="css/navbar.css"> <ul id="nav"> <li> <a href="/">Home</a> </li> <li> <a href="#">Interests</a> </li> <li> <a href="#">Gaming</a> <li> <a href="/Resume.pdf">Resume</a> </li> </ul>');
if (window.location.href == "mywebsite.com/anime.html") {
document.getElementByTagName("li")[0].style.color="#FFE4E1";
}
}
and
document.getElementById("nav").a.style.color = "#FFE4E1";
I've done quite a bit of looking around but with not luck.
javascript html-lists
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
Use.getElement**s**ByTagName(...)instead (note the s)
– Randy Casburn
Nov 20 '18 at 1:24
@RandyCasburn hmm that doesn't seem to have done the trick.
– MZ4Code
Nov 20 '18 at 1:28
1
document.querySelector("#nav>li>a")
– Niet the Dark Absol
Nov 20 '18 at 1:30
I just tested it. Your code works fine withgetElementsByTagName. I had to comment out theif()statement and the css filehref, but it works fine. You don't expect to change the link colors do you? Look at the bullet - it will show the new color. The link colors are set by CSS psuedo classes you must override.
– Randy Casburn
Nov 20 '18 at 1:35
@NiettheDarkAbsol 's answer is the closest I get. Only the first<li>changes color. I'll keep digging around.
– MZ4Code
Nov 20 '18 at 1:42
add a comment |
0
0
0
I'm trying to change the color of a link in a <li> element without assigning an id to it on a certain page of my website.
So far I've had no luck. I've tried the following:
function writeNav() {
document.write('<link rel="stylesheet" href="css/navbar.css"> <ul id="nav"> <li> <a href="/">Home</a> </li> <li> <a href="#">Interests</a> </li> <li> <a href="#">Gaming</a> <li> <a href="/Resume.pdf">Resume</a> </li> </ul>');
if (window.location.href == "mywebsite.com/anime.html") {
document.getElementByTagName("li")[0].style.color="#FFE4E1";
}
}
and
document.getElementById("nav").a.style.color = "#FFE4E1";
I've done quite a bit of looking around but with not luck.
javascript html-lists
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
I'm trying to change the color of a link in a <li> element without assigning an id to it on a certain page of my website.
So far I've had no luck. I've tried the following:
function writeNav() {
document.write('<link rel="stylesheet" href="css/navbar.css"> <ul id="nav"> <li> <a href="/">Home</a> </li> <li> <a href="#">Interests</a> </li> <li> <a href="#">Gaming</a> <li> <a href="/Resume.pdf">Resume</a> </li> </ul>');
if (window.location.href == "mywebsite.com/anime.html") {
document.getElementByTagName("li")[0].style.color="#FFE4E1";
}
}
and
document.getElementById("nav").a.style.color = "#FFE4E1";
I've done quite a bit of looking around but with not luck.
javascript html-lists
javascript html-lists
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
edited Nov 20 '18 at 2:16
Yona Appletree
3,58052635
3,58052635
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
asked Nov 20 '18 at 1:23
MZ4CodeMZ4Code
767
767
Use.getElement**s**ByTagName(...)instead (note the s)
– Randy Casburn
Nov 20 '18 at 1:24
@RandyCasburn hmm that doesn't seem to have done the trick.
– MZ4Code
Nov 20 '18 at 1:28
1
document.querySelector("#nav>li>a")
– Niet the Dark Absol
Nov 20 '18 at 1:30
I just tested it. Your code works fine withgetElementsByTagName. I had to comment out theif()statement and the css filehref, but it works fine. You don't expect to change the link colors do you? Look at the bullet - it will show the new color. The link colors are set by CSS psuedo classes you must override.
– Randy Casburn
Nov 20 '18 at 1:35
@NiettheDarkAbsol 's answer is the closest I get. Only the first<li>changes color. I'll keep digging around.
– MZ4Code
Nov 20 '18 at 1:42
add a comment |
Use.getElement**s**ByTagName(...)instead (note the s)
– Randy Casburn
Nov 20 '18 at 1:24
@RandyCasburn hmm that doesn't seem to have done the trick.
– MZ4Code
Nov 20 '18 at 1:28
1
document.querySelector("#nav>li>a")
– Niet the Dark Absol
Nov 20 '18 at 1:30
I just tested it. Your code works fine withgetElementsByTagName. I had to comment out theif()statement and the css filehref, but it works fine. You don't expect to change the link colors do you? Look at the bullet - it will show the new color. The link colors are set by CSS psuedo classes you must override.
– Randy Casburn
Nov 20 '18 at 1:35
@NiettheDarkAbsol 's answer is the closest I get. Only the first<li>changes color. I'll keep digging around.
– MZ4Code
Nov 20 '18 at 1:42
Use
.getElement**s**ByTagName(...) instead (note the s)– Randy Casburn
Nov 20 '18 at 1:24
Use
.getElement**s**ByTagName(...) instead (note the s)– Randy Casburn
Nov 20 '18 at 1:24
@RandyCasburn hmm that doesn't seem to have done the trick.
– MZ4Code
Nov 20 '18 at 1:28
@RandyCasburn hmm that doesn't seem to have done the trick.
– MZ4Code
Nov 20 '18 at 1:28
1
1
document.querySelector("#nav>li>a")– Niet the Dark Absol
Nov 20 '18 at 1:30
document.querySelector("#nav>li>a")– Niet the Dark Absol
Nov 20 '18 at 1:30
I just tested it. Your code works fine with
getElementsByTagName. I had to comment out the if() statement and the css file href, but it works fine. You don't expect to change the link colors do you? Look at the bullet - it will show the new color. The link colors are set by CSS psuedo classes you must override.– Randy Casburn
Nov 20 '18 at 1:35
I just tested it. Your code works fine with
getElementsByTagName. I had to comment out the if() statement and the css file href, but it works fine. You don't expect to change the link colors do you? Look at the bullet - it will show the new color. The link colors are set by CSS psuedo classes you must override.– Randy Casburn
Nov 20 '18 at 1:35
@NiettheDarkAbsol 's answer is the closest I get. Only the first
<li> changes color. I'll keep digging around.– MZ4Code
Nov 20 '18 at 1:42
@NiettheDarkAbsol 's answer is the closest I get. Only the first
<li> changes color. I'll keep digging around.– MZ4Code
Nov 20 '18 at 1:42
add a comment |
1 Answer
1
active
oldest
votes
0
OK so going off of @Niet's answer I was able to achieve this using
document.querySelectorAll("#nav>li>a");
The full solution for anyone wondering is as follows:
var list = document.querySelectorAll("#nav>li a");
for(var i=0; i<list.length; i++) {
list[i].style.color = "black";
}
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
Good job solving it, and thanks for posting an answer for others to see. I edited your answer to includevarbefore your loop variable, as otherwise you may be modifying a global variable.
– Yona Appletree
Nov 20 '18 at 2:22
Futhermore, you may want to consider using modern language features:constandfor..ofloops, in this case, like so:for (const elem of document.querySelectorAll("#nav>li a")) elem.style.color = "black";
– Yona Appletree
Nov 20 '18 at 2:23
@YonaAppletree I will definitely look into it. I'm still new to JS as a hobbyist :) upvote maybe? :P
– MZ4Code
Nov 20 '18 at 2:25
Totally. And really, for this type of thing, you probably just want to use CSS. Make a class on your #nav, for example, that sets the color of the links to black.#nav.darkLinks > li > a { color: black; }for example
– Yona Appletree
Nov 20 '18 at 2:26
And welcome to hobby! I've been at it for >20 years and still find joy in this quirky language.
– Yona Appletree
Nov 20 '18 at 2:27
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384928%2fhow-do-you-access-a-list-element-without-assigning-a-class-id-to-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
OK so going off of @Niet's answer I was able to achieve this using
document.querySelectorAll("#nav>li>a");
The full solution for anyone wondering is as follows:
var list = document.querySelectorAll("#nav>li a");
for(var i=0; i<list.length; i++) {
list[i].style.color = "black";
}
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
Good job solving it, and thanks for posting an answer for others to see. I edited your answer to includevarbefore your loop variable, as otherwise you may be modifying a global variable.
– Yona Appletree
Nov 20 '18 at 2:22
Futhermore, you may want to consider using modern language features:constandfor..ofloops, in this case, like so:for (const elem of document.querySelectorAll("#nav>li a")) elem.style.color = "black";
– Yona Appletree
Nov 20 '18 at 2:23
@YonaAppletree I will definitely look into it. I'm still new to JS as a hobbyist :) upvote maybe? :P
– MZ4Code
Nov 20 '18 at 2:25
Totally. And really, for this type of thing, you probably just want to use CSS. Make a class on your #nav, for example, that sets the color of the links to black.#nav.darkLinks > li > a { color: black; }for example
– Yona Appletree
Nov 20 '18 at 2:26
And welcome to hobby! I've been at it for >20 years and still find joy in this quirky language.
– Yona Appletree
Nov 20 '18 at 2:27
add a comment |
0
OK so going off of @Niet's answer I was able to achieve this using
document.querySelectorAll("#nav>li>a");
The full solution for anyone wondering is as follows:
var list = document.querySelectorAll("#nav>li a");
for(var i=0; i<list.length; i++) {
list[i].style.color = "black";
}
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
Good job solving it, and thanks for posting an answer for others to see. I edited your answer to includevarbefore your loop variable, as otherwise you may be modifying a global variable.
– Yona Appletree
Nov 20 '18 at 2:22
Futhermore, you may want to consider using modern language features:constandfor..ofloops, in this case, like so:for (const elem of document.querySelectorAll("#nav>li a")) elem.style.color = "black";
– Yona Appletree
Nov 20 '18 at 2:23
@YonaAppletree I will definitely look into it. I'm still new to JS as a hobbyist :) upvote maybe? :P
– MZ4Code
Nov 20 '18 at 2:25
Totally. And really, for this type of thing, you probably just want to use CSS. Make a class on your #nav, for example, that sets the color of the links to black.#nav.darkLinks > li > a { color: black; }for example
– Yona Appletree
Nov 20 '18 at 2:26
And welcome to hobby! I've been at it for >20 years and still find joy in this quirky language.
– Yona Appletree
Nov 20 '18 at 2:27
add a comment |
0
0
0
OK so going off of @Niet's answer I was able to achieve this using
document.querySelectorAll("#nav>li>a");
The full solution for anyone wondering is as follows:
var list = document.querySelectorAll("#nav>li a");
for(var i=0; i<list.length; i++) {
list[i].style.color = "black";
}
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
OK so going off of @Niet's answer I was able to achieve this using
document.querySelectorAll("#nav>li>a");
The full solution for anyone wondering is as follows:
var list = document.querySelectorAll("#nav>li a");
for(var i=0; i<list.length; i++) {
list[i].style.color = "black";
}
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
edited Nov 20 '18 at 2:21
Yona Appletree
3,58052635
3,58052635
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
answered Nov 20 '18 at 2:04
MZ4CodeMZ4Code
767
767
Good job solving it, and thanks for posting an answer for others to see. I edited your answer to includevarbefore your loop variable, as otherwise you may be modifying a global variable.
– Yona Appletree
Nov 20 '18 at 2:22
Futhermore, you may want to consider using modern language features:constandfor..ofloops, in this case, like so:for (const elem of document.querySelectorAll("#nav>li a")) elem.style.color = "black";
– Yona Appletree
Nov 20 '18 at 2:23
@YonaAppletree I will definitely look into it. I'm still new to JS as a hobbyist :) upvote maybe? :P
– MZ4Code
Nov 20 '18 at 2:25
Totally. And really, for this type of thing, you probably just want to use CSS. Make a class on your #nav, for example, that sets the color of the links to black.#nav.darkLinks > li > a { color: black; }for example
– Yona Appletree
Nov 20 '18 at 2:26
And welcome to hobby! I've been at it for >20 years and still find joy in this quirky language.
– Yona Appletree
Nov 20 '18 at 2:27
add a comment |
Good job solving it, and thanks for posting an answer for others to see. I edited your answer to includevarbefore your loop variable, as otherwise you may be modifying a global variable.
– Yona Appletree
Nov 20 '18 at 2:22
Futhermore, you may want to consider using modern language features:constandfor..ofloops, in this case, like so:for (const elem of document.querySelectorAll("#nav>li a")) elem.style.color = "black";
– Yona Appletree
Nov 20 '18 at 2:23
@YonaAppletree I will definitely look into it. I'm still new to JS as a hobbyist :) upvote maybe? :P
– MZ4Code
Nov 20 '18 at 2:25
Totally. And really, for this type of thing, you probably just want to use CSS. Make a class on your #nav, for example, that sets the color of the links to black.#nav.darkLinks > li > a { color: black; }for example
– Yona Appletree
Nov 20 '18 at 2:26
And welcome to hobby! I've been at it for >20 years and still find joy in this quirky language.
– Yona Appletree
Nov 20 '18 at 2:27
Good job solving it, and thanks for posting an answer for others to see. I edited your answer to include
var before your loop variable, as otherwise you may be modifying a global variable.– Yona Appletree
Nov 20 '18 at 2:22
Good job solving it, and thanks for posting an answer for others to see. I edited your answer to include
var before your loop variable, as otherwise you may be modifying a global variable.– Yona Appletree
Nov 20 '18 at 2:22
Futhermore, you may want to consider using modern language features:
const and for..of loops, in this case, like so: for (const elem of document.querySelectorAll("#nav>li a")) elem.style.color = "black";– Yona Appletree
Nov 20 '18 at 2:23
Futhermore, you may want to consider using modern language features:
const and for..of loops, in this case, like so: for (const elem of document.querySelectorAll("#nav>li a")) elem.style.color = "black";– Yona Appletree
Nov 20 '18 at 2:23
@YonaAppletree I will definitely look into it. I'm still new to JS as a hobbyist :) upvote maybe? :P
– MZ4Code
Nov 20 '18 at 2:25
@YonaAppletree I will definitely look into it. I'm still new to JS as a hobbyist :) upvote maybe? :P
– MZ4Code
Nov 20 '18 at 2:25
Totally. And really, for this type of thing, you probably just want to use CSS. Make a class on your #nav, for example, that sets the color of the links to black.
#nav.darkLinks > li > a { color: black; } for example– Yona Appletree
Nov 20 '18 at 2:26
Totally. And really, for this type of thing, you probably just want to use CSS. Make a class on your #nav, for example, that sets the color of the links to black.
#nav.darkLinks > li > a { color: black; } for example– Yona Appletree
Nov 20 '18 at 2:26
And welcome to hobby! I've been at it for >20 years and still find joy in this quirky language.
– Yona Appletree
Nov 20 '18 at 2:27
And welcome to hobby! I've been at it for >20 years and still find joy in this quirky language.
– Yona Appletree
Nov 20 '18 at 2:27
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384928%2fhow-do-you-access-a-list-element-without-assigning-a-class-id-to-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Use
.getElement**s**ByTagName(...)instead (note the s)– Randy Casburn
Nov 20 '18 at 1:24
@RandyCasburn hmm that doesn't seem to have done the trick.
– MZ4Code
Nov 20 '18 at 1:28
1
document.querySelector("#nav>li>a")– Niet the Dark Absol
Nov 20 '18 at 1:30
I just tested it. Your code works fine with
getElementsByTagName. I had to comment out theif()statement and the css filehref, but it works fine. You don't expect to change the link colors do you? Look at the bullet - it will show the new color. The link colors are set by CSS psuedo classes you must override.– Randy Casburn
Nov 20 '18 at 1:35
@NiettheDarkAbsol 's answer is the closest I get. Only the first
<li>changes color. I'll keep digging around.– MZ4Code
Nov 20 '18 at 1:42