<div class="text-center">
<h1 class="block text-5xl font-bold leading-none my-3 text-yellow-600">Wayne Enterprises</h1>
<h2 id="tagline" class="block text-xl text-gray-600 leading-tight"></h2>
<div>
<p class="my-3 text-gray-500">The above tagline has two variations targeting 50% of users each. Click the change user button to send a new random user to LaunchDarkly. Note that the text may not change for every user as the targeting is randomized.</p>
<button onclick="changeUser()" class="inline-block bg-gray-900 hover:bg-gray-800 text-white font-medium rounded-lg px-6 py-4 leading-tight">Change User</button>
<p class="my-3">Current User: <span id="userID"></span></p>

const elUserID = document.getElementById("userID");

function changeTagline(tagline) {
  const elTagline = document.getElementById("tagline");
  elTagline.innerText = tagline;
  console.log("changed")
}

async function changeUser(id) {
  const newUser = id || self.crypto.randomUUID();
  await client.identify({ key: newUser })
  elUserID.innerText = newUser;
}

user = {
   key: self.crypto.randomUUID(),
 };
elUserID.innerText = user.key;
const client = LDClient.initialize("62fe31bdd28cd612550340ec", user);
client.on("ready", function () {
  // STRING FLAG
  const tagline = client.variation("we-tagline", "");
  changeTagline(tagline);
  client.on("change:we-tagline", function (flagValue) {
    changeTagline(flagValue);
  });
});