We Keep Coding

Making a dropdown button turn (and stay) green in JavaScript

So, I'm new to coding, and I have been struggling to make a dropdown button turn green when you click the main button "Pronto". I've followed some steps from similar questions here, but they didn't work for me. No effects at all. Can you give me some insights?
HTML:
<div class="btn-group">
<button class="btn btn-default">Pronto</button>
<button type="button" class="btn btn-default dropdown-toggle dropdown-icon" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" role="menu" style="">
<a class="dropdown-item" href="#">Pronto</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Item Não Disponível</a>
</div>
JavaScript:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
var registerAccountButton = document.getElementById('registerAccountButton');
var registerAccountModal = new bootstrap.Modal(document.getElementById('registerAccountModal'), {
keyboard: false
})
registerAccountButton.addEventListener('click', function () {
registerAccountModal.toggle();
})
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
CSS:
.green {
background-color: greenyellow;
}
You can even see I tried creating a class and calling it, but didn't work.
What am I missing?

Your problem is the following code
$('input[type="button"]').click(function(){
$('input[type="button"].green').removeClass('green')
$(this).addClass('green');
});
You have created your buttons using the <button> in html, but in js you are referencing them using <input type="button"> which is not present & hence is ignored by jQuery.
Your code should be something like follows, to make the dropdown button green, when the Pronto button is clicked:
$('#prontoButton').on('click', function(evt) {
$('.dropdownButton').addClass('green');
});

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>

A simple JavaScript / jQuery way of swapping the positioning of two image links on click?

