Keeping track of which button was pressed?-CodePudding

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!

CodePudding user response：

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.

CodePudding user response：

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");
})

CodePudding user response：

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>