CODEWITHSUNDEEP
javascripthtmlcss
Нургиса Ануарбек
Нургиса Ануарбек

Reputation: 53

javascript change parent element style

I have a working code that makes underline for current element in the html, and i want to clean it when i press click again

var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    this.parentElement.getElementsByTagName('span')[0].style = "text-decoration:line-through";
    if (this.parentElement.style == 'text-decoration:line-through') {
      this.parentElement.getElementsByTagName('span')[0].style = "text-decoration:none"
    }
  });
}
<!doctype html>
<html>
<body>
  <div id="tasks">
    <div>
      <button>Finish</button>
      <span>Finish web tasks</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Go to gym</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Clean home</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Start project</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Prepare to calculus</span>
    </div>
  </div>

</body>

</html>

Upvotes: 2

Views: 9758

Answers (4)

Aaronmacaron
Aaronmacaron

Reputation: 417

This JavaScript Code should work:

var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function () {
        var parentSpanStyle = this.parentElement.getElementsByTagName('span')[0].style;
        if (parentSpanStyle.textDecoration === 'line-through') {
            parentSpanStyle.textDecoration = "none"
            return;
        }
        parentSpanStyle.textDecoration = "line-through";
    });
}

Note the return statement inside the if statement. It prevents overriding to line-through immediately after setting textDecoration to "none".

Upvotes: 0

Andy
Andy

Reputation: 63524

You're much better off adding and removing a CSS strike class. You can also use nextElementSibling to make your code a little more concise.

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', handleClick, false);
}

function handleClick() {
  const el = this.nextElementSibling;
  if (el.classList.contains('strike')) {
    el.classList.remove('strike')
  } else {
    el.classList.add('strike');
  }
}
.strike {
  text-decoration: line-through;
}
<div id="tasks">
  <div>
    <button>Finish</button>
    <span>Finish web tasks</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Go to gym</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Clean home</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Start project</span>
  </div>
  <div>
    <button>Finish</button>
    <span>Prepare to calculus</span>
  </div>
</div>

Upvotes: 1

Barmar
Barmar

Reputation: 780974

Although you can assign a string to the style property of an element, when you read this property you get an object with all the styles, so comparing it with a string won't work.

You should access the specific style you want, with .style.textDecoration.

Also, you were testing the style of the parent, not the span.

var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
  button[i].addEventListener('click', function() {
    var span = this.parentElement.querySelector("span");
    if (span.style.textDecoration == "line-through") {
      span.style.textDecoration = "none";
    } else {
      span.style.textDecoration = "line-through";
    }
  });
}
<!doctype html>
<html>

<body>
  <div id="tasks">
    <div>
      <button>Finish</button>
      <span>Finish web tasks</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Go to gym</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Clean home</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Start project</span>
    </div>
    <div>
      <button>Finish</button>
      <span>Prepare to calculus</span>
    </div>
  </div>

</body>

</html>

Upvotes: 0

Isaac Vidrine
Isaac Vidrine

Reputation: 1666

Just check to see if textDecoration == 'line-through', if not set it to 'line-through', if it does, set it to 'none'

<!doctype html>
<html>

  <head>
	
   
  </head>



  <body>
    <div id="tasks">
      <div>
      	<button>Finish</button>
      	<span>Finish web tasks</span>
      </div>
      <div>
      	<button>Finish</button>
      	<span>Go to gym</span>
      </div>
      <div>
      	<button>Finish</button>
      	<span>Clean home</span>
      </div>
      <div>
      	<button>Finish</button>
      	<span>Start project</span>
      </div>
      <div>
      	<button>Finish</button>
      	<span>Prepare to calculus</span>
      </div>
    </div>
    <script type="text/javascript">
    	var button = document.getElementsByTagName("button");
    	for(var i = 0; i<button.length;i++){
button[i].addEventListener('click', function() {
    				if(this.parentElement.style.textDecoration == 'line-through'){
    					this.parentElement.style.textDecoration = 'none';
    				} else {
              this.parentElement.style.textDecoration = "line-through";
            }
    		});
    }
    </script>
  </body>

</html>

Upvotes: 5

Related Questions