Add color or style to javascript

bt707
bt707 used Ask the Experts™
on
I some javascript that i'm using (with help from Arvind) which will take a group of checkboxes and for eachone that is checked will print out the value of the checkbox label at the bottom of the page or where I need it, such as:
Option one
Option three
Option four

Is working fine for what I need but trying to see how to add color to the text it outputs and or add a label to the output but am not getting that work for the output it gives me.

How can I add color to the test output or better add a class to it so I can style it as needed with CSS.

Thanks for any help on this.

Below is the HTML and javascript I'm working with

    <div class="checkboxes">
        <input type="checkbox" name="lra" id="1adm" value="selected">
        <label for="1adm" class="highlight">Option one</label>
        <br>
        <input type="checkbox" name="lra" id="2adm" value="selected">
        <label for="2adm" class="highlight">Option two</label>
        <br>
        <input type="checkbox" name="lra" id="3adm" value="selected">
        <label for="3adm" class="highlight">Option three</label>
        <br>
        <input type="checkbox" name="lra" id="4adm" value="selected">
        <label for="4adm" class="highlight">Option four</label>
        <br>
    </div>

Open in new window


let selector = 'input[type="checkbox"][name="lra"]';
let updateStatus = function() {
  let labels = [];
  Array.prototype.slice.call(document.querySelectorAll(selector + ':checked + label')).forEach(function(l) {
    labels.push(l.textContent || l.innerHTML);
  });
    const newLocal = '#checkStatus';
  document.querySelector(newLocal).innerHTML = (labels.join('<br/>') || 'Kindly choose from above options');
};
document.addEventListener('DOMContentLoaded', function() {
  Array.prototype.slice.call(document.querySelectorAll(selector)).forEach(function(c) {
    c.addEventListener('click', function(e) {
      e.stopPropagation();
      updateStatus();
    });
  });
  updateStatus(); /* run on page load */
});

Open in new window


.checkboxes label {
    font-family: Open Sans Italic;
    font-size: 12px;
    color: white;
    font-weight: bold;
    border-radius: 20px 20px 20px 20px;
    background: blue;
    padding: 1px 6px;
    text-align: left;
  }
  
  input[type=checkbox]:checked+label {
    color: white;
    background: green;
  }
  
  #checkStatus {
    border-top: 1px solid #ccc;
    padding: 1rem;
    margin-top: .3rem;
  }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You can easily achieve the results by using jQuery and adding a click function and either adding CSS:

https://www.w3schools.com/jquery/css_css.asp

Or adding a class to a specific ID or class:

https://www.w3schools.com/jquery/html_addclass.asp

Author

Commented:
I missed a line in the bottom of the HTML

This line is needed as it makes it all work where needed.

<div id="checkStatus"></div>

So the HTML should be

    <div class="checkboxes">
        <input type="checkbox" name="lra" id="1adm" value="selected">
        <label for="1adm" class="highlight">Option one</label>
        <br>
        <input type="checkbox" name="lra" id="2adm" value="selected">
        <label for="2adm" class="highlight">Option two</label>
        <br>
        <input type="checkbox" name="lra" id="3adm" value="selected">
        <label for="3adm" class="highlight">Option three</label>
        <br>
        <input type="checkbox" name="lra" id="4adm" value="selected">
        <label for="4adm" class="highlight">Option four</label>
        <br>
    </div>

    <div id="checkStatus"></div>

Open in new window

Author

Commented:
Thanks for that, I see now that I already have an ID for this but did not notice that, so can actually do what I wanted to do.

Thanks,

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial