How to change an element's class with JavaScript?

Tutorial with code examples on how to change an element's class using JavaScript
27 September

Modern browsers have added classList which provides methods to make it easier to manipulate classes without needing a library:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Unfortunately, these do not work in Internet Explorer prior to v10. 

To replace all existing classes with one or more new classes, set the className attribute:

document.getElementById("MyElement").className = "MyClass";

To add a class to an element, without removing/affecting existing values, append a space and the new classname, like so:

document.getElementById("MyElement").className += " MyClass";

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Assigning these actions to onclick events:

Whilst it is possible to write JavaScript directly inside the HTML event attributes (such as onclick="this.className+=' MyClass'") this is not recommended behaviour. Especially on larger applications, more maintainable code is achieved by separating HTML markup from JavaScript interaction logic.

The first step to achieving this is by creating a function, and calling the function in the onclick attribute, for example:

<script type="text/javascript">
    function changeClass()
    {
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

The second step is to move the onclick event out of the HTML and into JavaScript, for example using addEventListener

<script type="text/javascript">
    function changeClass()
    {
        // Code examples from above
    }

    window.onload = function()
    {
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

 

What is Truffle?

Small introduction to the most popular Ethereum development framework
11 December

Truffle is a development environment, testing framework and asset pipeline for Ethereum, aiming to make life as an Ethereum developer easier. 

According to the developers, these are main features: 

  • BUILT-IN SMART CONTRACT COMPILATION, LINKING, DEPLOYMENT AND BINARY MANAGEMENT
    • Truffle takes care of managing your contract artifacts so you don’t have to. Includes support for custom deployments, library linking and complex Ethereum applications.
  • AUTOMATED CONTRACT TESTING FOR RAPID DEVELOPMENT
    • Bring your dapp development to the 21st century. Write automated tests for your contracts in both JavaScript and Solidity, and get your contracts developed quickly.
  • SCRIPTABLE DEPLOYMENT & MIGRATIONS FRAMEWORK
    • Write simple, manageable deployment scripts that acknowledge your application will change over time. Foster your dapp’s evolution and ensure you can maintain your contracts far into the future.
  • NETWORK MANAGEMENT FOR DEPLOYING TO BOTH PUBLIC & PRIVATE NETWORKS
    • Don’t manage network artifacts ever again. Let Truffle do it for you, and put your focus on dapp development where it belongs.
  • ACCESS TO HUNDREDS OF EXTERNAL PACKAGES
    • Pull in hundreds of smart contract dependencies from NPM and EthPM to have your code stand on the shoulders of giants.
  • INTERACTIVE CONSOLE FOR DIRECT CONTRACT COMMUNICATION
    • Use Truffle to save time and talk to your contracts via an interactive console, which includes access to all your built contracts and all available Truffle commands.
  • EXTERNAL SCRIPT RUNNER THAT EXECUTES SCRIPTS WITHIN A TRUFFLE ENVIRONMENT
    • Use Truffle to bootstrap your contracts and run a network-aware script, without hassle.
  • BUILT FOR SPEED
    • Whether you’re compiling contracts or running unit tests, Truffle includes clever optimizations to ensure you only compile what you have to and your tests run as quickly as possible. When used along with Ganache, you can develop your dapps quickly and get real code deployed, fast.

Learn more at official website