Change class value javascript in event onclick?

Your example suggests that you need to be able to

Select Items from the DOM
Add an on-click event listener
Modify the display state of elements

Looking at how you might achieve these in native JS then I would suggest the following:

document.querySelector()

This provides some similar functionality to JQuery’s selectors – at least for this use case.

element.addEventListener('click', function)

This provides equivalent functionality as JQuery’s $('').click(function)

element.style

This enables modification of the in-line style of the element so setting the style of display to none can achieve this

Putting these all together:

// use querySelector to get the .verMas element and add on-click event listener
document.querySelector('.verMas').addEventListener('click', e => {

  // prevent default event
  e.preventDefault()

  // use querySelector to get the .wysiwyg element
  // set the style.height parameter to auto
  document.querySelector('.wysiwyg').style.height="auto"

  // e.target is the element that this event was fired on 
  // to hide it, set the style.display parameter to none
  e.target.style.display = 'none'

  // use querySelector to get the .layerMiddle element
  //hide the layerMiddle Element
  document.querySelector('.layerMiddle').style.display = 'none'
})

div {
  padding: 10px;
}

.btn{
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

<div class="wysiwyg">text......text...</div>
<div class="layerMiddle">[Layer Middle]</div>
<div class="btn btn-primary verMas">Ver más</div>

More Related Contents:

Leave a Comment Cancel reply