0

How to select a css class/id with js in zk

asked 2021-08-17 01:25:59 +0800

Kabaiashi gravatar image Kabaiashi
3 1

updated 2021-08-17 09:30:51 +0800

cor3000 gravatar image cor3000
6183 2 7
ZK Team

Hey there,

I've got a simple toolbar component with two buttons. I need to change the styles of a button upon a click. In other words when I click on the second button, I need a class that adds additional styles to be removed from the first button and added to the second one. I am a complete beginner in Java and ZK. So I added some JS on the page to complete the task. But due to a certain reason the code does not work. From the other side, if I put an alert('hello'); inside of the <script></script> it works as expected - therefore, the script is connected to the page correctly. The js code that I add perfectly works outside of ZK. So, my understanding that I don't know something on how to select DOM elements properly in ZK. Here is the fiddle that I've got: zkfiddle.org/sample/26l0hmd/1-toolbar

Any suggestions are highly appreciated

Here is my HTML/JS:

<zk>
  <style>

.s-btn {
  -webkit-appearance: none;
          appearance: none;
  width: -webkit-fit-content;
  width: fit-content;
  font-size: 1.4rem;
  font-weight: 600;
  color: #283046;
  text-transform: capitalize;
  background-color: transparent;
  padding: 0.5rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out; }

  .s-btn--primary {
    background-color: #02F4B5; }

  </style>

  <toolbar id="content-switcher">
    <button id="baton" zclass="s-btn s-btn--primary">1</button>
    <button zclass="s-btn">2</button>
  </toolbar>

  <script>
    <![CDATA[
        var header = document.getElementById("content-switcher");
var btns = header.getElementsByClassName("s-btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("s-btn--primary");
  current[0].className = current[0].className.replace(" s-btn--primary", "");
  this.className += " s-btn--primary";
  });
}
    ]]>
</script>
</zk>
delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2021-08-17 11:17:49 +0800

MDuchemin gravatar image MDuchemin
1986 1 5
ZK Team

Hey there,

if you are getting started in ZK, then I'd recommend checking out the relevant docs to get a feel of how it works.

Regarding events listening, ZK can listen to events both at server-side and at client-side, but if you want to do things simply (at least when starting out), you'll probably want to stick with server-side events.

I'm assuming that you are changing something in an existing page, so there is likely already events listening to button clicks in the page's composer / viewModel (depending on the chosen architecture), so your best bet would be to use the existing events to also update style.

Regarding setting CSS classes. In your sample, you are using zclass. zclass will remove all existing ZK classes from a component's DOM node. There are use cases for that, but if you only want to add a class for customization, then I recommend using sclass instead. I'll assume that you need to overrwrite the default style below.

Here's a sample of how I'd approach listening to button clicks, and going through the list of buttons to replace their style based you your code sample.

https://zkfiddle.org/sample/26l0hmd/11-toolbar

Have a look, and let me know if you have any questions

link publish delete flag offensive edit

Comments

Thank you very much for your help. It worked like a charm. Any chance to connect with you directly?

Kabaiashi ( 2021-08-27 20:38:35 +0800 )edit

Feel free to post below if you have follow-up questions ;)

MDuchemin ( 2021-08-31 16:07:52 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2021-08-17 01:25:59 +0800

Seen: 7 times

Last updated: Aug 17

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More