jQuery addClass example

Change class name on click in jQuery

by gion_13

HTML

<div id="banner-message">
  <p>The "Adventure time" button should appear in ~5'</p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 400px;
}

JavaScript

var scriptHTML = "<script id='mytime-1529566549742-initiator'> !function(document, data) { var config = {}; var scriptId = 'mytime-widget-script'; /* if it's the first time a button is embedded in this page, add the \"widget API script\" (if it doesn't already exist) */ var existingWidgetApiScript = document.getElementById(scriptId); if (!existingWidgetApiScript) { js = document.createElement('script'); js.scriptId = scriptId; js.src = (('https:' === document.location.protocol ? 'https:' : 'http:') + \"//dbr8gblg5rhpr.cloudfront.net/assets/my_client/booking_widget_embed.js\"); document.body.appendChild(js); } /* create button */ var button = document.createElement('div'); button.style.display = 'inline-block'; button.style.cursor = 'pointer'; button.setAttribute('class', 'mytime-widget-button-wrapper'); button.setAttribute('widget-data', JSON.stringify(data)); button.innerHTML = data.button_html; var initialScriptEl = document.getElementById('mytime-1529566549742-initiator'); initialScriptEl.parentNode.insertBefore(button, initialScriptEl); /* attach the data to the button html */ document.querySelectorAll('.mytime-widget-button-wrapper') .forEach(function (buttonWrapper) { buttonWrapper.onclick = function () { var data = buttonWrapper.getAttribute('widget-data'); myTimeWidget.open(JSON.parse(data)); }; buttonWrapper.querySelectorAll('a') .forEach(function (link) { link.onClick = null; }); }); }(document, {\"company_id\":94514,\"top_bar_color\":\"#319fb5\",\"header_type\":1,\"selected_theme\":\"default\",\"button_html\":\"<a href=\\\"javascript:void(0);\\\" style=\\\"background-color: #081e72; color: #fff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 21px; line-height: 50px; padding: 0px 30px; display: inline-block; border-radius: 25px;\\\">Adventure Time</a>\",\"baseUrl\":\"staging2.mytime.com\",\"elementID\":\"mytime\",\"referrer\":\"newbookingwidget\"}); </" + "script>";

const addScript = () =>...