Display array values with delay on keyup - javascript

I have the following that is supposed to hide/show the array values with a delay of 3seconds:
function loop(s, val) {
s.style.display = val;
if (++i < s.length) {
setTimeout(loop, 3000); // call myself in 3 seconds time if required
}
};
Autocomplete.prototype.filterCategory = function(e) {
this.input.addEventListener("keyup", (e) => {
let inputVal = this.input.value,
patt = new RegExp(inputVal);
for (var i = 0; i < this.categories.length; i++) {
if(!patt.test(this.categories[i].dataset.cat)){
//this.categories[i].style.display = "none";
console.log('none');
loop(this.categories[i], 'none');
}
else {console.log('block');
loop(this.categories[i], 'block');
}
}
});
}
Short HTML:
<div class="category" data-cat="programmer, sales, manager">
<p class="h-text-cap">sales</p>
<a class="btn btn__open btn__open--blue" href="">more</a>
</div>
<div class="category" data-cat="programmer, sales, manager, vendor">
<p class="h-text-cap">sales</p>
<a class="btn btn__open btn__open--blue" href="">more</a>
</div>
<div class="category" data-cat="programmer, sales, manager, carpenter">
<p class="h-text-cap">capenter</p>
<a class="btn btn__open btn__open--blue" href="">more</a>
</div>
<div class="category" data-cat="programmer, sales">
<p class="h-text-cap">sales</p>
<a class="btn btn__open btn__open--blue" href="">more</a>
</div>
UPDATED CODE:
function loop(s, val) {
s[i].style.display = val;
if (++y < s.length) {
setTimeout(loop(s, val), 3000); // call myself in 3 seconds time if required
}
};
Autocomplete.prototype.filterCategory = function(e) {
this.input.addEventListener("keyup", (e) => {
let inputVal = this.input.value,
patt = new RegExp(inputVal),
newA = [];
for (var i = 0; i < this.categories.length; i++) {
if(!patt.test(this.categories[i].dataset.cat)){
newA.push(this.categories[i]);
loop(newA, 'none');
}
else {
loop(this.categories[i], 'block');
}
}
});
}
i is not defined
by typing a job-title "programmer", I want o hide all the data-cat that don't hold that value. At the moment it works fine in terms of logic, however they all get hidden or shown in one block as opposed to individually with a 3s delay.

Related

How to change tab view with pagination in MVC Core?

I created a tab view to show 2 different records and added pagination to them. Everything works fine but when I click on the second tabview's pagination , it opens the first tabview automatically. When I switch to the other tab view , then I see the second page. I only want to show the tabview first when I click their pagination. How can I do this ?
My Controller
public async Task<IActionResult> List(int? page,int? pagePast)
{
var pageNumber = page ?? 1;
var pageNumberPast = pagePast ?? 1;
XCardViewModel viewModel = await _mediator.Send(new GetXQuery());
ViewBag.presentPageCount = viewModel.X;
XCardViewModel pastViewModel = await _mediator.Send(new GetPastXQuery());
ViewBag.pastPageCount = pastViewModel.PastX;
if(pageNumber != 1 || pageNumber == 1)
{
ViewBag.PageList = viewModel.X.ToPagedList(pageNumber, 5);
}
if(pageNumberPast !=1 || pageNumberPast == 1)
{
ViewBag.PastPageList = pastViewModel.PastX.ToPagedList(pageNumberPast, 5);
}
return View(viewModel);
}
Record.cshtml
<div class="tabbarClass">
<a class="card" href="javascript:void(0)" onclick="openTab(event, 'presentRecord');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding w3-border-blue">
<h2>Current Records</h2>
</div>
</a>
<a class="card" href="javascript:void(0)" onclick="openTab(event, 'pastRecord');">
<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">
<h2>Past Records</h2>
</div>
</a>
<div>
#foreach (var item in ViewBag.PageList)
{
#item.Header
}
</div>
<div id="paginationOrder">
#Html.PagedListPager( (IPagedList)ViewBag.PageList, page => Url.Action("Record", new { page }), new PagedListRenderOptions { })
</div>
#foreach (var item in ViewBag.PastPageList)
{
#item.Header
}
</div>
<div id="pastpaginationOrder">
#Html.PagedListPager( (IPagedList)ViewBag.PastPageList, page => Url.Action("Record", new { page }), new PagedListRenderOptions { })
</div>
<script>
var presentPage = '#ViewBag.presentPageCount.Count';
const pageModal = document.querySelector("#paginationOrder");
if(presentPage<5 || presentPage==5){
pageModal.style.display = "none";
}
var pastPage = '#ViewBag.pastPageCount.Count';
const pastpageModal = document.querySelector("#pastpaginationOrder");
if (pastPage < 5 || pastPage == 5) {
pastpageModal.style.display = "none";
}
function openTab(evt, tableID) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-border-blue", "");
}
document.getElementById(tableID).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-blue";
}
</script>

