Show Javascript data-attribute value in conditional statement

Question

I know how to show data-attribute value inside any tag. But how can I apply if else conditions to show text ?

For example, if there is data-attribute with value, then it will be display. But if there's no data-attribute found, the default text will be display.

Here's my simple code.

<h2 id="text" data-text="A Data Text Message"></h2>

<script type="text/javascript">
let message = document.getElementById("text").getAttribute("data-text");

/* If data-text attribute found with value, then this message will be show*/
// document.getElementById("text").innerHTML = message;

/* Otherwise this default message will be display*/
document.getElementById("text").innerHTML="A Data Text Messages";
</script>

Adam Pearson · Accepted Answer · 2022-12-20 10:31:43Z

1

let message = document.getElementById("text").getAttribute("data-text");

if (message) {
  document.getElementById("text").innerHTML = message;
} else {
  document.getElementById("text").innerHTML="A Data Text Messages";
}

<h2 id="text" data-text="A Data Text Message"></h2>

You just need to check if the message variable is truthy. If the data-text attribute has a value, it'll be truthy, if it doesn't, it won't be.

answered Dec 20, 2022 at 10:31

Adam Pearson

4042 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asma Binta Younus Over a year ago

Almost all the given solutions were good. But for me, It's looks easy. Thanks @Adam Pearson

freefaller Over a year ago

Thank you for the edit on my question... I keep forgetting that ?? is now standard, ever since IE went out of support life. However, it's worth noting that ?? is not the same as ?: as it does not deal with empty strings as falsey

adarsh · Accepted Answer · 2022-12-20 10:31:06Z

1

You can apply if-else condition this way:

if (message == undefined || message.length == 0 ) {
    document.getElementById("text").innerHTML="A Data Text Messages";
  }
else{ 
    document.getElementById("text").innerHTML = message;
  }

answered Dec 20, 2022 at 10:31

adarsh

711 silver badge7 bronze badges

Comments

freefaller · Accepted Answer · 2022-12-20 13:14:26Z

A simple way would be to use the conditional (ternary) operator ? :

If message is null or empty it will use the 2nd part of the operator...

// Example using attribute
setH2(document.getElementById("text"));

// Example using empty or missing attribute
setH2(document.getElementById("text2"));

function setH2(ctrl) {
  let message = ctrl.getAttribute("data-text");
  ctrl.innerHTML = (message ? message : "A Data Text Messages");
}

<h2 id="text" data-text="A Data Text Message"></h2>
<h2 id="text2"></h2>

You could also simplify this by using the nullish coalescing operator ??:

// Example using attribute
setH2(document.getElementById("text"));

// Example missing attribute
setH2(document.getElementById("text2"));

// Example EMPTY attribute
setH2(document.getElementById("text3"));

function setH2(ctrl) {
  let message = ctrl.getAttribute("data-text");
  ctrl.innerHTML = (message ?? "A Data Text Messages");
}

<h2 id="text" data-text="A Data Text Message"></h2>
<h2 id="text2"></h2>
<h2 id="text3" data-text=""></h2>

This checks if message is nullish - if it is, it uses whatever is after the ??, if it is not, it uses the message variable.

BUT NOTE this it does not recognise the empty attribute as being falsey.. so it will only work with a missing attribute

Collectives™ on Stack Overflow

Show Javascript data-attribute value in conditional statement

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related