Onclick and set variable in hugo?

support
1

Hi. I’m from react. How can I accomplish add eventlistener to a button or div component and set variable dynamically like I do in reactjs so that I can set website theme color.
For example, can I do like this?

1.using jquery

$(document).ready(function(){
  $("#id").click(function() {
      {{ .Scratch.Set "themeVariant" "dark" }}
  });
});

2. inline event?

<button onClick={{ .Scratch.Set "themeVariant" "dark" }}>
  click me
</button>

3. If I can change $.Site.Param variable dynamically that would be really nice for my case.

If I can set .Site.Params variable dynamically, Page template can know what is currently applied theme, so I can easily change site theme color -> like multiLanguage.

2

You can set JavaScript variables via Hugo templates, but not the other way around.

1 Like
3

Did you mean something like this?

layouts/partials/test.html

{{ .Scratch.Set "themeVariant" "dark" }}

layouts/index.html

…

{{ partial "test" . }}
  {{ printf "%#v" (.Scratch.Get "themeVariant") }}  <!-- "dark" -->

…

what do you mean? can you suggest some code?