I have an HTML website and I’d like to update the “VALUE” in “userInteractionCount” in the schema code below with the “clickCount” value?
<div id="click_count"></div> is showing the “clickCount” value that I want to be inserted in the schema code dynamically.
The “clickCount” value is fetched from a database using click_handler.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ACME</title>
</head>
<body>
<!-- Your HTML content here -->
<button id="download_button">Download</button>
<div id="click_count"></div>
<script>
// Function to fetch and display click count
function fetchClickCount() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var clickCount = xhr.responseText;
document.getElementById('click_count').innerText = clickCount;
}
};
xhr.open('GET', 'click_handler.php', true);
xhr.send();
}
// Function to handle button click event
document.getElementById('download_button').addEventListener('click', function() {
// Make an AJAX request to update click count
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Update click count display after updating
fetchClickCount();
// Handle the response if needed
console.log(xhr.responseText);
}
};
xhr.open('POST', 'click_handler.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('download_button=clicked');
});
// Fetch initial click count when the page loads
fetchClickCount();
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Organization",
"name": "ACME",
"interactionStatistic": [
{
"@type": "InteractionCounter",
"interactionType": "https://schema.org/DownloadAction",
"userInteractionCount": "VALUE"
}
]
}
</script>
</body>
</html>