So 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?
html:
<html>
<head>
<title>Survey</title>
</head>
<body>
<div id ="myCheckList">Enter:</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>
javascript:
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("box").style.backgroundColor = "transparent";
}
}
Aucun commentaire:
Enregistrer un commentaire