We Keep Coding

Selecting anchors within div by div id

New to JS, just dipping in to solve a problem (I bet everyone says that!). I need to write a script to select an anchor and insert an <img>.
There are several <a>'s within a div that has an id of _nwa_social_logins. I need to add an img tag to one of those. I'm not sure of the best way of doing this.
It's a captive portal page served up by a product we use, and the bit I'm interested in looks like this:
<div id="_nwa_social_logins">
<a class="btn btn-facebook" href="<url>/guest/social-media.php?oauth_init=1&oauth=facebook" title="">
<i class="icon-facebook"></i> Facebook
</a>
<a class="btn btn-linkedin" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=linkedin" title="">
<i class="icon-linkedin"></i> LinkedIn
</a>
<a class="btn btn-google" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=google" title="">
<i class="icon-google"></i> Google
</a>
<a class="btn btn-twitter" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=twitter" title="">
<i class="icon-twitter"></i> Twitter
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=azure" title=""><img src="images/icon-microsoft.png" align="middle">Microsoft Azure AD
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=amazon" title="">Amazon</a>
</div>
So far I have
let items = document.querySelector('#_nwa_social_logins a');
To be honest I don't know how to even check if that has selected anything.
I need to select the Amazon anchor and set an <img> for the button. If the selection above gives me a list of <a>s (objects?) can I loop through them and look for one that has an href value that ends with 'amazon'?
Thank you

You can do this:
<script>
window.addEventListener('load', () => {
let links = document.querySelectorAll('#_nwa_social_logins a');
links.forEach((link, index) => {
if (link.getAttribute("href").toLowerCase().lastIndexOf('amazon') >= 0)
link.innerHTML = '<img src="someimage">';
});
});
</script>

Not able to parse HTMLCollection list

I am trying to scrape out some links from a site using javascript. In the below HTML I have some links in the 'a' tag. And I am using the following JS.
The problem is that I am not able to get the links from the myChildList.
When I console.log myDownloadDiv, it shows me the output as object HTMLElement. When I console.log the myChildList (i.e the children of the HTMLElement) I get something like a HTMLCollection [a.dropdown-item.disabled] in which the length is 2 and with both the anchor tags and with all their properties in it with the links.
When I want to console.log all the elements using a loop, it shows only one element and the output is like this:
<a class="dropdown-item disabled"></a>
I don't understand if I am doing something wrong while parsing out the HTMLCollection List.
var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}
<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>
EDIT:
I tried the solutions. They work perfectly in the snippets but they are not working on the site which I am trying to scrape.

