Would like to get a pure Javascript solution for my situation.
My HTML and JS is as follows. But the HTML can't be manipulated unfortunately as its on SP.
function getCurrentValue() {
var searchQuery = document.getElementById("SearchBox").children[0].children[0].value;
console.log(searchQuery);
}<div id="SearchBox">
<div id"randomGeneratedId">
<input type="text" value="Search..." id="anotherRandomGeneratedId"/>
</div>
</div>
<br/>
<input type="button" value="Run!" onClick="getCurrentValue();">The JS above works in the snippet here but on my page it returns the default value of the input ie. "Search..."
FYI its running on SharePoint 2013. I should note that I managed to get it to work when getElementId("anotherRandomGeneratedId") but that require writing a custom script for every page.
Have a try to modify getCurrentValue() to:
function getCurrentValue() {
var searchQuery = document.querySelector("#SearchBox input").value;
console.log(searchQuery);
}