Stuck on passing a variable via javascript to an html file
Jun 21, 2023
I've created a JavaScript function that captures a variable value on the click of button1. I'd like it to simply add a row to an html file with a timestamp and the value of the variable. It's simply not working. Have any of you had any luck doing something like this? Here is the code so far. I'm getting a 404 error for data.html even though it's in the same file as the story.html file. This works when I test it outside of Storyline.
Javascript:
// Function to handle the button click
function buttonClick() {
var player = GetPlayer();
var runningTotal = player.GetVar("runningTotal"); // Get the value of the runningTotal variable
var timestamp = new Date().toLocaleString(); // Get the current timestamp
// Open the data.html file with the timestamp and runningTotal values
var dataUrl = "data.html?timestamp=" + encodeURIComponent(timestamp) + "&runningTotal=" + encodeURIComponent(runningTotal);
window.open(dataUrl, "_blank");
}
// Register the buttonClick function to the button click event
var button = document.getElementById("yourButtonID");
button.addEventListener("click", buttonClick);
html:
<!DOCTYPE html>
<html>
<head>
<title>Data Table</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h1>Data Table</h1>
<table id="dataTable">
<thead>
<tr>
<th>Timestamp</th>
<th>Running Total</th>
</tr>
</thead>
<tbody id="dataBody">
</tbody>
</table>
<script>
function handleIncomingData(timestamp, runningTotal) {
var tableBody = document.getElementById("dataBody");
var newRow = document.createElement("tr");
var timestampCell = document.createElement("td");
timestampCell.textContent = timestamp;
var runningTotalCell = document.createElement("td");
runningTotalCell.textContent = runningTotal;
newRow.appendChild(timestampCell);
newRow.appendChild(runningTotalCell);
tableBody.appendChild(newRow);
}
// Check if there is incoming data from the parent window
if (window.opener && window.opener.player && window.opener.player.GetVar) {
var timestamp = new Date().toLocaleString();
var runningTotal = window.opener.player.GetVar("runningTotal");
handleIncomingData(timestamp, runningTotal);
}
</script>
</body>
</html>
Be the first to reply