Develop Reference

Javascript - Change button text doesn't work

I have the following piece of code I need in order to update a bootstrap button when a collapsed is opened or closed. However the icon part is updating but impossible to get the button text updated and I have no idea why.
My javascript level is very low and I'm simply using part of code I might find on SOF or anywhere else on internet.
Javascript
$('#more-properties').on('hidden.bs.collapse', function () {
var icon = document.getElementById("icon-more-properties");
icon.setAttribute('class', 'fas fa-angle-down pr-2');
var btn = document.getElementById("btn-more-properties");
btn.textContent('More properties');
});
$('#more-properties').on('shown.bs.collapse', function () {
var icon = document.getElementById("icon-more-properties");
icon.setAttribute('class', 'fas fa-angle-up pr-2');
var btn = document.getElementById("btn-more-properties");
btn.textContent('Less properties');
});
Bootstrap button
<div class="col-12 text-center" id="btn-div">
<button class="btn btn-outline-dark shadow-none collapsed" id="btn-more-properties" type="button" data-toggle="collapse" data-target="#more-properties" style="border-radius: 0 !important;">
<i id="icon-more-properties" class="fas fa-angle-down pr-2"></i>More properties</button>
</div>
Does anyone can tell me why it is not working ? I can't find any similar issue on iternet.
Thank you in advance for your help.

that textContent is not a function but a property,
so instead of calling it you need to assign the value to it:
btn.textContent = 'Less properties';
Hope this helps 🔥

a function runs multiple times when showing a bootstrap modal. vanilla js

I have a button that shows a bootstrap modal, it has an onclick attribute set to a function,
The button:
<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}"
type="button" data-bs-toggle="modal" data-bs-target="#grade-modal"
onClick="getEnrolledSubjects(this.getAttribute('data-id'))">
<i class="fas fa-plus"></i>
</span>
My javascript function:
function getEnrolledSubjects(id){
var modal = document.getElementById('grade-modal')
modal.addEventListener('shown.bs.modal', function(){
console.log(id)
}
}
at first, it looks fine because it will only log the id once, but when I close the modal and open it again, it will log 2 times, then 3 times, and so on... it goes incrementally. how can i fix this?

as Bootstrap Modal documentation
You can Use event.relatedTarget:
<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}" type="button" data-bs-toggle="modal" data-bs-target="#grade-modal">
<i class="fas fa-plus"></i>
</span>
without onClick event
const modal = document.getElementById('grade-modal')
modal.addEventListener('shown.bs.modal', function(event){
const button = event.relatedTarget
const id = button.getAttribute('data-id');
console.log(id)
})

How to open a new window/tab from javascript

It worked a year ago, but now it opens a new window/tab (which is the correct behavior), but it stays blank and does not open the URL specified.
I allowed popups in my Chrome setting but still the same result.
Pasting and executing the URL by hand works fine (like https://api.whatsapp.com/send?text=bla ).
<p>
<span class="tooltip"
><i class="fa fa-whatsapp"></i> <a
id="lblSuccess2"
href="javascript:sendWA()"
target="_blank"
><span class="tooltiptext" id="myTooltip2"
>Klik om te delen via WhatsApp</span
>WhatsApp</a
></span
>
</p>
function sendWA() {
var tekst = document.getElementById("txtVoorbeeldtekst").value;
var uriWA = "https://api.whatsapp.com/send?text=".concat(
encodeURIComponent(tekst)
);
window.open(uriWA, "_blank");
return false;
}

I managed to solve the problem. Use onclick instead of href, like this:
href="#" onclick="sendWA(); return false;"

How to disable Javascript action on links (<a>) on Bootsrap3 non-real-links (<a href="#..."/>)?

I have an <a> tag on my website, a script which shows a loader when you click on a link (any links).
Here is the code :
window.onload = function(){
var loading = document.getElementById("loading");
var elements = document.querySelectorAll("a");
function showLoading(){
loading.style.display = "block";
}
for(var i = 0; i < elements.length; i++){
elements[i].addEventListener("click",showLoading);
}
}
Problem: on non-real links <a href="">, like "tabs" or "dropdown" on Bootstrap3, the load is still running. How can I avoid this ? (using a general .class or like this ?)

What about disabling those anchor tags using this jquery?
$('#anchor_tag').attr("disabled", true);

According to Bootstrap v4 documentation you can now use buttons instead of links, like this:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
Alternatively, you could specify let elements = document.querySelectorAll("a:not(.class-all-inactive-links-share")).

Angular js and bootstrap ui date picker not open in chrome on clicking on icon

I have date picker in angular using bootstrap UI. This code is working very fine in IE but its not get open in chrome. As after calling the method open () input box get focused but date picker popup not opens. Any help will be really appreciable. Thanks in advance
<p class="input-group">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
Java Script
$scope.open = function () {
$scope.opened = true;
};

You need to stop the click event from propagating from the button as it will cause the datepicker to close instantly...
<button type="button" class="btn btn-default" ng-click="$event.stopPropagation(); open();">
<i class="glyphicon glyphicon-calendar"></i>
</button>
Demo - JSFiddle

it may correct way to use above solution .
when you use $event.preventDefault(); $event.stopPropagation(); be carefully . it may affect other components events too. the live code is http://jsfiddle.net/mDLzn/34/
$scope.open = function (event) {
event.stopPropagation();
event.preventDefault();
$scope.opened = true;
console.log('foo'); };