We Keep Coding

Repositioning bootstrap card after filtering

through Bootstrap Studio and a few lines of PHP, I dynamically generate a series of Cards.
I can filter the cards via an input box, but the filtered cards, don't reposition....they do if i change the width of the browser window....is there a way to make them reposition?
I'm posting my code
<div style="padding: 20px;border-radius: 20px;" id="card-list">
<div class="row" id="myItems" data-masonry="{"percentPosition": true }" >
<?php
//creo l'elenco dei campionati che si disputeranno fra oggi e domani
foreach ($arr_fed_NS as $key => $value) {
$text_camp=str_replace(']','',str_replace('[','',$value));
// echo '<br>ecco: '.$text_camp.'<BR>';
echo'
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<picture type="" srcset=""><img class="card-img-top p-3" src="'.$arr_camp[$text_camp].'" style="border-radius: 24px; object-fit: cover"></picture>
<div class="card-body">
<h3 class="fw-bolder card-title" style="text-align: center;--bs-body-font-weight: bold;">'.$text_camp.'</h3>
</div>
</div>
</div>';
}
?>
</div><script async="" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
</div>
function prova(){
const input = document.getElementById('filter').value.toUpperCase();
const card = document.getElementsByClassName('card');
for (let i = 0; i < card.length; i++) {
let title = card[i].querySelector(".card-body h3.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1){
card[i].style.display="";
}else {
card[i].style.display="none";
}
}
}

I have two interdependent checkboxes where 1st checkbox have api call on change event and 2nd gets populated. I need to remember checked items of 2nd

