Consider an anchor tag for instance: <a href="/stats/ABCXYZ/1">ABCXYZ</a> I want to be able to extract the text ABCXYZ and pass it to myFunction as an argument. This anchor tag is one of the elements of the following gridjs table:
<script>
new gridjs.Grid({
columns: [
{ id: 'serial', name: 'Serial' },
{ id: 'version', name: 'Version' },
{ id: 'is_active', name: 'Active=1, Stopped=0' },
{
id: 'action',
name: 'Stop',
formatter: (cell, row) => {
return gridjs.h('button', {
className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600',
onClick: () => myFunction(`"${row.cells[0].data}"`)
}, 'Stop');
}
},
],
data: [
{% for test in tests %}
{ serial: gridjs.html("<a href={{ url_for('stats.dash_stats', serial=test['device_serial'], test_id=test['id']) }}>{{ test['device_serial'] }}</a>"),
version: "{{ test['version'] }}",
is_active: "{{ test['is_active'] }}",
},
{% endfor %}
],
search: {
selector: (cell, rowIndex, cellIndex) => [0, 1, 2].includes(cellIndex) ? cell : null,
},
sort: true,
pagination: true,
}).render(document.getElementById('table'));
</script>
However, in myFunction the a tag object is not accessible. For instance, when I tried to query the href attribute or innerText, I get undefined logged in console:
<script>
function myFunction(serial) {
let text = "Press a button!\nEither OK or Cancel.";
console.log(serial.href) # undefined
console.log(serial.innerText) # undefined
}
</script>
My goal is that myFunction is called with innerText of the anchor tag which ABCXYZ in this example.