JS es6 on click add class to another element

javascript toggle class
classlist.add not working
javascript add class
javascript add style to element by class
javascript add class to html
how to add class dynamically in javascript
es6 remove class from element
javascript add css to element

I'm trying to show a div when another button has been clicked.

Unfortunately the site i'm using doesn't use jquery but has babel.js installed.

This is the HTML of the button the user is clicking

<button id="ba-Calculate" class="button">Calculate</button>

And this is the HTML for the button I would like to display

<button class="js-find-a-mortgage button u-margin-top-small" style="display: none;">Find a mortgage</button>

I've added a style of display none to hide the element.

This is what i've come up with so far.

var el = document.querySelector('#ba-Calculate');

el.onclick = function() {
document.getElementsByClassName('js-find-a-mortgage').style.display = 'block';
}

Any suggestions or where to read up on how I can crack this would be great.

I appreciate the feedback, thank you.

document.getElementsByClassName returns an array. So, you need to fetch the first element (I believe you have only one element with that class in the DOM) and add the style.

Try using

document.getElementsByClassName('js-find-a-mortgage')[0].style.display = 'block';

How to Add a Class to an Element with ES6, I personally knew developers who would including the jQuery library into their project just so they could add another class to an HTML element. For an application i want to create Object-Based components in ES6. On the normal way, you can create Elements as follow: var element = document.createElement('YourElement'); element.innerHTML = '

var trigger = document.querySelector('#ba-calculate')
var el = document.querySelector('.js-find-a-mortgate')

trigger.addEventListener('click', function () {
  el.style.display = 'block'
})

getElementsByClassName returns an array like object

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

Using querySelector will grab the first instance of a node matching that class name. You can then use the code you already had.

Element.classList, The classList object makes it easy to add, remove, toggle or check for the presence of It's much easier than it used to be to modify classes on an element, thanks in large part to the classList object. Say something like this on a button click: Learn how to add a class name to an element with JavaScript. Add Class. Click the button to add a class to me! Add Class Step 1) Add HTML:

If you want to add class, I assume you need to use classList method add:

For example to add for your element class 'hidden': document.getElementsByClassName('js-find-a-mortgage')[0].classList.add('hidden');

To see all classes use: document.getElementsByClassName('js-find-a-mortgage')[0].classList

https://www.w3schools.com/jsref/prop_element_classlist.asp

Adding, Removing & Toggling Classes With classList in JavaScript, Toggle between adding and removing a class name from an element with JavaScript. Toggle Class. Click the button to toggle class name! Toggle Class. Step 1)� Creating New HTML Elements (Nodes) To add a new element to the HTML DOM, you must create the element (element node) first, and then append it to an existing element.

How To Toggle Between Class Names, Here's few different method to add and remove classes from DOM elements, with pure JavaScript. JavaScript: adding and removing class names from elements Here's all the other methods in action: Remove a class name from multiple elements with pure JavaScript � The new ES6 for…of loop � Self referencing object� ECMAScript 2015. ES6, also known as ECMAScript2015, introduced classes. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

JavaScript: adding and removing class names from elements , Adding the class name by using JavaScript can be done in many ways. Using . className property: This property is used to add a class name to the selected element. Syntax: element. Output: Before clicking the button: See your article appearing on the GeeksforGeeks main page and help other Geeks. Classes. ES6 introduced classes. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method. Use the keyword class to create a class, and always add a constructor method.

JavaScript, Create a basic class toggle function with ES6 Vanilla JavaScript. Super small change here, but keep in mind, when using const you want to Currently we're using the onclick event handler to detect when a user But what about if we need to toggle a class on a <div> , <span> or another element that is� You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object. The addEventListener() method makes it easier to control how the event reacts to bubbling.

Comments
  • Is there only a single element with the class js-find-a-mortgage on the page?
  • What's the actual question? Please see the How to Ask page.
  • @BrettGregson Yes, Only the one element with that class name
  • I'd like to point out that none of the code mentioned here is ES6.
  • If you're using style.* and anything that is not some complicated transform or matrix - you're most probably doing it the wrong-ish way. Element.classList is your friend to add, remove, toggle classes to any element, than inside CSS you define your styles.