/    Sign up×
Community /Pin to ProfileBookmark

Rewrite old Javascript to “modern” Javascript

This is no problem, but I am curious how I can rewrite this

“`
(function() {
var anchors = document.querySelectorAll(‘.subnav a’),
current = window.location.href;

for (var i = 0; i < anchors.length; i++) {
if (current.indexOf(anchors[i].href) != -1) {
anchors[i].classList.add(“active”);
}
}
})();
“`

To something with “forEach” instead (like this pseudocode):

“`
(function() {
var anchors = document.querySelectorAll(‘.subnav a’),
current = window.location.href;

forEach(anchors.href) {
if (current.indexOf(anchors.href)) {
anchors.classList.add(“active”);
}
}
})();
“`

Of course the above code is wrong, but I am trying to understand Javascript, so all input is welcome.

BTW, the search function in https://www.webdeveloper.com does not work…

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumFeb 13.2020 — That's easy:
(function() {
const anchors = document.querySelectorAll('.subnav a'),
current = window.location.href;

anchors.forEach(anchor) {
if (current.indexOf(anchor.href)) {
anchor.classList.add("active");
}
}
})();
(not tested)
Copy linkTweet thisAlerts:
@KeverFeb 13.2020 — You made a mistake.
<i>
</i>(function() {
const anchors = document.querySelectorAll('.subnav a'),
current = window.location.href;

anchors.forEach(function(anchor) {
if (current.indexOf(anchor.href)) {
anchor.classList.add("active");
}
});
})();
Copy linkTweet thisAlerts:
@SempervivumFeb 13.2020 — @Kever#1614629 Correct, thanks for this hint.
Copy linkTweet thisAlerts:
@SempervivumFeb 13.2020 — ... or, more modern:
(function() {
const anchors = document.querySelectorAll('.subnav a'),
current = window.location.href;

anchors.forEach((anchor) =&gt; {
if (current.indexOf(anchor.href)) {
anchor.classList.add("active");
}
});
})();
Copy linkTweet thisAlerts:
@sibertauthorFeb 18.2020 — Actually none of these worked. But adding a calculation: != -1 made it work.

``<i>
</i>(function() {
var current = window.location.href;
anchors.forEach(function(anchor) {
if (current.indexOf(anchor.href) != -1) {
anchor.classList.add("active");
}
});
})();<i>
</i>
``

Thank you for pointing me in the right direction!
Copy linkTweet thisAlerts:
@SempervivumFeb 18.2020 — Correct, I forgot about that :-(
Copy linkTweet thisAlerts:
@sibertauthorFeb 20.2020 — > @Sempervivum#1614886 Correct, I forgot about that :-(

99% correct is not bad. Here is the result up and running as a rough mockup:

http://94.237.92.101:2020

The idea is to make it more useful on a mobile device. Any suggestions or enhancement suggestions?
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...