Revision history [back]

click to hide/show revision 1
initial version

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

Kabaiashi gravatar image Kabaiashi

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

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

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

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> </zk>

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

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: HTML/JS:

<zk>
  <style>

<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>

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

</toolbar> <script> </zk>

<![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>
Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More