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

Html – How to get an element using DOM

I want to get the reference of the corresponding hello when the checkbox is clicked. Please help me to guide what to do

enter image description here

enter image description here

I have tried this that when the checkbox is change then the pass function will be called. But dont know how to get the reference of hello so that i can apply styling if the checkbox is changed.

Tags:

3

Answers


  1. 0

    Try:

    function eventHandler(event) {
   const target = event.target.closest('input');

   if (target === null) {
     return;
   }

   const p = target.closest('li').querySelector('p');
   // Here is your element <p>
}

const ul = document.querySelector('ul');

ul.addEventListener('click', eventHandler);
    Login or Signup to reply.
  2. 0

    If you are using plain html and javascript you can achieve this by giving the the element an id, like this. <p id="your-element-id">Hello</p>

    And, in the function that you are passing to the input: check field, you can access that element by it’s id.

    Like this :

    function pass() {
  // your own code here

  //then, Get a reference to the element with the specified ID
  var element = document.getElementById("your-element-id");

  // Now you can manipulate the 'element' object
  element.style.backgroundColor = "red";
  element.innerHTML = "New content";
  // ... and whatever else you want to change you can do that
}
    Login or Signup to reply.
  3. 0

    You will need to pass wither event or this to the inline onchange="pass()" handler.

    function pass(event) {
  const parent = event.target.parentElement;
  const p = parent.querySelector('p');
  p.dataset.active = true;
  setTimeout(() => {
    p.dataset.active = false;
  }, 500)
}
    p[data-active="true"] {
  background: yellow;
}
    <ul>
  <li>
    <div>
      <input class="ch" type="checkbox" onchange="pass(event)" />
      <p>Hellow</p>
    </div>
  </li>
  <li>
    <input class="ch" type="checkbox" onchange="pass(event)" />
    <p>Hellow</p>
  </li>
  <li>
    <input class="ch" type="checkbox" onchange="pass(event)" />
    <p>Hellow</p>
  </li>
</ul>
    function pass(checkbox, event) {
  const parent = checkbox.parentElement;
  const p = parent.querySelector('p');
  p.dataset.active = true;
  setTimeout(() => {
    p.dataset.active = false;
  }, 500)
}
    p[data-active="true"] {
  background: yellow;
}
    <ul>
  <li>
    <div>
      <input class="ch" type="checkbox" onchange="pass(this, event)" />
      <p>Hellow</p>
    </div>
  </li>
  <li>
    <input class="ch" type="checkbox" onchange="pass(this, event)" />
    <p>Hellow</p>
  </li>
  <li>
    <input class="ch" type="checkbox" onchange="pass(this, event)" />
    <p>Hellow</p>
  </li>
</ul>

    Here is an example of a global event listener:

    function pass(checkbox, event) {
  const parent = checkbox.parentElement;
  const p = parent.querySelector('p');
  p.dataset.active = true;
  setTimeout(() => {
    p.dataset.active = false;
  }, 500)
}

document.addEventListener('change', (event) => {
  if (event.target.classList.contains('ch')) {
    pass(event.target, event);
  }
});
    p[data-active="true"] {
  background: yellow;
}
    <ul>
  <li>
    <div>
      <input class="ch" type="checkbox" />
      <p>Hellow</p>
    </div>
  </li>
  <li>
    <input class="ch" type="checkbox" />
    <p>Hellow</p>
  </li>
  <li>
    <input class="ch" type="checkbox" />
    <p>Hellow</p>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search