I have an html page with two buttons which swap the visibility of associated divs. The click event on the buttons work on desktop but not on my Android mobile. How do I get this to work on both desktop and mobile? Also the href link does not work on mobile.
html code extract
<div class="content" id="calculator">
<button id="details" class="tab-button">Details</button>
<button id="result" class="tab-button">Result</button>
<div id="details-content">
Details
</div>
<div id="result-content" class="chart-container" onresize="responsiveFonts()">
<canvas id="StackedbarChartCanvas"></canvas>
</div>
</div>
<p class="center-text">Please read the <a class="link" href="disclaimer.php">Disclaimer</a></p>
css
.tab-button{
border-radius: 5px;
border: 1px solid #000;
padding: 5px 10px;
background: yellow;
font-size: 1em;
cursor: pointer;
}
#details-content {
display: block;
}
#result-content {
display: none;
}
Javascript code
$(document).ready(function() {
$("#result").on("click", function(evt) {
displayResultContent();
});
$(document).on('click', '#details', function() {
displayDetails();
});
});
function displayResultContent() {
document.getElementById("details-content").style.display="none";
document.getElementById("result-content").style.display="block";
calculateResult();
}
function displayDetails() {
document.getElementById("details-content").style.display="block";
document.getElementById("result-content").style.display="none";
}
You have half vanilla javascript code and half jquery . Not all mobile devices work adequately with a pure javascript, almost everything works with jquery.
$(document).ready(function() {
$('#result').click(function() {
$('#details-content').hide();
$('#result-content').show();
calculateResult();
});
$('#details').click(function() {
$('#details-content').show();
$('#result-content').hide();
});
$(window).resize(function() {
responsiveFonts();
});
});
function calculateResult(){
alert('this function -> "calculateResult"'); /* for example... */
}
function responsiveFonts(){
console.log('hello foom funcion "responsiveFonts"');/* for example... */
}.tab-button{
border-radius: 5px;
border: 1px solid #000;
padding: 5px 10px;
background: yellow;
font-size: 1em;
cursor: pointer;
}
#details-content {
display: block;
}
#result-content {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content" id="calculator">
<button id="details" class="tab-button">Details</button>
<button id="result" class="tab-button">Result</button>
<div id="details-content">
Details
</div>
<div id="result-content" class="chart-container">
<canvas id="StackedbarChartCanvas"></canvas>
</div>
</div>
<p class="center-text">Please read the <a class="link" href="/disclaimer.php">Disclaimer</a></p>