Add CSS class with Javascript based on assigned values

59 Views Asked by At

I have a web-based crm and am trying to edit the layout of a particular page. I want to add a class using javascript depending on the values of "created_by_name" is the same as "assigned_user_name".

Here's the javascript...

<script>
    var assigneduser = document.getElementById("<%= model.get('created_by_name') %>").value;
    var createdby = document.getElementById("<%= model.get('assigned_user_name') %>").value;

    if (assigneduser === createdby) {
        document.getElementById("eachmessage").className += " message to";


    } else {
        document.getElementById("eachmessage").className += " message from";
    }
</script>

Here's the complete code.

<script>
    var assigneduser = document.getElementById("<%= model.get('created_by_name') %>").value;
    var createdby = document.getElementById("<%= model.get('assigned_user_name') %>").value;

    if (assigneduser === createdby) {
        document.getElementById("eachmessage").className += " message to";


    } else {
        document.getElementById("eachmessage").className += " message from";
    }
</script>
<% var rowsOnly = (rowsOnly != 'undefined' && rowsOnly) %>
<% if (!rowsOnly) { %>
<div class="messages-wrapper">
    <ul data-role="listview" data-theme="a" id="list-view">
    <% } %>
    <% if (collection.length > 0) { %>
    <%
    _.each(collection.models, function(model, key) {
    %>  
    <li name="eachmessage" class="">
        <h5><%= model.get('name') %>&nbsp;</h5>                 
        <p><%= model.get('created_by_name') %>&nbsp;</p>                    
        <p><%= model.get('description') %>&nbsp;</p>                    
        <p><%= helper.getDateTime().convertToDisplayDate(model.get('date_entered')) %>&nbsp;</p>
        <p><%= model.get('assigned_user_name') %>&nbsp;</p>                 
        <a data-icon="arrow-r" href="#<%= collection.module %>/create" data-theme="c"><%= helper.string('New') %></a>
    </li>
    <% }); %>
    <% } else { %>
    <li> <%= helper.string('You have no messages.') %></li>
    <% } %>
    <% if (!rowsOnly) { %>
    </ul>
</div>
<% } %>

Can someone help me understand how to correctly call for the values of created_by_name and assigned_user_name so I can compare and apply css as needed.

Or, if there is a better way to do this using something other than javascript, let me know.

0

There are 0 best solutions below