Pushing number of times a button is clicked to an array in JavaScript

How can I push the result in display value to an empty array to store for me for later implementation? The code I'm working with below. have tried several things but still, I'm not getting it
var fixedVal = 10;
var displayVal = 0;
document.getElementById("plus").addEventListener("click", function() {
if (fixedVal > 0) {
document.getElementById("error").innerHTML = "";
add();
} else {
document.getElementById("error").innerHTML = "Fixed value is now 0.";
}
});
document.getElementById("minus").addEventListener("click", function() {
if (fixedVal < 10) {
document.getElementById("error").innerHTML = "";
subtract();
} else {
document.getElementById("error").innerHTML = "Fixed value is now 10.";
}
});
function add() {
fixedVal--;
displayVal++;
document.getElementById("fixedValue").innerHTML = `Fixed Value: ${fixedVal}`;
document.getElementById("displayValue").value = displayVal;
}
function subtract() {
fixedVal++;
displayVal--;
document.getElementById("fixedValue").innerHTML = `Fixed Value: ${fixedVal}`;
document.getElementById("displayValue").value = displayVal;
}
<body>
<div id="fixedValue">Fixed Value: 10</div>
<input id="displayValue" value="0" disabled></input>
<div class="buttons">
<button id="plus" type="button">+</button>
<button id="minus" type="button">-</button>
</div>
<div id="error"></div>
<script src="app.js"></script>
</body>
The code I'm working with below.
Add additional buttons to push displayVal onto an array, and show the contents of the array.
var fixedVal = 10;
var displayVal = 0;
var allNumbers = [];
function saveNum() {
allNumbers.push(displayVal);
}
function showNumbers() {
document.getElementById("result").innerText = allNumbers.join(", ");
}
document.getElementById("store").addEventListener("click", saveNum);
document.getElementById("show").addEventListener("click", showNumbers);
document.getElementById("plus").addEventListener("click", function() {
if (fixedVal > 0) {
document.getElementById("error").innerHTML = "";
add();
} else {
document.getElementById("error").innerHTML = "Fixed value is now 0.";
}
});
document.getElementById("minus").addEventListener("click", function() {
if (fixedVal < 10) {
document.getElementById("error").innerHTML = "";
subtract();
} else {
document.getElementById("error").innerHTML = "Fixed value is now 10.";
}
});
function add() {
fixedVal--;
displayVal++;
document.getElementById("fixedValue").innerHTML = `Fixed Value: ${fixedVal}`;
document.getElementById("displayValue").value = displayVal;
}
function subtract() {
fixedVal++;
displayVal--;
document.getElementById("fixedValue").innerHTML = `Fixed Value: ${fixedVal}`;
document.getElementById("displayValue").value = displayVal;
}
<body>
<div id="fixedValue">Fixed Value: 10</div>
<input id="displayValue" value="0" disabled></input>
<div class="buttons">
<button id="plus" type="button">+</button>
<button id="minus" type="button">-</button>
<button id="store" type="button">Save</button>
<button id="show" type="button">Show</button>
</div>
<div id="error"></div>
<div id="result"></div>
<script src="app.js"></script>
</body>
Simply push it.
let valArray = [];
var displayVal = 0;
function pushCurrentValue() {
valArray.push(displayVal);
}
Then insert pushCurrentValue() wherever in your code you want it to be saved.
You can always just insert valArray.push(displayVal); wherever in your code too.
Its up to you if you want to use a function, or the push itself. Personally Id use the push.

plain javascript boolean flag doesn't work. why?

