javascript/html - change color of checkbox text when box if checked by user

Question

I'm trying to change the color of my checkbox text label when the user checks the box and clicks the toggle button. I looked up other examples and tried to make my own solution below but it doesn't work when I check the boxes I want to check and click the button. I was wondering why?

function addItem() {
  var input = document.getElementById("textbox");
  var wrapper = document.getElementById("checklist_items");
  if (input.value.trim() != "") {
    var new_element = document.createElement("DIV");
    new_element.innerHTML = '<input type="checkbox"> ' + input.value;
    wrapper.appendChild(new_element);
    document.getElementById('textbox').value = '';
  } else {
    alert("You must enter at least 1 character.");
  }
}

function toggleItem() {
  var chkbx = document.querySelectorAll('checklist_items');
  if (chkbx.checked) {
    document.getElementById('checklist_items').style.color = "red";
  } else {
    document.getElementById("checklist_items").style.backgroundColor = "transparent";

  }

}

<html>
    <head>
	    <title>Checklist</title>
    </head>
    <body>
	    <div><h1>My to-do list</h1></div><br />
	    <div id ="myCheckList">Enter an item:</div>
	    <div>Type something: <input type="text" id="textbox"></input></div>
	    <input type="button" id="addBut" value = "Add item" onclick="addItem()"/>
	    <input type="button" id="toggleBut" value = "Toggle highlight" onclick="toggleItem()"/>
	
	    <script src="addHandler.js"></script>
	    <div id="checklist_items"></div>
    </body>
</html>

How my program works is the user enters a bunch of text in the textbox and clicks the add button, which creates a checkbox for their input. I want the name of their input beside the checkbox to change colors when I check it and click the toggle button.

Hi Dobrikella, looks like you are not using properly querySelectorAll and document.getElementById("box"), box id element does not exist — Juan Caicedo
– Juan Caicedo, Commented Sep 27, 2019 at 16:38
Inputs are self-closing and can't contain any descendants, so no </input> — j08691
– j08691, Commented Sep 27, 2019 at 16:47
You aren't showing this in your example, but does your checklist_items DIV contain a bunch of checkboxes and you want to change the background color of the checkbox labels if the boxes are checked? If so, please update your example to show us what the checkboxes and labels look like — jwatts1980
– jwatts1980, Commented Sep 27, 2019 at 16:49

chofre117 · Accepted Answer · 2019-09-27 20:33:51Z

1

var chkbx = document.querySelectorAll('checklist_items') needs to be var chkbx = document.querySelectorAll('#checklist_items') or var chkbx = document.getElementById('checklist_items'). querySelectorAll takes CSS selectors as arguments, which are either html elements or class or id names with the corresponding prefix. IDs have the prefix # and classes have the prefix .

answered Sep 27, 2019 at 20:33

chofre117

151 silver badge7 bronze badges

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

Comments

Kamil Waniczek · Accepted Answer · 2019-09-27 20:05:59Z

0

Using JQuery:

$(".your_checkbox_class").change(function () {
    if ($(this).is(':checked')) {
        $(this).css("background-color","your_color_here");
    }
};

EDIT: You should also give this checkbox class or id

EDIT 2:

document.getElementById('checklist_items').style.color = "red";

means that font color will change but checkbox has no text

answered Sep 27, 2019 at 20:05

Kamil Waniczek

6711 bronze badges

1 Comment

Marvin Acosta Over a year ago

is it running perfectly? I am trying to create a checkbox from the system that once it is checked, the button on the front page is changed to its color. is it possible to use this code? what should be the code for the checkbox?

Collectives™ on Stack Overflow

javascript/html - change color of checkbox text when box if checked by user

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related