We Keep Coding

Cannot get value of div

I have problem with getting value of a div with class="idC". I need this value to remove object from my array. I know I probably gonna need to use parseInt but all I'm getting with this code is rowid: undefined when I use console.log("rowid: " + bikeId.value). bikeRow.remove(); works fine. It removes the row I want to.
const buttonDel = document.querySelectorAll(".deleteC");
buttonDel.forEach(button => {
console.log("jazda");
button.addEventListener('click', () => {
const bikeRow = button.parentNode;
const bikeId = bikeRow.firstChild;
if (!window.confirm())
return;
console.log("rowid: " + bikeId.value);
bikeRow.remove();
//bikeStorage.removeBike(bikeId.value);
})
})
<div class="bikeRows">
<div class="bikeRow">
<div class="idC"></div>${bike.id}</div>
<div class="frameC">${bike.frame}</div>
<div class="suspC">${bike.susp}</div>
<div class="wheelC">${bike.wheel}</div>
<div class="typeC">${bike.constructor.name}</div>
<div class="deleteC"><button class="delButton" id="${bike.id}">Delete</button></div>
</div>
</div>

You have invalid HTML and you really should delegate
I added the ID as a data-attribute to the row like this
<div class="bikeRow" data-id="${bike.id}">
Makes the code much simpler to debug and extend
document.querySelector(".bikeRows").addEventListener("click", e => {
const tgt = e.target.closest("button");
if (!tgt.matches(".delButton")) return; // not a delete button
if (!window.confirm("Sure?")) return; // they cancelled
const bikeRow = tgt.closest("div.bikeRow"),
id = bikeRow.dataset.id; // the ID to remove from the storage
bikeRow.remove();
//bikeStorage.removeBike(id);
})
<div class="bikeRows">
<div class="bikeRow" data-id="ID1">
<div class="idC">ID1</div>
<div class="frameC">Frame 1</div>
<div class="suspC">Susp 1</div>
<div class="wheelC">Wheel 1</div>
<div class="typeC">Constructor name 1</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID2">
<div class="idC">ID 2</div>
<div class="frameC">Frame 2</div>
<div class="suspC">Susp 2</div>
<div class="wheelC">Wheel 2</div>
<div class="typeC">Constructor name 2</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID3">
<div class="idC">ID 3</div>
<div class="frameC">Frame 3</div>
<div class="suspC">Susp 3</div>
<div class="wheelC">Wheel 3</div>
<div class="typeC">Constructor name 3</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
</div>

How to toggle/switch the classes between three or more divs in a sequence?

How can I easily toggle/switch the classes between three or more divs in a sequence by click?
Example html:
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="next">Next</div>
<div class="back">Back</div>
This way just works with two:
$(".next, .back").click(function(){
$(".box").toggleClass("active");
});

Simply to check if nth-child has the active class and loop.
$(".next").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i+1)%$(".box").length)+1)+")").addClass('active');
return false;
}
});
});
$(".back").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i-1)+$(".box").length)%$(".box").length+1)+")").addClass('active');
return false;
}
});
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="back">Back</div>
<div class="next">Next</div>
</div>

This is pretty generic
$(".nav").on("click", function() {
var dir = $(this).is(".next") ? 1 : -1; // which direction are we going?
var active = $(".box.active").index() - 1;
var $boxes = $(".box");
active += (1 * dir);
if (active < 0) active = $boxes.length - 1; // wrap
else if (active >= $boxes.length) active = 0;
$(".box").removeClass("active");
$(".box").eq(active).addClass("active");
});
.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<br/>
<div class="nav back">Back</div>
<div class="nav next">Next</div>