Hi,
can anyone tell me why everytime i click in the yellow button console log shows me the value false?? (should be alternately false right false right etc after every click)
where's mistake?
var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function() {
var button = this;
var arrow = button.lastElementChild.lastElementChild;
var btnColor = button.lastElementChild;
var flag = true;
if (flag) {
flag = false;
console.log(flag);
} else {
flag = true;
console.log(flag);
}
});
}
<section class="cursos-de-ingles">
<article class="main-cdi">
<div class="cdi cdi-one">
<div class="cdi-header">
<img src="img/numero1.png" alt="">
</div>
<div class="cdi-par">
<button type="button" class="cdi-link">
<div>
<span>Ver detalles de cursos de Inglés General</span> <span class="arrow">▶</span>
</div>
</button>
</div>
<!--cdi-par-->
<img src="img/greybox.png" alt="">
</div>
<!--cdi-one-->
<div class="cdi cdi-two">
<button type="button" class="cdi-link">
<div>
<span>Ver detalles de los cursos de Inglés Académico</span> <span class="arrow">▶</span>
</div>
</button>
</div>
<!--cdi-par-->
<img src="img/greybox.png" alt="">
<!--cdi-two-->
<div class="cdi cdi-three">
<div class="cdi-header">
</div>
<div class="cdi-par">
<button type="button" class="cdi-link">
<div>
<span>Ver detalles de los cursos individuales</span> <span class="arrow">▶</span>
</div>
</button>
</div>
<!--cdi-par-->
<img src="img/greybox.png" alt="">
</div>
<!--cdi-three-->
Move your flag outside of eventListener and for loop, because on every click or loop you will set the flag to true.
var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')
var flag = true;
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function() {
var button = this;
var arrow = button.lastElementChild.lastElementChild;
var btnColor = button.lastElementChild;
if (flag) {
flag = false;
console.log(flag);
} else {
flag = true;
console.log(flag);
}
});
}
but if you want a different flag for different clicks use a map instead:
var btn = document.querySelectorAll('.cdi-link');
var dropdown = document.getElementsByClassName('cdi-dropdown')
var flags = {};
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function() {
var button = this;
var arrow = button.lastElementChild.lastElementChild;
var btnColor = button.lastElementChild;
if (flag[i]) {
flag[i] = false;
console.log(flag[i]);
} else {
flag[i] = true;
console.log(flag[i]);
}
});
}
This is because the flag is always set as true when the click happens, therefore it keeps setting itself back to false. The declaration of the flag should be moved outside of the click handler.

Javascript Product Search (working, but need to filter by search term)

I have a little product search code that I've been working on for a while. It works great, although a bit backwards.
The more keywords I type in, ideally, the less products will show up (because it narrows down the results). But as is stands, the more keywords I type in my search system, the MORE products are displayed, because it looks for any product with any of the keywords.
I want to change the script so that it only shows results if they include ALL the searched for keywords, not ANY of them...
Sorry for the long-winded explanation.
Here's the meat and potatoes (jsfiddle):
http://jsfiddle.net/yk0Lhneg/
HTML:
<input type="text" id="edit_search" onkeyup="find_my_div();">
<input type="button" onClick="find_my_div();" value="Find">
<div id="product_0" class="name" style="display:none">Mac
<br/>Apple
<br/>
<br/>
</div>
<div id="product_1" class="name" style="display:none">PC
<br/>Windows
<br/>
<br/>
</div>
<div id="product_2" class="name" style="display:none">Hybrid
<br/>Mac PC Apple Windows
<br/>
<br/>
</div>
JAVASCRIPT:
function gid(a_id) {
return document.getElementById(a_id);
}
function close_all() {
for (i = 0; i < 999; i++) {
var o = gid("product_" + i);
if (o) {
o.style.display = "none";
}
}
}
function find_my_div() {
close_all();
var o_edit = gid("edit_search");
var str_needle = edit_search.value;
str_needle = str_needle.toUpperCase();
var searchStrings = str_needle.split(/\W/);
for (var i = 0, len = searchStrings.length; i < len; i++) {
var currentSearch = searchStrings[i].toUpperCase();
if (currentSearch !== "") {
nameDivs = document.getElementsByClassName("name");
for (var j = 0, divsLen = nameDivs.length; j < divsLen; j++) {
if (nameDivs[j].textContent.toUpperCase().indexOf(currentSearch) !== -1) {
nameDivs[j].style.display = "block";
}
}
}
}
}
So, when you search "mac pc" the only result that should be displayed is the hybrid, because it has both of those keywords. Not all 3 products.
Thank you in advance!
I changed a little bit your code to adjust it better to my solution. I hope you don't mind. You loop first over the terms, and then through the list of products, I do it the other way around.
How this solution works:
Traverse the list of products, for each product:
Create a counter and set it to 0.
Traverse the list of search terms, for each.
If the word is found in the product's name, add 1 to the counter.
If the counter has the same value as the list length, display the product (matched all words)
function gid(a_id) {
return document.getElementById(a_id);
}
function close_all() {
for (i = 0; i < 999; i++) {
var o = gid("product_" + i);
if (o) {
o.style.display = "none";
}
}
}
function find_my_div() {
close_all();
var o_edit = gid("edit_search");
var str_needle = edit_search.value;
str_needle = str_needle.toUpperCase();
var searchStrings = str_needle.split(/\W/);
// I moved this loop outside
var nameDivs = document.getElementsByClassName("name");
for (var j = 0, divsLen = nameDivs.length; j < divsLen; j++) {
// set a counter to zero
var num = 0;
// I moved this loop inside
for (var i = 0, len = searchStrings.length; i < len; i++) {
var currentSearch = searchStrings[i].toUpperCase();
// only run the search if the text input is not empty (to avoid a blank)
if (str_needle !== "") {
// if the term is found, add 1 to the counter
if (nameDivs[j].textContent.toUpperCase().indexOf(currentSearch) !== -1) {
num++;
}
// display only if all the terms where found
if (num == searchStrings.length) {
nameDivs[j].style.display = "block";
}
}
}
}
}
<input type="text" id="edit_search" onkeyup="find_my_div();">
<input type="button" onClick="find_my_div();" value="Find">
<div id="product_0" class="name" style="display:none">Mac
<br/>Apple
<br/>
<br/>
</div>
<div id="product_1" class="name" style="display:none">PC
<br/>Windows
<br/>
<br/>
</div>
<div id="product_2" class="name" style="display:none">Hybrid
<br/>Mac PC Apple Windows
<br/>
<br/>
</div>
You can also see it on this version of your JSFiddle: http://jsfiddle.net/yk0Lhneg/1/

