So I have 2 buttons, when clicked on they lead to the same window. But, I want to be able to keep track of which button was pressed so I can do different things based on that, below is how I have them defined:
<div class = "buttons">
<button class = "worldBtn" onclick="window.location.href='map/map.html';">WORLD</button>
<br>
<button class = "usBtn" onclick="window.location.href='map/map.html';">UNITED STATES</button>
</div>
Is there any way I will be able to achieve that? Thanks!
Use a URL query parameter to distinguish them.
<div class = "buttons">
<button class = "worldBtn" onclick="window.location.href='map/map.html?loc=world';">WORLD</button>
<br>
<button class = "usBtn" onclick="window.location.href='map/map.html?loc=us';">UNITED STATES</button>
</div>
Then in map.html the JavaScript can check window.location.search to determine which button was used.
add one same class to button on click using $(this) you get it value attribute. here is a small code snippet
$(".btn").click(function(e){
var title=$(this).attr("value");
alert(title);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class = "buttons">
<button class = "worldBtn btn" onclick="window.location.href='map/map.html';" value="WORLD">WORLD</button>
<br>
<button class = "usBtn btn" onclick="window.location.href='map/map.html';" value="UNITED STATES">UNITED STATES</button>
</div>You can use the click event to track which button was clicked and act accordingly
HTML
<div class = "buttons">
<button id="btn1" class = "worldBtn">WORLD</button>
<br>
<button id="btn2" class = "usBtn">UNITED STATES</button>
</div>
Javascript using JQuery
$('#btn1').on('click', function(e) {
e.preventDefault();
console.log('worldBtn clicked');
window.location.replace("map/map.html");
})
$('#btn2').on('click', function(e) {
e.preventDefault();
console.log('usBtn clicked');
window.location.replace("map/map.html");
})