CODEWITHSUNDEEP
javascripthtmljquerycss
YungTabernacle
YungTabernacle

Reputation: 23

Is there a way to define a HTML ID in vanilla Javascript without using a variable?

I'm extremely new to this so I apologise in advance if this is a dumb question or my definitions aren't quite correct.

What I'm trying to do is create a list of labeled boxes on a page which expand when you click on them, and the only way I've managed to get it working so far is below:

JSFiddle

var set = document.getElementById("setup")

function expand() {
    set.classList.toggle('contentclicked');
}
.contentbutton {
    border-radius: 40px;
    background: #d6d6d6a1;
    padding: 20px; 
    width: 60%;
    height: 20px;  
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: bolder;
    margin: 15px;
    box-shadow: 0px 3px 7px #7979793d;
    text-shadow: 0px 2px 3px #79797967;
    -webkit-transition:0.5s;

  }

.contentclicked { 
  width: 90%;
  height: 200px;  

}
<p class="contentbutton" id="setup" onclick="expand ()">SETUP</p>

I imagine there's a much cleaner way of doing that, but for now I'm just glad I got it working. However, to keep this up across the rest of the boxes, I'd have to define a variable for each box using their ID, then rewrite the function for each with that variable, which seems extremely inefficient and amateur.

Is there a way to remove the use of variables and just have it so that the Javascript knows which element has been clicked on and only runs the function on that? Or maybe the variable being something like this ("CURRENTELEMENT" being whatever element the function was called from):

var element = document.getElementByID('CURRENTELEMENT'),

CSS has built-in hover and active functions, so it's a shame it doesn't have an onclick function, but this seems like something that should be VERY easy to achieve with Javascript or one of its frameworks, and yet I'm struggling to find the answer. Even when I feel like I've found the answer using jQuery, I then don't understand how to call the specific function within the HTML element. I'm sure this is extremely easy but I'm struggling to find and grasp the answer.

Thanks in advance guys, any help is appreciated.

Upvotes: 2

Views: 266

Answers (3)

Alexander Nied
Alexander Nied

Reputation: 13623

You can add an event listener on the class, and then just use the target on the event to add/remove classes to the clicked element. Below is an implementation using an event delegation approach (so you only have a single listener on the body, rather than one listener for each element):

function expand(e) {
  e.target.classList.toggle('contentclicked');
}

document.body.addEventListener('click', (e) => {
  // event delegation
  if (e.target.classList.contains('expanding-btn')) {
    expand(e);
  };
});
.contentbutton {
  border-radius: 40px;
  background: #d6d6d6a1;
  padding: 20px;
  width: 60%;
  height: 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  margin: 15px;
  box-shadow: 0px 3px 7px #7979793d;
  text-shadow: 0px 2px 3px #79797967;
  -webkit-transition: 0.5s;
}

.contentclicked {
  width: 90%;
  height: 200px;
}
<p class="contentbutton expanding-btn">Ready</p>
<p class="contentbutton expanding-btn">Set</p>
<p class="contentbutton expanding-btn">Go</p>

Upvotes: 2

epascarello
epascarello

Reputation: 207501

Or use HTML that allows you to do it without any JavaScript

.card > .toggle { display: none }
.card > .toggle + h3 + .contents {
  display: none;
}
.card > .toggle:checked + h3 + .contents {
  display: block;
}
<div class="card">
  <input class="toggle" type="checkbox" id="card_1"/>
  <h3><label for="card_1">Card Heading</label></h3>
  <div class="contents">
    <p>Card Contents</p>
    <p>Card Contents</p>
    <p>Card Contents</p>
  </div>
  
</div>

If you want to add a class with JavaScript. Use a common class. Select it with query selector all and loop over the elements

const btns = document.querySelectorAll('.contentbutton');
btns.forEach(function(btn){
  btn.addEventListener("click", function () {
    btn.classList.toggle('contentclicked');
  });
});

Upvotes: 4

Allure
Allure

Reputation: 573

Very easily :)

give to each element same class for example "contentbutton" then to each of them add some event listener

const buttons = document.getElementsByClassName("contentbutton")

for(let i =0, len = buttons.length; i<len; i++){
  buttons[i].onclick = expand
}

function expand(e) {
  e.target.classList.toggle('contentclicked');
}

Upvotes: 3

Related Questions