Add or Clear localStorage on button click and show the value in html

I have a code that uses localStorage and javascript. I tried to add more slots, like slot1, slot2, slot3 up to 5. I just copy and paste then change the variable names like like slot1, slot2, slot3 up to 5. But it won't work. Help will be appreciated so much.
Javascript:
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerText = slot;
function reduceSlot() {
if (slot >= 1) {
slot--;
localStorage.setItem("slot", slot);
if (slot > 0) {
document.getElementById('slot').innerText = slot;
} else {
document.getElementById('slot').innerText = "FULL";
document.getElementById("button1").style.display = "none";
}
}
}
document.getElementById("button1").onclick = reduceSlot;
function clearLocalStorage() {
localStorage.clear();
}
HTML:
<p id="slot">10</p>
Deduct
<button onclick="window.localStorage.clear();">Clear All</button>
Fiddle: http://jsfiddle.net/barmar/K8stQ/3/
not sure but. is this what you want to do?? working demo
i changed your code a bit.. you can change it into your liking later..
<span id="slot0">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(0)})()" ><br>
<span id="slot1">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(1)})()" ><br>
<span id="slot2">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(2)})()" ><br>
<span id="slot3">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(3)})()" ><br>
<span id="slot4">10</span><input type="button" value="Deduct" onclick="(function(){reduceSlot(4)})()" ><br>
<p>
<button onclick="clearAll()">Clear All</button>
</p>
and for the js...
ls = localStorage.getItem("slots") ;
if(!ls) { localStorage.setItem("slots", "10,10,10,10,10");
}
var slots = localStorage.getItem("slots").split(',').map(Number);
window.onload = updateSlots;
function updateSlots() { for(var i=0;i<slots.length;i++) {
document.getElementById('slot' + i ).innerHTML = slots[i] ;
}}
var reduceSlot = function(slotId) {
console.log(slots[slotId]) ;
if(slots[slotId] >= 1) {
slots[slotId]--; localStorage.setItem("slots",slots);
document.getElementById('slot' + slotId).innerHTML = slots[slotId];
}
else { document.getElementById('slot'+slotId).innerText = "FULL";
}
};
function clearAll() {
window.localStorage.clear();
slots = [10,10,10,10,10];
updateSlots();
}
Try this,
Script
window.ready = function() {
checkStorage();
}
function checkStorage() {
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerHTML = slot;
}
function reduceSlot() {
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
if (slot >= 1) {
slot--;
localStorage.setItem("slot", slot);
if (slot > 0) {
document.getElementById('slot').innerHTML = slot;
} else {
document.getElementById('slot').innerHTML = "FULL";
document.getElementById("button1").style.display = "none";
}
}
}
document.getElementById("button1").onclick = reduceSlot;
document.getElementById("clear").onclick = clear_me;
function clear_me() {
localStorage.clear();
checkStorage();
}
HTML
<p id="slot">10</p>
Deduct
<button id="clear">Clear All</button>
Demo

Categories