What is the correct way to create an if statement that checks if a style attribute is empty?

Question

What is the correct way to create an if statement that checks if a style attribute is empty?

Currently, I am working on a feature that involves toggling the struck-through style of a span element when clicked. After experimenting with an if statement to determine the textDecoration attribute's value using console.dir(x), I found that the returned value is textDecoration:"". How can I incorporate this into an if statement?

var x = document.querySelectorAll("span")

for(var i=0; i<x.length; i++){

    x[i].addEventListener("click", function(){

        if(this.style.textDecoration = ""){

            this.style.textDecoration = "line-through"
        }
        else{

            this.style.textDecoration = ""
        }
})
}

Update: Despite the current code implementation, clicking the span element does not trigger any changes visually.

javascript if-statement dom javascript-objects dom-events

Answer 1

Answer №1

The issue you are encountering is a result of using = in your if statement for assignment rather than == or === for equality checking.

On the other hand

An improved approach would be to include a new class rule in your CSS stylesheet:

.lineThrough {
  text-decoration: line-through;
}

Then, in your JavaScript file, simply toggle the class:

var x = document.querySelectorAll("span");

for(var i=0; i<x.length;i++){
    x[i].addEventListener("click", function(){
        this.classList.toggle("lineThrough");
    });
}

Avoid mixing presentation within your logic.

Answer 2

The issue you are encountering is a result of using = in your if statement for assignment rather than == or === for equality checking.

On the other hand

An improved approach would be to include a new class rule in your CSS stylesheet:

.lineThrough {
  text-decoration: line-through;
}

Then, in your JavaScript file, simply toggle the class:

var x = document.querySelectorAll("span");

for(var i=0; i<x.length;i++){
    x[i].addEventListener("click", function(){
        this.classList.toggle("lineThrough");
    });
}

Avoid mixing presentation within your logic.

What is the correct way to create an if statement that checks if a style attribute is empty?

Answer №1

On the other hand

Similar questions

Ways to render component solely based on the alteration of the class props

ng-model in html input with a name of "foo[]"

Create line items using the quantity code as a reference

Issue with jQuery: Changes are not being triggered and clicks are also not working

Using jQuery to send information to PHP via an AJAX request

What are the steps to locally test my custom UI library package built with tsdx in a React.js project

Increase the value of count (an AJAX variable) by 4 upon clicking the button, then send it over to the PHP script

Ways to move all the elements within a given array

Tips for choosing the default tab on Bootstrap

Express.js and gridfs-stream are unable to retrieve the error

Hiding Properties in NodeJS with MongoDB

Tips for submitting data to the identical ejs view or partial following utilizing res.render get?

The callback function in JavaScript seems to be missing without ever being executed

Unable to display nested JSON data from API in Vue.js

Encountering module resolution issue following npm-link for the shared component repository

What is the best way to initiate a slideshow using an external .js file?

Utilize res.write to compress and stream content with gzip or deflate algorithms

Issues arise with AJAX post

Adding a JavaScript variable into a Django template tag

Generating a USA map with DataMaps in d3jsonData