PHP/HTML/JavaScript - Creating buttons with data attributes from PHP to HTML/JavaScript

Admin 1
Viewed 109

I have data in a PHP array I want to turn into buttons.

For simplicity, these buttons will console.log() their data on click.

Right now I'm using inline event handlers to do this.

How do I approach this problem using data attributes and no inline event handlers? I know how to create data attributes, but I don't know how to log the data and bind event listeners to the buttons.

<script>
    function logData(lat, long) {
        console.log(lat);
        console.log(long);
    }
</script>

<?php
$coordinates = array(
  first => array(
    "lat" => "64",
    "long" => "89"
  ),
  second => array(
    "lat" => "23",
    "long" => "11"
  ),
  third => array(
    "lat" => "35",
    "long" => "76"
  )
);
// Create buttons with inline event handlers
foreach($coordinates as $point) {
    echo "<button onclick='logData(".$point["lat"].", ".$point["long"].")'>Button</button>";
}

echo "<br><br>";
// Create buttons with data attributes. How do you log the data without inline event handlers?
foreach($coordinates as $point) {
    echo "<button data-lat=".$point["lat"]." data-long=".$point["long"].">Button</button>";
}

?>
css html php jquery javascript
2 Answers

Give each button a way to identify them, like a class attribute value.

foreach($coordinates as $point) {
  echo '<button class="point-button" data-lat="' . $point["lat"]. '" data-long="' . $point["long"] . '">Button</button>';
}

In JavaScript select all buttons that have that specific class and listen for the click event for each individual button.

The fired click event gives information about the element that is being clicked. That reference is stored in the target property of the event object.

Now that you have the clicked button, read out the dataset property of the button. It should have properties for every data-* attribute on the element, without the data- part in the name. So, for example, data-lat is represented as dataset.lat.

// Log function.
function logData(lat, long) {
  console.log(lat, long);
}

// Get all buttons with the point-button class.
const buttons = document.querySelectorAll('.point-button');

// Click event handler
function onButtonClick(event) {
  const currentButton = event.target;
  const lat = currentButton.dataset.lat;
  const long = currentButton.dataset.long;

  logData(lat, long);
}

// For each button, add an event listener for the click event. 
// Call logData when a click happens.
buttons.forEach(button => {
  button.addEventListener('click', onButtonClick);
});
user_116196470

You can simply do like this

function hello(event){
  alert(event.dataset.lat)
}
<button onclick="hello(this)" data-lat="hello">
      save
</button>

in your case

foreach($coordinates as $point) {
  echo '<button class="point-button" data-lat="' . $point["lat"]. '" data-long="' . $point["long"] . '" onclick="loadData(this)">Button</button>';
}

and in js

function loadData(event) {
   const lat = event.dataset.lat
   const lon = event.dataset.long

   console.log(lat, long)
 
}
user_61987910
Related