I need to create an if statement in Js fetching when there's only 1 left (product) in stock. How would I go about this?
HTML on productpage:
<div id="product-spec">
<div class="row">
<ul class="col-xs-12">
<li class="h4">
<span class="availabilty"
<span class="small">1 left</span>
</span>
</li>
</ul>
</div>
</div>
My Javascript so far:
if (.small == 1 left) {
// execute this code
}
W3 Schools - If Statements doesn't make me more sane.
try
if(document.querySelectorAll(".small")[0].innerHTML==="1 left"){
// get funky
}
[EDIT]
if($(".small").eq(0).text() == "1 left"){
$(".small").eq(0).prepend( "<div style="lots of styling"></div>" );
}
You write like this
var product = document.getElementsByClassName('modal_link')[0];
// if inner text exist
if(product.innerText) {
// getting count products from string
var countProduct = parseInt(product.innerText, 10);
if(countProduct === 1) {
console.log('Left');
}
}
Related
I have this short bit of code to sort / ascend div by number. But I want to add other conditions to sort by. Right now, it's only sorting it just based on points class. But I want it to also apply conditions on times and combine with points.
Generally these divs sort ascend from large number to low number. If the number is equal, it will show those whose time is less. If the number is equal, it will search to see which times is the lowest. And it will show it First.
$(function(){
var sortedList = $('.contest_entry').toArray().sort(function(lhs, rhs){
return parseInt($(rhs).children("span.points").text(),10) - parseInt($(lhs).children("span.points").text(),10);
});
$("#list").html(sortedList);
});
.contest_entry
{
padding:10px;
background: #eee;
margin:10px 0px;
}
.points
{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="list">
<div class="contest_entry">
<span class="points">14</span>
<span class="times"> 12:39 </span>
</div>
<div class="contest_entry">
<span class="points">16</span>
<span class="times"> 09:55 </span>
</div>
<div class="contest_entry">
<span class="points">19</span>
<span class="times"> 17:19 </span>
</div>
<div class="contest_entry">
<span class="points">19</span>
<span class="times"> 17:34 </span>
</div>
<div class="contest_entry">
<span class="points">19</span>
<span class="times"> 17:20 </span>
</div>
</div>
In summary, I want to add multiple conditions to filter or sort the divs.
Try this code please
$(function(){
var sortedList = $('.contest_entry').toArray().sort(function(lhs, rhs){
var lhsPoints = parseInt($(lhs).find(".child span.points").text(),10);
var rhsPoints = parseInt($(rhs).find(".child span.points").text(),10);
if (lhsPoints === rhsPoints) {
// Compare the "times" class if the "points" class is equal
return $(lhs).find(".child span.times").text() > $(rhs).find(".child span.times").text() ? 1 : -1;
} else {
return rhsPoints - lhsPoints;
}
});
$("#list").html(sortedList);
});
Try this script please
$(function(){
var sortedList = $('.contest_entry').toArray().sort(function(lhs, rhs){
var lhsPoints = parseInt($(lhs).children("span.points").text(),10);
var rhsPoints = parseInt($(rhs).children("span.points").text(),10);
if (lhsPoints === rhsPoints) {
// Compare the "times" class if the "points" class is equal
return $(lhs).children("span.times").text() > $(rhs).children("span.times").text() ? 1 : -1;
} else {
return rhsPoints - lhsPoints;
}
});
$("#list").html(sortedList);
});
I put a main div in it, but for loop broke after one child recursion ends, what should I do to check every children with recusion?
here is output:
direct: DIV main
direct: DIV basicFrame
direct: DIV basicFrame__name
direct: SPAN name
and loop broke after a first recursion ends.
as you can see, after first recursion (main -> basicFrame -> basicFrame__name -> name)
its loop broke (not passed to next children, infoFrame)
output supposed to print these too
direct: DIV infoFrame
direct: SPAN info
..and etc
this is js code
var typeDisplay = async function (target, findType) {
if (findType == "id")
{
target = document.getElementById(target);
target = [target];
}
else if (findType == "direct")
{
console.log("direct: " + target.tagName + " " + target.className); //output maker
target = [target];
}
for (let ind = 0; ind < target.length; ind++)
{
const label = target[ind]; //get label from selection
if (label != null)
{
for (let ind; ind < label.children.length; ind++); //get children of label
{
const subLabel = label.children[ind];
if (typeof(subLabel) == "object")
{
// doing some work
typeDisplay(subLabel, "direct"); //recursion to it's children
}
}
}
}
return;
};
and this is input html form for js script
<div class="main" id="typeTarget"> <!--first parameter of function-->
<div class="basicFrame">
<div class="basicFrame__name">
<span class="name">
wow
</span>
<button class="pen">
<i class="fas fa-file-image"></i>
</button>
</div>
<div class="faceFrame">
<img src="image.png" alt="no image" title="image">
</div>
</div class="infoFrame">
<span class="info">
Info :
<br>
<ul>
<li>this is list</li>
<li>list :
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</span>
</div>
<!--load java script-->
<script>
typeDisplay("typeTarget", "id");
</script>
Looking to remove a class if a certain button is clicked.
<div class="slide-container">
<section class="about" id="slide-0">
<div class="menu-total">
<nav class="nav">
<button class="nav_link home" onclick="slideTo('slide-2')">HOME</button>
<button class="nav_link about" onclick="slideTo('slide-0')">ABOUT</button>
<button class="nav_link fun-stuff" onclick="slideTo('slide-1')">FUN STUFF</button>
<button class="nav_link professional" onclick="slideTo('slide-3')">PROFESSIONAL</button>
<button class="nav_link contact" onclick="slideTo('slide-4')">CONTACT</button>
</nav>
<div class="hamburger">
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
</div>
</div>
The one I want to remove the class on is the HOME button. So "slideTo('slide-2)". If it's clicked on the others then the class is kept. I believe someone is either wrong with my loop or not getting the ID correctly of the items/
function slideTo(slideId) {
const slide = document.getElementById(slideId);
slide.scrollIntoView({
behavior: 'smooth'
})
// above this line works fine
let nonHome = document.querySelectorAll('.slide-container section');
let nonHomeID = document.getElementById('slide-2');
var i;
setTimeout(function(){
for (i=0; i < nonHome.length; i++ ){
// i believe it's somewhere here it is wrong
if (nonHome[i].id != nonHomeID){
nonHome[i].classList.add("nav-visibility");
} else{
nonHomeID.classList.remove("nav-visibility");
}
}
}, 1000)
}
If you can use jquery library, you can write in the HTML:
<button class="nav_link" data-value="home">HOME</button>
...
and then in the JS code:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // Get the data-value clicked
$(".nav_link").each(function() { // Loop through all elements of the class 'nav-link'
var v = $(this).data("value");
if (v == valueClicked) {
$(this).removeClass("nav-visibility");
} else {
$(this).addClass("nav-visibility");
}
)
}
Not much simpler, but the HTML is cleaner.
Simpler version if it is not required to browse through all buttons at each button click:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // The value of the button clicked by the user
if (valueClicked == "home") {
$(this).removeClass("nav-visibility");
console.log('remove')
} else { $(this).addClass("nav-visibility");
console.log('add')
}
});
I'm trying to set up pagination for some blog posts. It works with the first page, and I check my tests to see if the loop is actually populating the "postsToDisplay" array (which it does), but when I click the second-page button, nothing shows up. I can click the first-page button and it brings the first page of posts back up. For some reason, it won't push the new arrays to the page though.
I've tried adding and taking away tests to see what is working. The array is definitely being populated, and the loop is going through the correct "i" values just fine.
Here's some edited code to reproduce my problem:
//Use this as "scripts.js"
$(document).ready(function() {
var realBlog = document.getElementsByClassName("realBlog");
var postsPerPage = 2;
var $pagination = $(".pagination")
function showPage(page) {
$(realBlog).hide();
let postsToDisplay = [];
for (let i = 0; i < realBlog.length; i += 1) {
if (i >= page * postsPerPage && i <= page * postsPerPage + postsPerPage - 1) {
postsToDisplay.push(realBlog[i]);
console.log(i); //Test to see if the loop is running the correct numbers
$(postsToDisplay[i]).show();
}
}
console.log(postsToDisplay); //Test to see if the array is full
return postsToDisplay;
}
showPage(0);
function createPageNumbers() {
let createUl = document.createElement("ul");
createUl.className = "pageNumbers";
for (let i = 1; i <= Math.ceil(realBlog.length/2); i += 1) {
let createLi = document.createElement("li");
let createA = document.createElement("a");
createA.href = "#" + i;
createA.textContent = i;
createLi.className = "pageButton";
createLi.append(createA);
createUl.append(createLi);
$(".pagination").append(createUl);
createA.addEventListener("click", () => {
showPage(i-1);
});
}
}
createPageNumbers();
});
//Use this as index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="container realBlog">
<h1 class="realBlogTitle threeDText">Title</h1>
<p class="entry"></p>
<div class="entryInfo">
<span class="tag1"></span>
<span class="tag2"></span>
<span class="date"></span>
<span class="time"></span>
</div>
<div class="borderBottom"></div>
</div>
<div class="pagination"></div>
</body>
</html>
Page 1 should show posts 1 and 2, page 2 should show post 3.
Alright, I found the answer, and of course, it's a silly mistake. I have this little snippet: $(postsToDisplay[i]).show();
I'm not sure why I'm trying to show each 'i' when I can just show the whole array... So the fix is $(postsToDisplay).show();
I have the following HTML code and I'm really struggling to come up with a solution for the following: (pseudo code, javascript or jquery answers please, but would prefer jquery)
When the page loads, hide all of the list items except for the first
5 (display only the first five, select by unique id)
Two buttons on
the bottom of the list, one for "older" one for "newer".
When older btn is
pressed, show the next 5 on the list (might just be one list-item if
there is 6 altogether)
When "newer" is pressed, show the 5 in front of the current list-items
Hide newer button if already on the first page 5
code:
<div class="container">
<div class="list-item" id="13">
<p>First Item</p>
</div>
<div class="list-item" id="12">
<p>Second Item</p>
</div>
<div class="list-item" id="11">
<p>Third Item</p>
</div>
<div class="list-item" id="10">
<p>Fourth Item</p>
</div>
<div class="list-item" id="9">
<p>Fifth Item</p>
</div>
<div class="list-item" id="8">
<p>Sixth Item</p>
</div>
… ( more list-items)
</div>
<button onclick="showOlder()">Older</button>
<button onclick="showNewer()">Newer</button>
After further research and trial and error I Was able to come up with a solution. I thought I'd post it if anyone else is looking for something similar. Please note I'm not an expert in jQuery and this code can probably be done in a more optimised way.
$(document).ready(function () {
btnNewer.hide();
for (i = numOfItems; i >= 1; i--) {
if (i == numOfItems - (5 * page)) {
page++;
}
$("#" + i).addClass("Page-" + page);
}
for (i = 0; i <= numOfPages; i++) {
if (i != 1) {
hidePage(i);
}
}
});
var numOfItems = $('div.list-item').length;
var numOfPages = Math.ceil(numOfItems / 5);
var page = 1;
var currentPage = 1;
var btnOlder = $("#showOlder")
var btnNewer = $("#showNewer")
function hidePage(pageNum) {
$('.Page-' + pageNum).hide();
}
function showPage(pageNum) {
$('.Page-' + pageNum).show();
}
btnOlder.on("click", function () {
hidePage(currentPage);
currentPage++;
showPage(currentPage);
CheckIfOnLastPage();
CheckIfOnFirstPage();
})
btnNewer.on("click", function () {
hidePage(currentPage);
currentPage--;
showPage(currentPage);
CheckIfOnFirstPage();
CheckIfOnLastPage();
})
function CheckIfOnFirstPage() {
if (currentPage == 1) {
btnNewer.hide();
} else {
btnNewer.show();
}
}
function CheckIfOnLastPage() {
if (currentPage == numOfPages) {
btnOlder.hide();
} else {
btnOlder.show();
}
}