unable to get element values by ID in bootstrap table thead - getelementbyid

Question

Using bootstrap table; the code below returns an empty getElementById for topic_name value, but if I move the 'input' outside of the thead it works. What is happening and how do I get this to work within thead?
<table id="table" class="table table-striped">
<thead>
<tr>
<th data-field="topic">
<input type="text" name="topic_name" id="topic_name">
<a onclick="topicButton()" href="##">this</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>some info here...</td>
</tr>
</tbody>
</table>
<script>
function topicButton()
{
var getThis=document.getElementById("topic_name").value;
alert(getThis);
}
</script>

Answer 1

Tested 2 examples and removed some bootstrap table parameters, removing one parameter worked in 1 example and removing another worked in the other.
For the code I submitted above (after I added all the additional bootstrap table parameters that my original code included - see list below), I removed data-toggle="table" and it worked. In my original code i remove data-show-columns="true" and it worked... odd.
Here is a list of the parameters I had attached to bootstrap table:
<table id="table" class="table table-striped table-borderless"
data-toolbar="#toolbar"
data-toggle="table"
data-cookie="true"
data-cookie-id-table="topic_id"
data-pagination="true"
data-search="true"
data-sort-name="topic_id"
data-sort-order="desc"
data-unique-id="topic_id"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-show-search-button="true"
data-page-size="5"
data-page-list="[5, 10, 25, 50, 100, all]"
data-select-item-name="selectItemName"
data-show-export="true">