While working on a slider project, I wanted to steer clear of using jQuery and instead focus on vanilla JavaScript for the implementation.
The original jQuery code snippet that needed conversion:
setInterval(function() {
var $curr = $('#slider1 input[type=radio]:checked');
var $next = $curr.next('input');
if(!$next.length) $next = $('#slider1 input[type=radio]').first();
$next.prop('checked', true);
}, 2000);
Below is my attempted conversion to vanilla JavaScript, which unfortunately didn't work as intended. Can you help me identify what's causing the issue?
setInterval(() => {
let $curr = document.querySelectorAll('#slider1 input[type=radio]:checked'),
$next = $curr.nextSibling;
if (!$next.length) {
$next = document.querySelectorAll('#slider1 input[type=radio]').firstChild;
}
$next.setAttribute('checked', true);
}, 3000);(CSS styles excluded for brevity)<div class="csslider infinity" id="slider1">
<input type="radio" name="slides" checked="checked" id="slides_1" />
... (additional input elements) ...
</div>Edit
After some troubleshooting, I crafted this revised solution:
setInterval(function() {
var currentID = document.querySelector('input[name="slides"]:checked').id;
var idNoArr = currentID.split('');
var intIdNo = parseInt(idNoArr[1]);
var nextIdNo = intIdNo + 1;
var NextId = idNoArr[0] + '' + nextIdNo;
var NextInput = document.getElementById(NextId);
if (!NextInput) {
NextId = idNoArr[0] + '_1';
}
document.getElementById(NextId).checked = true;
}, 1000);