What role does JavaScript play in implementing a functionality like displaying text on icon click in PHP?

JavaScript can be used to handle the click event on an icon and make an AJAX request to a PHP script that fetches the text to be displayed. The PHP script can then return the text, which can be dynamically inserted into the DOM using JavaScript. 

<?php
// PHP script to fetch text based on the icon clicked
if(isset($_POST['icon_id'])) {
    $icon_id = $_POST['icon_id'];
    
    // Logic to fetch text based on $icon_id
    
    // Return the text
    echo $text;
}
?>
```

In the JavaScript code, you can make an AJAX request to this PHP script when the icon is clicked, and then update the DOM with the returned text.

```javascript
document.getElementById('icon').addEventListener('click', function() {
    var icon_id = this.id;
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'fetch_text.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            var text = xhr.responseText;
            // Update the DOM with the fetched text
            document.getElementById('text').innerHTML = text;
        }
    };
    xhr.send('icon_id=' + icon_id);
});

Keywords

JavaScript PHP functionality text display icon click

Related Questions