Calling the saves api through an HTML button

I am trying to call Sugarcube’s save dialogue from an html button but having some problems. I figured I could use the onclick event of the button with a directive but doesn’t seem to be right. Perhaps because onclick is already looking for script, but dropping the script tags doesn’t work either. Hmmmm. I know how to do it with a sugarcube markup button, but have styled various buttons so would prefer to use html.

Twine Version:
Story Format: 2.314

<button class="button-50" role="button" @onclick="<<script>>UISystem.saves()<</script>>">Saves</button>

There are a number of ways you can achieve the outcome you want, which to use can depend on where in your project you are defining that <button> element.

  1. Within the “current” Passage
  2. Within a PassageHeader or PassageFooter special Passage.
  3. Within the StoryCaption special Passage.
  4. Within a StoryInterface special Passage
  5. Somewhere else…

note: The are (at least) four reasons why your example doesn’t work:

  1. The function to open the Save dialog programmatically is found on the UI API, not one named UISystem.
    eg. @onclick="<<script>>UI.saves()<</script>>"
  2. Using Attribute Directive mark-up on a HTML element attribute causes the associated String value to be executed when the element is being created. Which means the <<script>> macro will be executed when the button is added to the page, not when the end-user selects that button.
    eg. onclick="<<script>>UI.saves()<</script>>"
  3. Event based attributes like onclick expect the assigned String value to contain JavaScript, which the web-browser knows how to execute. It doesn’t know how to execute SugarCube macro calls.
    eg. onclick="UI.saves();"
  4. The JavaScript contained within the assigned String value is execute in a specific Scope, and by default SugarCube’s custom APIs are not available within that Scope.

Thanks for explaining that thoroughly, hopefully will help me avoid mistakes like that again. So my buttons are in the PassageHeader passage. From what I gathered, I should tag this passage something unique, and then style it in CSS. So assuming my tag is “storyheader”, I tried adding this in the CSS and not seeing any results. I think I’m close, perhaps you could advise?

.body[data-tags~="storyheader"] .button {
  appearance: button;
  background-color: #000;
  background-image: none;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: #fff 4px 4px 0 0,#000 4px 4px 0 1px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: ITCAvantGardeStd-Bk,Arial,sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 13px;
  margin: 0 5px 10px 0;
  overflow: visible;
  padding: 12px 12px;
  text-align: center;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
  white-space: nowrap;