Html Question posted in
Some basic documentation can be found here.

Html – How to use class name to change an element's display?

Let me be frank, I have no idea how javascript works. I was hoping someone could show me how to get this to actually function.

What I’m trying to do is use the element’s class name to change it’s display to ‘none’, and the next sibling element’s display to ‘block’ on click. I’m using class name because I’d like this to be applicable to whatever element has that class. Someone please tell me what I did wrong?

CSS

.box {
  position: relative;
  top: 0px;
  width: 150px;
  height: 150px;
  color: #fff;
  cursor: pointer;
}

#box {
  background-color: green;
}

#box2 {
  display: none;
  background-color: blue;

HTML

 <div class="box" id="box" onclick="myFunction()">
      <p>text text text text text</p>
 </div>
 <div class="box" id="box2">
      <p>text text text text text text text text text text</p>
 </div>

JS

function myFunction() {
     if (element.hasClass("box")) {
     this.element.style.display = "none";
     nextElementSibling.style.display = "block";
    }
}

Sorry if this is dumb, I have no idea what I’m doing.

Tags:

3

Answers


  1. 0

    Let me be AsyncAwait, I have some (?) idea how javascript works. I was hoping this could show you how to get this to actually function.

    Instead of assigning the function inline, in the HTML, I assign it in the js. Then, instead of refrencing the element using this.element I can use event.currentTarget. This will ensure we are firing the event on the element we assigned the event listener. Now we don’t need to check if it has the desired class.

    I store the element into a variable, for clarity.

    I set the display to none, grab the next element, and change it’s display to block (it’s already block so it doesn’t really change anything).

    Hopefully this adds some clarity! If you have any questions, feel free to ask <3

    function myFunction(event) {
  const element = event.currentTarget;
  element.style.display = "none";
  const nextElement = element.nextElementSibling;
  nextElement.style.display = "block";
}

document.getElementById("box")
  .addEventListener("click", myFunction);
    <div class="box" id="box">
  <p>
    text text text text text
  </p>
</div>
<div class="box" id="box2">
  <p>
    text text text text text text text text text text
  </p>
</div>
    Login or Signup to reply.
  2. 0

    1. The click event handler created by the HTML parser doesn’t call myFunction with any arguments.

      One way of fixing this is to pass this as its argument:

           onclick = myFunction( this)

      where this refers to the element with the onclick attribute.

      Note adding event handlers in JavaScript is recommended over adding them in HTML. See the addEventListener method to start your research.

      If you don’t know how to find elements in JS, have a look at document methods querySelector and querySelectorAll to start with (there are other methods for finding elements). They can be called on elements as well as doocument.

    2. In myFunction you will need to

      1. pick up element as argument,

      2. use the element.classList.contains method to see if has box in its [DomTokenList] class list.

      3. Code nextElementSibling as a property of element to find the required sibling.

    With the changes:

    function myFunction(element) {
     if (element.classList.contains("box")) {
     element.style.display = "none";
     element.nextElementSibling.style.display = "block";
    }
}
    .box {
  position: relative;
  top: 0px;
  width: 150px;
  height: 150px;
  color: #fff;
  cursor: pointer;
}

#box {
  background-color: green;
}
#box2 {
  display: none;
  background-color: blue;
}
     <div class="box" id="box" onclick="myFunction(this)">
      <p>text text text text text</p>
 </div>
 <div class="box" id="box2">
      <p>text text text text text text text text text text</p>
 </div>

    There’s a lot to learn, happy coding and research. … However, if you have multiple things going wrong and need help, check the console tab of developer tools for code errors and attempt to solve them in order of appearance before posting about the first one you couldn’t resolve. 🙂

    Login or Signup to reply.
  3. 0

    Check these issue, maybe this will improve the coding:

    1. You need to get the clicked element and its next sibling.
    2. You need to use JavaScript methods to change the display property of these elements.
    3. The method hasClass is not a standard JavaScript method. Instead, you can check the class name using classList.contains.

    Here I have added the updated code please check:

    function myFunction(element) {
  if (element.classList.contains("box")) {
    element.style.display = "none";
    element.nextElementSibling.style.display = "block";
  }
}
    .box {
  position: relative;
  top: 0px;
  width: 150px;
  height: 150px;
  color: #fff;
  cursor: pointer;
}

#box {
  background-color: green;
}

#box2 {
  display: none;
  background-color: blue;
}
    <div class="box" id="box" onclick="myFunction(this)">
  <p>text text text text text</p>
</div>
<div class="box" id="box2">
  <p>text text text text text text text text text text</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search