Yesterday I was created this Post. But I did'nt get any response from it. So I am creating this post. Now I have a jQuery autoclick script which is working with my datatables. But it is not working with document.getElementsByClassName. It is only working with document.getElementById. But I need to add it multiple section of page. Please convert my autoclick codes for class name.
can you make this script something like :
$(document).ready(function () {
$('.autoclick').autoclick({
Autoclick Script
var autoclickBtn = document.getElementsByClassName("autoclick");
autoclickBtn.addEventListener("click", () => {
console.log("Button clicked");
});
var interval = window.setInterval(() => {
autoclickBtn.click();
}, 2000);
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th class="autoclick">Points</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="99"></td>
<td><input type="text" value="55"></td>
<td><input type="text" value="45"></td>
<td><input type="text" value="75"></td>
</tr>
<tr>
<td><input type="text" value="89"></td>
<td><input type="text" value="72"></td>
<td><input type="text" value="79"></td>
<td><input type="text" value="39"></td>
</tr>
<tr>
<td><input type="text" value="97"></td>
<td><input type="text" value="12"></td>
<td><input type="text" value="25"></td>
<td><input type="text" value="19"></td>
</tr>
<tr>
<td><input type="text" value="22"></td>
<td><input type="text" value="32"></td>
<td><input type="text" value="19"></td>
<td><input type="text" value="43"></td>
</tr>
<tr>
<td><input type="text" value="49"></td>
<td><input type="text" value="18"></td>
<td><input type="text" value="63"></td>
<td><input type="text" value="74"></td>
</tr>
<tr>
<td><input type="text" value="37"></td>
<td><input type="text" value="49"></td>
<td><input type="text" value="58"></td>
<td><input type="text" value="37"></td>
</tr>
<tr>
<td><input type="text" value="28"></td>
<td><input type="text" value="19"></td>
<td><input type="text" value="67"></td>
<td><input type="text" value="47"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table>
<script type="">
$.fn.dataTable.ext.order['dom-text-numeric'] = function (settings, col) {
return this.api()
.column(col, { order: 'index' })
.nodes()
.map(function (td, i) {
return $('input', td).val() * 1;
});
};
$(document).ready(function () {
$('#example').DataTable({
order: [[2, 'asc']],
columns: [
{ orderDataType: 'dom-text-numeric' },
{ orderDataType: 'dom-text-numeric' },
{ orderDataType: 'dom-text-numeric' },
{ orderDataType: 'dom-text-numeric' },
],
});
});
</script>
<script type="text/javascript">
var autoclickBtn = document.getElementsByClassName("autoclick");
autoclickBtn.addEventListener("click", () => {
console.log("Button clicked");
});
var interval = window.setInterval(() => {
autoclickBtn.click();
}, 2000);
</script>
</body>
</html>