Your loop seems to work.
Perhaps you meant this
const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href);
console.log(links);
<div class="col-12 col-sm-3">
<div class="dropup">
<a href="" class="btn btn-secondary btn-block dropdown-toggle" id="downloadMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Download
</a>
<div class="dropdown-menu" id="pickDownload" aria-labelledby="downloadMenu">
<a href="https://fainbory.com/4eQM" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 720p (129 MB)
</a>
<a href="https://fainbory.com/4eQP" class="dropdown-item" target="_blank">
<span class="badge badge-primary">BD</span> Elysium - 1080p (239 MB)
</a>
</div>
</div>
</div>
Here is a bookmarklet
javascript:(function() { const links = [...document.querySelectorAll("#pickDownload a")].map(link => link.href); console.log(links))()

your code is correct and works properly on my machine, I think there's an issue with your console object.
Please try to remove this import https://static.lalaping.com/online.js?ver=2.0.0:formatted
I suspect the console object is overwritten there.
You can verify this on you site, just running in the browser console the following commands:
// Restore console object:
var i = document.createElement('iframe');
i.style.display = 'none';
document.body.appendChild(i);
window.console = i.contentWindow.console;
// Run your code:
var myDownloadDiv = document.getElementById("pickDownload");
var myChildList = myDownloadDiv.children;
console.log(myChildList);
for (var j of myChildList) {
console.log(j);
}

How can I use <div> list instead of <select> dropdown for a languages switcher?

I want to use <div> instead of <select> to list options for a languages switcher. But the problem is i don't know how to pass the value to the jQuery function.
here is my <select> html code
<select id="langSelector">
<option>lang</option>
<option value="de">de</option>
<option value="jp">jp</option>
</select>
What i want to use instead
<div id="langSelector" class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
<a value="de" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center"> German</span></a>
<a value="jp" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center"> Japanese</span></a>
</div>
My Jquery Code
<script type="text/javascript">
var l = new LanguageSelector();
$(function(ready){
$("#langSelector").change(function() {
var s = $(this).children("option:selected").val();
l.setLang(s);
window.location = '1.html';
});
});
l.parse();
</script>
i try to change value"" to data-value"" and option:selected to a:selected > span:selected > a.selected but nothing seems to work

<div id="langSelector" class="dropdown-menu position-absolute" aria-labelledby="language-dropdown">
<a data-lang="de" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/de.png" class="flag-width" alt="flag"> <span class="align-self-center"> German</span></a>
<a data-lang="jp" class="dropdown-item d-flex" href="javascript:void(0);"><img src="assets/img/jp.png" class="flag-width" alt="flag"> <span class="align-self-center"> Japanese</span></a>
</div>
<script>
var languageSelector = new LanguageSelector();
$('[data-lang]').on('click', function(){
var selectedLang = $(this).data('lang');
languageSelector.setLang(selectedLang);
// DO THE REST OF CODE HERE
});
</script>
So store the data in an HTML5 Data Attribute. Since Im assuming your creating a fake downdown to control useragent styles better (<- my frontends do this alot) we will collect jquery html elements by using the [data-lang] as a selector which will return all the data-lang set elements on the page if you would like to restrict it you may need to use ....
$('a[data-lang]')...
or
$('#langSelector > a[data-lang]')....
then use the click listener to return $(this) which will be the current clicked link and access its data('lang') attribute and pass that to lang

Change glyphicon on click

I am trying to change this glyphicon on click but it works fine when href = "#" but originally my href contains a url which through a view hits the database in django.
HTML:
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id = "star" href="#" data-toggle="tooltip" title = "Add to your list" data-placement="top">
<span class="glyphicon glyphicon-star-empty"></span>
</a>
</h1>
</div>
</div>
JS:
$('#star').click( function(){
$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});
This works fine.
http://jsfiddle.net/asees/5XqyW/564/
But when i change href to the below code, there is no change on glyphicon.
<a id = "star" href="{% url 'add' %}" data-toggle="tooltip" title = "Add to your list" data-placement="top">
<span class="glyphicon glyphicon-star-empty"></span>
</a>

Working fiddle.
Since you're clicking on anchor #star you need to prevent the default event
(redirecting to href) using e.preventDefault() like :
$('#star').click( function(e){
e.preventDefault();
$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});

How do I pass back a specific variable of an ng-repeat?

I have an ng-repeat that repeats a dropdown. Each repeated div that holds the dropdown has a unique ID generated by the controller that I can reference.
How can I pass back the selected option for that specific dropdown? Right now, if one dropdown is selected, the value for selectedParameter.name changes for all dropdowns.
<div id="{{ mergeVar.name }}" class="alert {{ selectedParamClass }}" ng-repeat="mergeVar in mergeVars">
<b>merge value: </b> {{mergeVar.name}}
<div class="dropdown pull-right">
<button type="button" class="btn btn-sm btn-control dropdown-toggle" data-toggle="dropdown">
{{selectedParameter.name || 'Match the Paramater'}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="param in availableParams">
<a ng-click="selectParameter(parampass)">{{param.name}}</a>
</li>
</ul>
</div>
</div>
//controller.js
$scope.selectParameter = function(parampass) {
console.log('parameter selected')
$scope.selectedParameter = parampass
$scope.selectedParamClass = 'alert-success'
}

Do this instead to affect only one instance of your object:
$scope.selectParameter = function(parampass) {
console.log('parameter selected')
parampass.selectedParamClass = 'alert-success';
}
What you need is to add the property to the instance "row" object.
You can still store the selected object:
$scope.selectedParameter = parampass
But based on what I see in your code what you probably want do to is to use the ng-class="selectedParamClass" when an item is selected for the object selected.