I have two interdependent multiselect checkboxes dropdowns where 1st checkbox have api call on change event and 2nd gets populated. So whenever i check items from 2nd dropdown and I decide to check another item from 1st dropdown my checked items from 2nd dropdown gets re populated with fresh data. I need to remember checked items from 2nd dropdown doesn't matter how many times I recheck items of 1st dropdown.
HTML
<label class="form-label">Clients<span class="mandatory">*</span></label>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="" id="headingOne">
<h2 class="mb-0">
<button [class.ifinvalid]="clientError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
type="button" (click)="showClient = true" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
<div style="color:black">Select Clients</div>
<img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
alt="">
</button>
</h2>
</div>
<div id="collapseOne" *ngIf="showClient" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="" style="color: #495057;border-top: 1px solid #dedede;">
<div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
<label class="custom-control material-checkbox d-flex">
<input type="checkbox" [(ngModel)]="masterSelectedClient" name="list_name_tech" value="m1"
(change)="checkUncheckAllClient()" />
<span class="material-control-description btn"
style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
<span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
{{tempArr2.client.length}})</span>
<span class="material-control-indicator"></span>
<input type="text" class="localSearchInput form-control" [(ngModel)]="searchClient"
name="searchClient" placeholder="{{ 'Search' }}"
style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
</label>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
<div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
>
<li class="list-group-control"
*ngFor="let client of clientCollection| searchdata: searchClient">
<label class="custom-control material-checkbox d-flex">
<input name="{{client.clientName }}" type="checkbox"
(change)="onChangeSelectClient($event,client)" class="material-control-input"
[checked]="client.clientCode == true" style="margin-left: 2px;">
<span class="material-control-description"
style="margin-left: 10px;">{{client.clientName}}</span>
<span class="material-control-indicator"></span>
</label>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="errorDiv" *ngIf="submitClicked && clientError">
<small class="text-danger" *ngIf="clientError">Client is required</small>
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" (clickOutside)="showtech = false" style="margin-bottom: 20px;">
<label class="form-label">Project<span class="mandatory">*</span></label>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="" id="headingOne">
<h2 class="mb-0">
<button [class.ifinvalid]="techError" class="btn btn-link btn-block text-left d-flex align-items-center justify-content-between"
type="button" (click)="showtech = true" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne" style="text-decoration: none;">
<div style="color:black">Select Project</div>
<img _ngcontent-pyg-c117="" class="arrow" src="assets/images/newimage/Icons/Home/arrow-down.svg"
alt="">
</button>
</h2>
</div>
<div id="collapseOne" *ngIf="showtech" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="" style="color: #495057;border-top: 1px solid #dedede;">
<div class="card-header projectNarrative" id="headingOne" style="padding: 0.1rem 0.15rem;">
<label class="custom-control material-checkbox d-flex">
<input type="checkbox" [(ngModel)]="masterSelectedTech " name="list_name_tech" value="m1"
(change)="checkUncheckAllTech()" />
<span class="material-control-description btn"
style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">All</span>
<span style="color: #495057;padding: 0;font-weight: 500;margin-left: 10px;">(Selected :
{{tempArr1.tech.length}})</span>
<span class="material-control-indicator"></span>
<input type="text" class="localSearchInput form-control" [(ngModel)]="searchTech"
name="searchTech" placeholder="{{ 'Search' }}"
style="width:130px; border: 1px solid rgb(189, 189, 189); height: 23px; position: absolute;right: 3%;">
</label>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
<div class="card-body" style="padding-left: 0rem; height: 120px; overflow: auto; padding-top: 0px;"
>
<li class="list-group-control"
*ngFor="let tech of adminTechCollection| searchdata: searchTech">
<label class="custom-control material-checkbox d-flex">
<input name="{{tech.projectName }}" type="checkbox"
(change)="onChangeSelectTech($event,tech)" class="material-control-input"
[checked]="tech.technologyCode == true" style="margin-left: 2px;">
<span class="material-control-description"
style="margin-left: 10px;">{{tech.projectName}}</span>
<span class="material-control-indicator"></span>
</label>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="errorDiv" *ngIf="submitClicked && techError">
<small class="text-danger" *ngIf="techError">Project is required</small>
</div>
</div>
TS
`
/*----------------------------Function to get Checkbox ID's(Project)-------------------------*/
onChangeSelectTech(event, tech: any, masterSelectedTech: any) {
this.techError = false;
if (masterSelectedTech !== undefined) {
if (!masterSelectedTech) {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex == -1) {
const obj = {
projectId: tech.projectId,
};
this.tempArr1.tech.push(obj);
}
} else {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex !== -1) {
this.tempArr1.tech.splice(removeIndex, 1);
}
}
} else {
if (event.target.checked) {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex == -1) {
const obj = {
projectId: tech.projectId,
};
this.tempArr1.tech.push(obj);
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
this.adminTechCollection[tech.indexCount - 1].technologyCode = true;
}
} else {
let removeIndex = this.tempArr1.tech.findIndex(
(itm) => itm.projectId === tech.projectId
);
if (removeIndex !== -1) {
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
// console.log( );
this.adminTechCollection[tech.indexCount - 1].technologyCode = false;
this.tempArr1.tech.splice(removeIndex, 1);
}
}
}
if (masterSelectedTech === undefined) {
if (this.adminTechCollection.length == this.tempArr1.tech.length) {
this.masterSelectedTech = true;
} else {
this.masterSelectedTech = false;
}
}
if (this.tempArr1.tech.length == 0) {
this.techAddError = false;
}
console.log(this.tempArr1.tech);
}
/*----------------------------Function to get Checkbox ID's(Client)-------------------------*/
onChangeSelectClient(event, client: any, masterSelectedClient: any) {
this.clientError = false;
if (masterSelectedClient !== undefined) {
if (!masterSelectedClient) {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex == -1) {
const obj = {
clientId: client.clientId,
};
this.tempArr2.client.push(obj);
}
} else {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex !== -1) {
this.tempArr2.client.splice(removeIndex, 1);
}
}
} else {
if (event.target.checked) {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex == -1) {
const obj = {
clientId: client.clientId,
};
this.tempArr2.client.push(obj);
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = true; //bytechID
this.clientCollection[client.indexCount - 1].clientCode = true;
}
} else {
let removeIndex = this.tempArr2.client.findIndex(
(itm) => itm.clientId === client.clientId
);
if (removeIndex !== -1) {
// PGCS
// this.adminTechCollection[tech.technologyId - 1].technologyCode = false; //bytechID
this.clientCollection[client.indexCount - 1].clientCode = false;
this.tempArr2.client.splice(removeIndex, 1);
}
}
}
if (masterSelectedClient === undefined) {
if (this.clientCollection.length == this.tempArr2.client.length) {
this.masterSelectedClient = true;
} else {
this.masterSelectedClient = false;
}
}
console.log(this.tempArr2);
this.passedArray = this.tempArr2.client.map(function(element){
return `${element.clientId}`;
})
console.log(this.passedArray)
this.selectChangeHandler(event);
}
//Api call change function
selectChangeHandler(event:any){
console.log("weee");
// this.tempArr1.tech=[]
this.clientId = event.target.value;
this.api.GetProjectList(this.passedArray).subscribe({
next:(data:any)=>{
if (data.success) {
console.log(data);
this.adminTechCollection = [];
for (let i = 0; i < data.data.length; i++) {
this.adminTechCollection.push(data.data[i]);
}
console.log(this.adminTechCollection);
}
}
})
}
`

