Develop Reference

Count DIVs with a dynamic class inside of other DIVs with a dynamic class

I have this horrendous code, it works, but... I am sure you are all gagging at the site of it. What can be done to dynamically place the resortcode into those classes to clean this code up?
What I am trying to achieve is to add the result count in the resortheader for available rooms under each resort. This works, I just know there has to be a better way, but I am not sure how to achieve that.
The code in question is the second set.
Initial code that creates my room DIVs:
let searchresult = function(response) {
let resortCodes = new Set();
for (let j = 0; j < response.length; j++) {
resortCodes.add(response[j].resortcode); // add only happens if the resortcode isn't already in resortCodes
let divID = 'results-' + response[j].resortcode;
let container = document.getElementById(divID);
let price = response[j].points.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
if (response[j].available < 1) {
var available = 'soldoutresult';
var resultClass = response[j].resortcode + 'soldout';
var btn = '<button type="button" class="soldout">SOLD OUT</button>';
}
else {
var available = 'availableresult';
var resultClass = response[j].resortcode + 'roomavail';
var btn = '<button type="button" class="booknow">BOOK NOW</button>';
}
container.innerHTML += `
<div class="${available} roomresults ${resultClass}">
<div class="roomthumb" style="background-image:url(${response[j].roomimgthumb});">
<center><button class="myBtn roomdetailsbtn" data-target="#modal${response[j].roomcode}" data-toggle="modal">Room Details</button></center>
</div>
`
}
};
To Count My DIVs.
let countResults = function(response){
var countAKV = $('div.AKVroomavail').length;
var countAKV2 = $('div.AKV2roomavail').length;
var countAULV = $('div.AULVroomavail').length;
var countBLT = $('div.BLTroomavail').length;
if(countAKV == 0){
document.getElementById('count-akvjh').innerHTML='Sold Out';
}
else {
document.getElementById('count-akvjh').innerHTML = countAKV + " Results";
}
if(countAKV2 == 0){
document.getElementById('count-akvkv').innerHTML='Sold Out';
}
else {
document.getElementById('count-akvkv').innerHTML = countAKV2 + " Results";
}
if(countAULV == 0){
document.getElementById('count-aul').innerHTML='Sold Out';
}
else {
document.getElementById('count-aul').innerHTML = countAULV + " Results";
}
if(countBLT == 0){
document.getElementById('count-blt').innerHTML='Sold Out';
}
}
The HTML:
<div id="akvjhcontainer" class="resortcontainer">
<div id="akvjhheader" class="resortheader">
<div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Jambo House</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div class="collapseBTN"><span id="count-akvjh"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV"><i></i></button></div>
</div>
<div id="results-AKV" class="results-AKV collapse show"></div>
</div>
<div id="akvkvcontainer" class="resortcontainer">
<div id="akvkvheader" class="resortheader">
<div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Kidani Village</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div class="collapseBTN"><span id="count-akvkv"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV2"><i></i></button></div>
</div>
<div id="results-AKV2" class="results-AKV2 collapse show"></div>
</div>
<div id="aulcontainer" class="resortcontainer">
<div id="aulheader" class="resortheader">
<div class="headertext"><p class="resortnametext">Aulani</p><p class="locationtext">Kapolei, Hawaii</p></div>
<div class="collapseBTN"><span id="count-aul"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AULV"><i></i></button></div>
</div>
<div id="results-AULV" class="results-AULV collapse show"></div>
</div>
<div id="bltcontainer" class="resortcontainer">
<div id="bltheader" class="resortheader">
<div class="headertext"><p class="resortnametext">Bay Lake Tower</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div class="collapseBTN"><span id="count-blt"class="rescount"></span><button class="collstyle" data-toggle="collapse" data-target="#results-BLT"><i></i></button></div>
</div>
<div id="results-BLT" class="results-BLT collapse show"></div>
</div>
Any help is appreciated.

