Я пытаюсь изменить цвет моей текстовой метки флажка, когда пользователь устанавливает флажок и нажимает кнопку переключения.Я посмотрел другие примеры и попытался найти собственное решение ниже, но оно не работает, когда я ставлю флажки и хочу нажать кнопку.Мне было интересно, почему?
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>
Как работает моя программа: пользователь вводит текстовое поле в текстовое поле и нажимает кнопку добавления, которая создает флажок для их ввода.Я хочу, чтобы имя их ввода рядом с флажком меняло цвета, когда я проверяю его и нажимаю кнопку переключения.