index.js:28 Uncaught TypeError: Cannot read property 'addEventListener' of null ( at toggleActiveOnClick and at Array.forEach)

For a project I have to evolve a piece of code but I can not. This bit of code initially allows me to toggle the 4 clickable elements of a certain form and it works perfectly.
const choices = document.querySelectorAll('.clickable');
const toggleActiveClass = (event) => {
event.currentTarget.classList.toggle('active');
};
const toggleActiveOnClick = (choice) => {
choice.addEventListener('click', toggleActiveClass);
};
choices.forEach(toggleActiveOnClick);
However, now I have to make sure that when I select one or the other of the first 2 elements I can not toggle the other and the same for the next 2. I tried this piece of code but when I open the console in chrome tool i get the error message present in the title of this post. Here is the piece of code in question:
const upsell = document.querySelector('.clickable > .fas fa-shopping-cart');
const crossell = document.querySelector('.clickable > .fas fa-cart-plus');
const standard = document.querySelector('.clickable > .fas fa-gift');
const discount = document.querySelector('.clickable > .fas fa-percent');
const choices = [ upsell, crossell, standard, discount ];
const toggleActiveClass = (event) => {
event.currentTarget.classList.toggle('active');
};
const toggleActiveOnClick = (choice) => {
if (choice === upsell.addEventListener('click', toggleActiveClass)) {
crossell.classList.remove('active');
} else if (choice === crossell.addEventListener('click', toggleActiveClass)) {
upsell.classList.remove('active');
} else if (choice === standard.addEventListener('click', toggleActiveClass)) {
discount.classList.remove('active');
} else if (choice === discount.addEventListener('click', toggleActiveClass)) {
standard.classList.remove('active');
}
};
choices.forEach(toggleActiveOnClick);
Here is the corresponding html
<div class="form-group">
<label for="bundle-type">Bundle Type</label>
<div class="d-flex flex-wrap justify-content-center pt-4">
<div id="test1">
<div class="clickable">
<i class="fas fa-shopping-cart"></i>
<small>Upsell</small>
</div>
</div>
<div id="test2">
<div class="clickable">
<i class="fas fa-cart-plus"></i>
<small>Cros-sell</small>
</div>
</div>
</div>
<label for="bundle-type">Offer Type</label>
<div class="d-flex flex-wrap justify-content-center pt-4">
<div id="test3">
<div class="clickable">
<i class="fas fa-gift"></i>
<small>Standard</small>
</div>
</div>
<div id="test4">
<div class="clickable">
<i class="fas fa-percent"></i>
<small>Discounted</small>
</div>
</div>
</div>
</div>
And the CSS
.clickable i {
font-size: 24px;
margin-bottom: 10px;
}
.clickable:hover i {
color: #167FFB;
}
.clickable.active {
color: inherit;
border-color: inherit;
}
.clickable.active i {
color: #0F60C4;
}