I figured it out. I came across this fiddle: http://jsfiddle.net/dv5gtfcw/
That was submitted as the answer here: counting divs inside div
HTML"
<div id="akvjhcontainer" class="resortcontainer">
<div id="akvjhheader" class="resortheader">
<div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Jambo House</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div class="collapseBTN"><span class="countDiv0"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV"><i></i></button></div>
</div>
<div id="results-AKV" class="results-AKV collapse show resultcontainer"></div>
</div>
<div id="akvkvcontainer" class="resortcontainer">
<div id="akvkvheader" class="resortheader">
<div class="headertext"><p class="resortnametext">Animal Kingdom Villas - Kidani Village</p><p class="locationtext">Walt Disney World - Orlando, Florida</p></div>
<div class="collapseBTN"><span class="countDiv1"></span><button class="collstyle" data-toggle="collapse" data-target="#results-AKV2"><i></i></button></div>
</div>
<div id="results-AKV2" class="results-AKV2 collapse show resultcontainer"></div>
</div>
$('.resultcontainer').each(function(i) {
var n = $(this).children('.roomavailable').length;
$(".countDiv"+i).text(n + " Results");
console.log(n);
});
let searchresult = function(response) {
let resortCodes = new Set();
for (let j = 0; j < response.length; j++) {
resortCodes.add(response[j].resortcode); // add only happens if the resortcode isn't already in resortCodes
let divID = 'results-' + response[j].resortcode;
let container = document.getElementById(divID);
let price = response[j].points.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
if (response[j].available < 1) {
var available = 'soldoutresult';
var status = 'soldout';
var btn = '<button type="button" class="soldout">SOLD OUT</button>';
}
else {
var available = 'availableresult';
var status = 'available';
var btn = '<button type="button" class="booknow">BOOK NOW</button>';
}
container.innerHTML += `
<div class="${available} roomresults room${status}">

Jquery dynamically wrap bootstrap columns in rows

I have some code formatted as following:
<div id="section">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
There can be any number (even or odd) of columns in this section.
What I want is for it to be re-formatted like this:
<div id="section">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
</div>
</div>
Here is my attempt to do so:
for (var x = 0; x < $('#section').children().length; x+=2) {
var firstSection = $('#section').children().eq(x);
if ($('#section').children().length >= x + 1) {
var secondSection = $('#section').children().eq(x + 1);
var finalSection = '<div class="row">' + firstSection.parent().html() + secondSection.parent().html() + '</div>';
secondSection.remove();
}
else {
var finalSection = '<div class="row">' + firstSection.html() + '</div>';
}
firstSection.remove();
$('#section').append(finalSection);
}
If anyone wants some extra fun, you could try allowing this to handle variable column widths as well! (Although I don't need that for my project).

Hers is an example that loops through the columns, similar to what you are attempting now.
It uses find(), append() and clone() to accomplish this task. As an added feature I wrapped it into a function that accepts the row size as an argument.
//breaks up the section into rows of size 'rowSize', 2 by default.
function breakitup(rowSize = 2) {
var $section = $("#section"); //get the section
var $row = $("<div class='row'>"); //make a template for a row
var cols = $section.find("div"); //get the columns
var working; //tmp variable for the current row
for (var i = 0; i < cols.length; i++) {
if (i % rowSize == 0) working = $row.clone(); //clone the template when appropriate
$(working).append(cols[i]); //add the column to the row
if ($(working).children().length == rowSize)
$section.append(working); //add the row to the section as appropriate
}
$section.append(working); //add the last row
}
//call our fancy function
breakitup();
.row {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section">
<div class="col-xs-6">test</div>
<div class="col-xs-6">test2</div>
<div class="col-xs-6">test3</div>
<div class="col-xs-6">test4</div>
<div class="col-xs-6">test5</div>
<div class="col-xs-6">test6</div>
<div class="col-xs-6">test7</div>
</div>

You can use .wrapall(), .add() and :even selector:
$('#section > div:even').each(function(idx, ele) {
$(ele).add($(this).next()).wrapAll($('<div/>', {class: 'row'}));
});
console.log($('#section').html());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section">
<div class="col-xs-6">1</div>
<div class="col-xs-6">2</div>
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
<div class="col-xs-6">5</div>
<div class="col-xs-6">6</div>
<div class="col-xs-6">7</div>
</div>

Update text in <h4> with the same ID/Class on button/link click

I have two <h4> with the same class of "modal-title", and two buttons with ID & Class - "Reserve" and "Enquire". By pressing on button "Reserve", I want the H4 to change to "Reserve", and when clicking on "Enquire" button, the text in H4 should change accordingly.
The problem is, I have two containers which use the same buttons to interact with 'fixed' H4 element, if I use "Reserve" button in Container 1, the H4 will change successfully, if I then proceed clicking on "Enquire" button in Container 2, the H4 element will not update to "Enquire" text, but it will however change if I use "Enquire" button in Container 1 instead. Why is that? And how can I make them function simultaneously? (in parallel) In fact, is there a simple way of achieving this?
<h4 class="modal-title" id="modal-title">Modal Heading</h4>
Container 1:
<div class="col-sm-6 col-md-6">
<a id="reserve" class="reserve">Change to Reserve</a>
<a id="enquire" class="enquire">Change to Enquire</a>
</div>
Container 2:
<div class="col-sm-6 col-md-6">
<a id="enquire" class="enquire">Change to Enquire</a>
<a id="reserve" class="reserve">Change to Reserve</a>
</div>
JavaScript:
var btnEnquire = document.getElementById("enquire");
var btnReserve = document.getElementById("reserve");
btnEnquire.onclick = function(){
var enquireTxt = document.getElementsByClassName("modal-title");
for (var i = 0; i < enquireTxt.length; i++) {
enquireTxt[i].innerText = "Enquire";
}
}
btnReserve.onclick = function(){
var reserveTxt = document.getElementsByClassName("modal-title");
for (var i = 0; i < reserveTxt.length; i++) {
reserveTxt[i].innerText = "Reserve";
}
}
(According to a few StackOverflow comments, this is the only way to return a value when using getElementsByClassName)

You should never assign the same Id to multiple elements. Instead, use the class reference only and loop over the results (like you did with 'modal-title') to add your click handlers.
var btnEnquire = document.getElementsByClassName("enquire");
var btnReserve = document.getElementsByClassName("reserve");
for (var i = 0; i < btnEnquire.length; i++) {
btnEnquire[i].onclick = function(){
var enquireTxt = document.getElementsByClassName("modal-title");
for (var i = 0; i < enquireTxt.length; i++) {
enquireTxt[i].innerText = "Enquire";
}
}
}
for (var i = 0; i < btnReserve.length; i++) {
btnReserve[i].onclick = function(){
var reserveTxt = document.getElementsByClassName("modal-title");
for (var i = 0; i < reserveTxt.length; i++) {
reserveTxt[i].innerText = "Reserve";
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="modal-title" id="modal-title">Modal Heading</h4>
<div class="col-sm-6 col-md-6">
<a class="reserve" href="#">Change to Reserve</a>
<a class="enquire" href="#">Change to Enquire</a>
</div>
<div class="col-sm-6 col-md-6">
<a class="enquire" href="#">Change to Enquire</a>
<a class="reserve" href="#">Change to Reserve</a>
</div>
Would be cleaner even to use an id only for modal-title so you wouldn't need the nested loop.

Here's an example of how you can avoid duplicate ids, but handle groups of elements. It isolates the repetition of the function by extracting that and then just calling the function with the necessary data via the button clicks.
window.addEventListener("DOMContentLoaded", function(){
var btnEnquire = document.getElementById("btnEnquire");
var btnReserve = document.getElementById("btnReserve");
var modals = document.getElementsByClassName("modal-title");
// 1. You can keep the button event handlers separate *****
btnEnquire.addEventListener("click", function(){
changeVal("Enquire");
});
btnReserve.addEventListener("click", function(){
changeVal("Reserve");
});
// *********************************************************
// 2. Or, you could combine into more compact code: ********
var buttons = document.querySelectorAll(".myButton");
buttons.forEach(function(button){
button.addEventListener("click", function(){
changeVal(this.textContent);
});
});
// *********************************************************
// The main functionality has been extracted and exists only once
// However, it will produce different results based on what you
// pass into it.
function changeVal(val){
for (var i = 0; i < modals.length; i++) {
modals[i].textContent = val;
}
}
});
<button id="btnEnquire" class="myButton">Enquire</button>
<button id="btnReserve" class="myButton">Reserve</button>
<h4 class="modal-title" id="modal-title">Modal Heading</h4>
Container 1:
<div class="col-sm-6 col-md-6">
<a id="reserve" class="reserve">Change to Reserve</a>
<a id="enquire" class="reserve">Change to Enquire</a>
</div>
<h4 class="modal-title" id="modal-title">Modal Heading</h4>
Container 2:
<div class="col-sm-6 col-md-6">
<a id="enquire" class="reserve">Change to Enquire</a>
<a id="reserve" class="reserve">Change to Reserve</a>
</div>

Improve this "next","previous" script, so that it could go up to atleast 3

I am trying to create a column containing items, within this column you can go to "next" or "prev" page.
This works fine and quick!
Now here my question is
How do I create up to page 8 or even more, so that you could scroll through the pages?.
I am trying something with this, but I somehow cant implement it into html
function next() {
var nextUrl = "Page + (index+1)";
}
function back() {
var prevUrl = "Page + (index-1)";
}
Here is my current setup
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("dit bestaat niet");
return;
}
var pages = document.getElementsByClassName('page');
for(var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Page1" class="page" style="">
page 1
</div>
<div id="Page2" class="page" style="display:none">
page 2
</div>
<div class="column-wrapper">
<div class="pagination paginatioon--full">
<p>
<span onclick="show('Page1');">
prev
</span>
<span onclick="show('Page2');">
next </span>
</p>
</div>
</div>

You can do something like this :
var currentPageId = 1;
var totalpages = $('.page').length;
$('.prev').click(function(e) {
if (currentPageId > 1) {
currentPageId--;
show('Page' + currentPageId);
}
});
$('.next').click(function(e) {
if (currentPageId < totalpages) {
currentPageId++;
show('Page' + currentPageId);
}
});
function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
alert("dit bestaat niet");
return;
}
var pages = document.getElementsByClassName('page');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
ele.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Page1" class="page" style="">
page 1
</div>
<div id="Page2" class="page" style="display:none">
page 2
</div>
<div id="Page3" class="page" style="display:none">
page 3
</div>
<div class="column-wrapper">
<div class="pagination paginatioon--full">
<p>
<span class='prev'>
prev
</span>
<span class='next'>
next </span>
</p>
</div>
</div>

Second hide and show div with link

So, yesterday I got advice with my html code which shows a div with text when I press on a link.
This is what I have https://jsfiddle.net/4qq6xnfr/3/
Got any idea after I get a div to show, an example if I click "felge"( in english wheels) I get BBS ENKEI and KONIG, I want to make those three also clickable to get a third div next to them, so basicly when i pick wheel from first div, bbs, enkei and konig appear and then those are clickable too, and then I can pick one of those from the second div to show a third one.
I tried this :
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="menu">
<li>Felge</li>
<li>Gume</li>
<li>Branici</li>
<li>Farovi</li>
</ul>
</div>
<div class="col-md-3">
<div class="nav nav-pills nav-stacked div" id="content1">
<ul>
---> <li>BBS</li>
<li>ENKEI</li>
<li>KONIG</li>
</ul>
</div>
<div class="div" id="content2">
<p>Michelin</p>
<p>Hankook</p>
<p>Sava</p>
</div>
<div class="div" id="content3">
<p>AMG</p>
<p>Brabus</p>
<p>Original</p>
</div>
<div class="div" id="content4">
<p>Angel Eyes</p>
<p>Devil Eyes</p>
<p>Original</p>
</div>
</div>
where I added a href in the second div, its marked with an arrow in the code above and did the same script with diferent names as for the first hide/show div but it doesnt work as it should. How should/could I do this?

Hope this may help you adding subcontent divs
<div class="col-md-4">
<div class="div" id="subcontent1">
<p>BBS</p>
<p>ENKEI</p>
<p>KONIG</p>
</div>
<div class="div" id="subcontent2">
<p>Michelin</p>
<p>Hankook</p>
<p>Sava</p>
</div>
<div class="div" id="subcontent3">
<p>AMG</p>
<p>Brabus</p>
<p>Original</p>
</div>
<div class="div" id="subcontent4">
<p>Angel Eyes</p>
<p>Devil Eyes</p>
<p>Original</p>
</div>
</div>`
and adding another javascript function
function showsub(id) {
var number = id.replace('sublink', '');
var blocks = document.querySelectorAll("[id^=subcontent");
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.display = 'none';
}
document.querySelector('#subcontent' + number).style.display = 'block';
}
function show(id) {
var number = id.replace('link', '');
var blocks = document.querySelectorAll("[id^=content");
var subblocks = document.querySelectorAll("[id^=subcontent");
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.display = 'none';
}
for (var j = 0; j < subblocks.length; j++) {
subblocks[j].style.display = 'none';
}
document.querySelector('#content' + number).style.display = 'block';
}
and position it according to where you need