Onclick and set variable in hugo?

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

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

2. inline event?

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

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.

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

1 Like

Did you mean something like this?


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


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

what do you mean? can you suggest some code?