Your selectors are just wrong, and you could have verified them (upsell and the others) with debugging/logging.
class="fas fa-shopping-cart" asssigns two classes to the element, fas and fa-shopping-cart. While it may be possible that after digesting the specification someone can come up with a selector for multiple classes, you could simply ignore fas (which is the same for all of them), and go for the specific ones instead:
console.log("Original attempt:");
const upsell = document.querySelector('.clickable > .fas fa-shopping-cart');
const crossell = document.querySelector('.clickable > .fas fa-cart-plus');
console.log(upsell);
console.log(crossell);
console.log("Simplified attempt:");
const upsellSimple = document.querySelector('.clickable > .fa-shopping-cart');
const crossellSimple = document.querySelector('.clickable > .fa-cart-plus');
console.log(upsellSimple);
console.log(crossellSimple);
<label for="bundle-type">Bundle Type</label>
<div class="d-flex flex-wrap justify-content-center pt-4">
<div id="test1">
<div class="clickable">
<i class="fas fa-shopping-cart"></i>
<small>Upsell</small>
</div>
</div>
<div id="test2">
<div class="clickable">
<i class="fas fa-cart-plus"></i>
<small>Cros-sell</small>
</div>
</div>
</div>
What others tried to point out: addEventListener() has no meaningful return value:
Return value: undefined
The comparisons (if (choice === xy.addEventListener(...)){...}) can not really do anything useful.

Can't set focus to textbook with javascript

This one has been driving me nuts and I have no clue what the problem is.
I have a quiz that has different kinds of question types (multiple choice, type in the answer, etc) and for each question, I set the innerHTML using a function and then populate it accordingly.
If it's a textbox question, I'd like to automatically set the focus to it. I've tried using javascript, jQuery, and the console window from within Chrome. I've set the tab index to -1. I've looked on this website, but none of the solutions seem to work.
Here's the code:
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>

function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>

Can't click the upvote on my angular-rails Reddit clone

I built a Reddit clone in Angular and Rails following this guide. I've been playing around with the CSS to get the upvote and downvote arrows in the right spot. I guess overriding the Bootstrap wasn't a good idea because I can't seem to get my ng-click to fire when I click the arrow anymore (it worked fine before, didn't change the js at all). Here's the relevant bits:
HTML:
<div class="row">
<div class="col-md-1 small-right-gutters small-col">
<div class="row">
<div class="col-md-1 small-right-gutters">
<div class="glyphicon glyphicon-arrow-up" ng-click="addUpvote(post)"></div>
<div class="glyphicon glyphicon-arrow-down"></div>
</div>
<div class="col-md-1 vert-center">
{{post.upvotes}}
</div>
</div>
</div>
<div class="col-md-9 big-col vert-center">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</div>
<div class="col-md-2 text-right">
<div>
<small>{{ post.comments.length }} comment<span ng-hide="post.comments.length==1">s</span></small>
</div>
<div>
<small>posted by <a ng-href="#/users/{{post.user.username}}">{{post.user.username}}</a></small>
</div>
</div>
</div>
CSS:
.small-right-gutters {
padding-right: 2px;
}
.small-col {
width: 40px;
}
.big-col {
width: 925px;
font-size:20px;
margin-left: 10px;
}
.vert-center {
height: 40px;
line-height: 40px;
}
Angular controller:
$scope.addUpvote = function (post) {
postFactory.upvotePost(post);
};
$scope.addDownvote = function (post) {
postFactory.downvotePost(post);
};
Angular factory:
upvotePost: function(post) {
return $http.put('/posts/' + post.id + '/upvote.json').success(function (data) {
post.upvotes += 1;
});
},
downvotePost: function(post) {
return $http.put('/posts/' + post.id + '/downvote.json').success(function (data) {
post.upvotes -= 1;
});
},
Any ideas why this is happening?

If you add z-index: 1; on your .glyphicon it works!