I've created another solution that gets the button's ID (which I've added) and uses that to dictate where to go.
var box = $('.box');
var maxBoxes = box.length;
$("#nextBtn, #backBtn").click(function() {
var getBtn = $(this).get(0).id,
activeBox = $('.box.active'),
position = activeBox.index();
activeBox.removeClass('active');
if (getBtn === 'nextBtn') {
(position == maxBoxes) ? box.eq(0).addClass('active'): activeBox.next().addClass('active');
} else {
(position === 1) ? box.last().addClass('active'): activeBox.prev().addClass('active');
}
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box active">Box 3</div>
<div id="nextBtn" class="next">Next</div>
<div id="backBtn" class="back">Back</div>

I think that the following should be efficient, because it will not do unnecessary checks.
var last = $(".active")
function toggle(dir){
var future = last[dir]();
if(!(future.length && future.hasClass('box'))) {
return;
}
last.toggleClass("active")
last = future
last.toggleClass("active");
}
$(".next").click(toggle.bind(void 0, 'next'));
$(".back").click(toggle.bind(void 0, 'prev'));

Check, whether an object has class with a certain number in its name

My situation is the following: I have several classes with names obj1, obj2, ob3 and an output object. When one of obj# is clicked, i want a corresponding text to be added in output object. Here is my code:
<div class="obj obj1">Object 1</div>
<div class="obj obj2">Object 2</div>
<div class="obj obj3">Object 3</div>
<div class="output"></div>
And JavaScript:
function whichObject($obj) {
for (i = 0; i < 3; i++) {
switch($obj.hasClass("obj" + (i+1).toString())) {
case "obj1":
$(".output").text("Object 1");
break;
case "obj2":
$(".output").text("Object 2");
break;
case "obj3":
$(".output").text("Object 3");
break;
}
}
$(".obj").on("click", function () {
whichObject($(this));
});
I need the loop because the number of obj# objects may increase over time and I cannot predict a certain amount of obj# objects.
I'm surely missing something or the whole approach is wrong.

$('.obj').on('click', function(e){
$('.output').text(e.target.innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="obj obj1">Object 1</div>
<div class="obj obj2">Object 2</div>
<div class="obj obj3">Object 3</div>
<div class="output"></div>

So, if somebody is interested I solved it this way:
function whichObject(obj) {
var $obj = $(obj);
if ($obj.attr("id") === "obj1") {
$(".output").text("Object 1");
} else if ($obj.attr("id") === "obj2") {
$(".output").text("Object 2");
} else if ($obj.attr("id") === "obj3") {
$(".output").text("Object 3");
}
}
$(".obj").on("click", function () {
whichObject(this);
});
while adding the following IDs to my HTML:
<div class="obj" id="obj1">Object 1</div>
<div class="obj" id="obj2">Object 2</div>
<div class="obj" id="obj3">Object 3</div>
<div class="output"></div>

Jquery number counter combines in string

I got those numbers working but the letter "T" has been replaced so that it won't show. Do you guys have any idea of how to get it works. Thank you very much.
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
$('.number').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 8000,
easing: 'swing',
step: function (now) {
$(this).text(commaSeparateNumber(Math.ceil(now)));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="count"><div class="number">30</div></div>
<div class="text">text 1</div>
</div>
<div class="col-md-4">
<div class="count"><div class="number">3000</div></div>
<div class="text">text 2</div>
</div>
<div class="col-md-4">
<div class="count"><div class="number">700<span>T</span></div></div>
<div class="text">text 3</div>

The problem with your code was it was replacing whole the DOM structure include span containing 'T' so DOM structure has been updated.
Here is your updated code
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
$('.number').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 8000,
easing: 'swing',
step: function (now) {
$(this).text(commaSeparateNumber(Math.ceil(now)));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="count"><div><span class="number">30</div></div>
<div class="text">text 1</div>
</div>
<div class="col-md-4">
<div class="count"><div><span class="number">3000</span></div></div>
<div class="text">text 2</div>
</div>
<div class="col-md-4">
<div class="count"><div><span class="number">700</span><span>T</span></div></div>
<div class="text">text 3</div>

Jquery - Get div number from a list by hovering

How can a get the number by hovering mouse over the div?
HTML
<div id="log"></div>
<div id="myList">
<div class="divHV">One </div>
<div class="divHV">Two</div>
<div class="divHV">3 </div>
<div class="divHV">Blub </div>
<div class="divHV">Peter</div>
<div class="divHV">6 House</div>
<div class="divHV">last one is 7</div>
</div>
JS
$(document).ready(function() {
$('.divHV').hover(function()
{
XX = '';
$('#log').html('This is the div number '+XX+' <br />');
}, function ()
{
$('#log').html('');
});
});
Working exmaple
http://jsfiddle.net/9R4aC/2/

XX = $(this).index();
but that will start from 0 you can add +1 if you want..
http://jsfiddle.net/9R4aC/2/

$(document).ready(function() {
$('.divHV').each(function(i) {
$(this).hover(function() {
XX = i;
$('#log').html('This is the div number ' + XX + ' <br />');
}, function() {
$('#log').html('');
});
});
});
http://jsfiddle.net/9R4aC/3/