One of my website pages utilizes the DOM and JavaScript to dynamically change text on the screen. The layout has a sidebar with the id "pastEvents" set to a width of "col-xs-3" and a main section with the id "eventsReports" set to a width of "col-xs-9". The structure of the page is standard: a menu on top, a logo below it, a sidebar to the left, the main content area to the right, and a footer at the bottom.
The issue I'm facing is that the links in the sidebar work fine on larger screens but cease to function in the extra-small (xs) mode. This problem persists when I try to shrink the screen on my desktop using various browsers and their developer tools, as well as when accessing the page on mobile devices.
An example of a link in the sidebar looks like this:
<li class="rpts" onclick="fn2016(x=7)"><a href="#">Tea 'n Talk - Marine Life on the Eurobodalla and Local Coast</a> (25/03/17) </li><br>
The JavaScript function associated with these links is as follows:
<script>
var x; // integer received from the onclick event specifying the report number
function fn2016(x) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'eventReports/rpt_' + x + '.html');
request.onreadystatechange = function() {
if ((request.readyState === 4) && (request.status === 200)) {
var modify = document.getElementById('eventsReports');
modify.innerHTML = request.responseText;
}
}
request.send();
}
</script>
The corresponding HTML for the received content is:
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8" id="eventsReports">
</div>
This setup functions flawlessly on most devices except for the smallest ones, where even the links fail to work properly.