I have set up a client-side translation of my web page using translate.js. If a user clicks on say, French, I would like that to move to the position of English and for English to move to the position of French. I tried the following:
$('.img-btn').click(function(){
var clickedId = $(this).attr('src');
alert('you clicked on button #' + clickedId);
$('.img-btn.active').attr('src', clickedId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="language-select">
<a class="lang_selector trn" href="#" role="button" data-value="fr"><img id="French" class="img-fluid rounded-circle img-btn" src="img/flags/fr.jpg" alt="French"></a>
<a class="lang_selector trn" href="#" role="button" data-value="it"><img id="Italian" class="img-fluid rounded-circle img-btn" src="img/flags/it.jpg" alt="Italian"></a>
<a class="lang_selector trn" href="#" role="button" data-value="en"><img id="English" class="img-fluid rounded-circle img-btn active" src="img/flags/en.jpg" alt="English"></a>
<i class="fa fa-angle-right fa-2x" aria-hidden="true">
</div>
But it doesn't seem to work (not even the alert did). Any ideas?

Good afternoon,
I think you want something like this:
$('.lang_selector').click(function(){
var clickedId = $(this).children(':first').attr('src');
alert('you clicked on button #' + clickedId);
var lastChild = $('div#language-select > i:last-child');
var lastLink = $('div#language-select > a:last-of-type');
//Insert current clicked element to last position
lastChild.before($(this));
//Insert the element that was last before the first element
$('div#language-select > a:first-of-type').before(lastLink);
});

I guess you want something like this. Live link
$('.img-btn').click(function(){
var clickedSrc = $(this).attr('src');
var activeSrc=$('.img-btn.active').attr('src');
alert('you clicked on button #' + clickedSrc);
$('.img-btn.active').attr('src', clickedSrc);
$(this).attr('src', activeSrc);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="language-select">
<a class="lang_selector trn" href="#" role="button" data-value="fr"><img id="French" class="img-fluid rounded-circle img-btn" src="http://www.theodora.com/gif2/france_fan.jpg" alt="French"></a>
<a class="lang_selector trn" href="#" role="button" data-value="it"><img id="Italian" class="img-fluid rounded-circle img-btn" src="http://www.theodora.com/flags/new9/italy-s.gif" alt="Italian"></a>
<a class="lang_selector trn" href="#" role="button" data-value="en"><img id="English" class="img-fluid rounded-circle img-btn active" src="http://www.theodora.com/flags/new12/bangladesh-s.gif" alt="English"></a>
<i class="fa fa-angle-right fa-2x" aria-hidden="true">
</div>

put your function in ready document or use the bubbling concept like so , to make sure the code will applied after the page creation :
$('body').on('click','.img-btn',function(){
var clickedId = $(this).attr('src');
alert('you clicked on button #' + clickedId);
$('.img-btn.active').attr('src', clickedId);
});

angular 2 ngfor reverse order and same index

I have an app that display an array items in panel
using this code
<div *ngFor="let object of questionAnswer | reverse let i = index" [attr.data-index]="i">
<p-panel header="{{object.question}}" [toggleable]="true" [collapsed]="true">
<div class="row">
<div class="col-sm-6">
{{object.answer}}
</div>
<div class="col-sm-6">
<button type="button" class="paneltools btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog fa-fw" aria-hidden="true"> </i> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a (click)="editShow(i)">Edit</a></li>
<li><a (click)="remove(i)">Delete</a></li>
</ul>
</div>
</div>
</p-panel>
</div>
i wanted to display the items in reverse order as to show the newer item first and by using the a pipe code i found here works fine
export class ChallengesReversePipe {
transform(value) {
return value.slice().reverse();
}
}
but my big problem is when doing it like this im getting a reverse index number and i need the original index number from before the inverse for example
the index for the top item should be the last index number in the array
and i cant seem to find a way to get it :(
any help please?

You could try something like this:
[attr.data-index]="questionAnswer.length - i - 1"

[attr.data-index]="questionAnswer.length - i - 1" didn't work for me but I replaced all occurrences of i by "yourArray.length - i - 1" which did the job

Incrementing +1 the class in javascript

Hi im doing a PHP loop where I set a class, this loop make a list of items, and each one of them will have a "share" button that will open a window, (div display:none) the javascript open this div, and it works perfect..
My problem is that in this moment I have inserted the <script> code inside the loop so each item has its own <script></script> code...
Is there any way to do just one and take that code out of the php loop, so I can improve the code.
<script>
$('a.sharebtnc').click(
function(event) {
event.stopPropagation();
$('div.redescompartir').fadeToggle(300);
}
);
</script>
In the Loop well I just add to the class the id like this (id :32 )
<script>
$('a.sharebtnc32').click(
function(event) {
event.stopPropagation();
$('div.redescompartir32').fadeToggle(300);
}
);
</script>
How can I make this script works for all elements no matter the id number, I have no idea, but I know this is the correct way of doing this , right?
The HTML is very simple, its the same for each item... I mean each item has its own div with for <a href="" > </a> elements
<a href="#" class="sharebtnc(id)">
<div class="redescompartir(id)">
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>

Add a new class and attribute to the input element like
instead of
<a class="sharebtnc32" />
use
<a class="sharebtnc sharebtnc32" data-id="32"/>
then
jQuery(function ($) {
$('.sharebtnctl').click(function (event) {
event.stopPropagation();
$('.redesopenclose' + $(this).data('id')).fadeToggle(300);
});
})

My preferred method: PHP to generate link between the two elements, then a small snippet of JS to grab which particular one was clicked.
PHP:
$num = 100;
for ($x = 0; $x < $numItems; $x++) {
echo "
<a href='#' class='sharebtn' target='$x'>Share</a>
<div class='redescompartir' id='$x'>
<a href=''>Twitter</a>
<a href=''>Facebook</a>
<a href=''>Google</a>
<a href=''>Foursquare</a>
</div>
";
}
HTML output:
<a href="#" class="sharebtn" target='32'>Share</a>
<div class="redescompartir" id='32'>
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>
JS:
$('a.sharebtn').on('click', function(e) {
e.stopPropagation();
var target = $(e.currentTarget).attr('target');
$('#'+target).fadeToggle(300);
});
This way you only need a single <script></script> tag, which your user's broswers will thank you for. :)