how to use an element id in javascript if statement

Question

I have the below anchor tag with an ID tied to a record in my database. I want to do something in javascript to say if dhx_1_id = 6669 then make calevvw's backround blue else make it white. Is this possible? Thanks.

<a id="calevvw" dhx_l_id="6669" data-ajax="false" href="eventview.php?eventid=6669" class="dhx_list_item dhx_list_day_events_time" style="width:auto; border-bottom: 1px solid #cbcbcb; padding:px; margin:px;">
</a>

Sure it's possible. Where are you stuck? What have you tried? — cookie monster
– cookie monster, Commented Mar 23, 2014 at 23:01
And why are you using data- for one custom attribute, but not for the other? — cookie monster
– cookie monster, Commented Mar 23, 2014 at 23:02
And if all you want is to change its background, why not add a class and just do it with CSS? Even without the class, you can just use CSS. #calevvw[dhx_1_id=6669] {background-color: blue} — cookie monster
– cookie monster, Commented Mar 23, 2014 at 23:04
To make it easier, consider jquery, or better still knockout.js (though css is simpler in this case thanks @cookiemonster). — ctrl-alt-delor
– ctrl-alt-delor, Commented Mar 23, 2014 at 23:05
And you definitely don't need jQuery or any other library for that matter just for this tiny bit of JavaScript. — cookie monster
– cookie monster, Commented Mar 23, 2014 at 23:17

Oriol · Accepted Answer · 2014-03-23 22:55:03Z

2

var el = document.getElementById('calevvw');
el.style.backgroundColor = +el.getAttribute('dhx_l_id') == 6669 ? 'blue' : 'white';

answered Mar 23, 2014 at 22:55

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

2 Comments

Oriol Over a year ago

Probably it's not necessary to use + to convert the attribute to a number, since I use == instead of the strict ===, but I don't like loose comparisons between different types.

Racil Hilan Over a year ago

@Steven The code you posted here has errors. See my answer. And do not post code in comments because it will be very hard to read it. Instead, edit your question and post code there.

Racil Hilan · Accepted Answer · 2014-03-24 17:12:20Z

1

Your code has errors. Try this:

<a id="calevvw" dhx_l_id="6669" data-ajax="false" href="eventview.php?eventid=6669"
 class="dhx_list_item dhx_list_day_events_time"
 style="width:auto; border-bottom: 1px solid #cbcbcb; padding: 0px; margin: 0px;">Test</a>

<script type="text/javascript">
    var el = document.getElementById('calevvw');
    el.style.backgroundColor = el.getAttribute('dhx_l_id') == 6669 ? 'blue' : 'white';
</script>

answered Mar 24, 2014 at 17:12

Racil Hilan

25.4k13 gold badges56 silver badges61 bronze badges

2 Comments

Steven Over a year ago

thats the same answer as above and does not work upon page load. or at any point.

Racil Hilan Over a year ago

@Steven No it is not the same. Your comment to that answer was that it didn't work and you posted code that you tried, but your code contained errors, so of course it wouldn't work. Here, I'm providing the entire HTML and JavaScript to make sure you're making mistakes when you use it. For example, the order of JavaScript bellow the link is important. I also added "Test" as the text of the link, otherwise you won't see the background. This code example is working and I tested it. If you're having issues applying it to your code, you need to edit your question and post your code so we can help.

Collectives™ on Stack Overflow

how to use an element id in javascript if statement

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related