I would like to change the color of my input label through JavaScript. I'm doing the same with list items and selecting the input. They both work fine. However, it won't change the color of the label when I have it written the same way. Is my code incorrect? or is there another way to complete this task in a similar fashion?
My code:
//Highlights current page from submenu- This works
link = document.getElementById("<?php echo "$link";?>");
link.style.background = "#CCCCCC";
link.style.color = "#3385D6";
link.style.fontWeight = "bold";
link.style.border = "1px solid";
link.style.borderColor = "#BBBBBB";
//Highlights current submenu tab
subbtn = document.getElementById("<?php echo "$subTab";?>");
subbtn.checked= true;
//Doesn't work
subbtn.style.background = "#CCCCCC";
subbtn.style.color = "#3385D6";
subbtn.style.fontWeight = "bold";
My HTML:
<input type="radio" id="reveal-email">
<li><label for="reveal-email" >Tab that i want to change</label></li>
Based on your using a checked property on it, I'm going to guess that subbtn is an input type="checkbox" or input type="radio". So you're not setting the color and background of the label at all, that's a separate element.
If your HTML has the input inside the label (as is frequently the case), then:
var parentStyle = subbtn.parentNode.style;
parentStyle.background = "#CCCCCC";
parentStyle.color = "#3385D6";
parentStyle.fontWeight = "bold";
Live Example:
var subbtn = document.getElementById("subbtn");
var parentStyle = subbtn.parentNode.style;
parentStyle.background = "#CCCCCC";
parentStyle.color = "#3385D6";
parentStyle.fontWeight = "bold";
<label>
<input type="checkbox" id="subbtn"> This is the label
</label>
(The HTML you added indicates that you're using for instead, so see below.)
If your HTML has them separated and linked by the for attribute on the label matching the id of the checkbox, then the first line changes somewhat:
var parentStyle = document.querySelector('label[for="' + subbtn.id + '"]').style;
Live Example:
var subbtn = document.getElementById("subbtn");
var parentStyle = document.querySelector('label[for="' + subbtn.id + '"]').style;
parentStyle.background = "#CCCCCC";
parentStyle.color = "#3385D6";
parentStyle.fontWeight = "bold";
<input type="checkbox" id="subbtn">
<label for="subbtn">This is the label</label>
If you're not linking them in either way, you should, so that clicking the label will toggle the checkbox.
Related
I'm new to html and learning through YouTube and such. I'm writing a JavaScript which allows me to show a custom window with checkboxes and textboxes (and labels) on it. I disabled the textboxes to begin with, but I would like them to be enabled when the corresponding checkboxes are checked.
I've searched on the internet for a solution, already tried using:
document.getElementById('chb1').onclick = function() { //my function };
or
document.getElementById('chb1').onclick = //my function;
but neither of them works.
function MyCheckboxWindow()
{
this.render = function(func,titel,dialog,checktext1)
{
var dialogboxbody = document.getElementById ('dialogboxbody');
dialogboxbody.innerHTML = dialog + ': <br>';
if(checktext1 != null)
{
dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
+ '<label for="txt1">€</label> <input type="text" id="txt1" value="0,00" disabled>';
document.getElementById('lbl1').innerHTML = checktext1 + ': ';
document.getElementById('chb1').onclick = alert('');
}
else if(!checkboxCheck)
{
dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
+ '<label for="txt1">€</label> <input type="text" id="txt1" value="0,00" disabled>';
document.getElementById('lbl1').innerHTML = "Other: : ";
document.getElementById('chb1').onclick = Change.ischanged('chb1');
checkboxCheck = true;
}
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="CheckboxWindow.ok(\''+func+'\')">Ok</button> <button onclick="CheckboxWindow.cancel()">Cancel</button>';
}
}
var CheckboxWindow = new MyCheckboxWindow();
function CheckboxChanged()
{
this.ischanged(id)
{
alert('');
}
}
var Change = new CheckboxChanged();
Just for info, there should be 6 of these checkboxes, but I left them out in this example. Also, in the "if", I replaced my function by an alert. The code in the if-clause produces an alertbox only when I open the custom window, clicking the checkbox doesn't do anything (but tick the box).
Writing it like I did in the "else if" in this example, doesn't produce anything at all, nor does function() { Change.ischanged('chb1'); } (like I said before).
Please tell me why this isn't working. There's probably a better way of adding these checkboxes as well, so if you know any, please let me know as well.
Hope this helps as a starting point:
//Dynamically create a checkbox, and add it to a div.
//appendChild() works for other types of HTML elements, too.
var div = document.getElementById("div");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_1";
div.appendChild(checkbox);
var textbox = document.createElement("input");
textbox.type = "text";
textbox.disabled = true; //programmatically disable a textbox
div.appendChild(textbox);
//do something whenever the checkbox is clicked on (when user checks or unchecks it):
checkbox.onchange = function() {
if(checkbox.checked) { //if the checkbox is now checked
console.log("checked");
textbox.disabled = false;
}
else {
console.log("unchecked");
textbox.disabled = true; //programmatically disable a textbox
}
}
<div id='div'></div>
Thanks for your reply and I'm sorry for responding this late, I was quite busy the past 2 weeks and didn't have a lot of time.
I've tried to use your sample code but was unable to make it work. However, I was able to get it working by adding "onclick="Change.ischanged()" to the input in the if statement. I'm sure I tried something like that before, but I probably typed "CheckboxWindow" or "CheckboxChanged" instead of "Change" by mistake.
if(checktext1 != null)
{
dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1" onclick="Change.ischanged()"><label for="chb1" class="lbl" id="lbl1"></label>'
+ '<label for="txt1">€</label> <input type="text" id="txt1" value="0,00" disabled>';
document.getElementById('lbl1').innerHTML = checktext1 + ': ';
}
I know that adding the objects like this isn't the best way, but I seem to be having trouble trying to achieve my goal in your way.
I also changed "this.ischanged(id)" to "this.ischanged = function()" (I also made it so I don't need to pass the id anymore).
Try the OnClick event instead of the OnChange event for the checkbox.
//Dynamically create a checkbox, and add it to a div.
//appendChild() works for other types of HTML elements, too.
var div = document.getElementById("div");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_1";
div.appendChild(checkbox);
var textbox = document.createElement("input");
textbox.type = "text";
textbox.disabled = true; //programmatically disable a textbox
div.appendChild(textbox);
//do something whenever the checkbox is clicked on (when user checks or unchecks it):
checkbox.onclick = function() {
if(checkbox.checked) { //if the checkbox is now checked
console.log("checked");
textbox.disabled = false;
}
else {
console.log("unchecked");
textbox.disabled = true; //programmatically disable a textbox
}
}
<div id='div'></div>
I am a still a newbie so sorry for any mistakes. I have searched a lot and couldn't solve my problem. I dynamically created this radio input:
var radio_input = document.createElement('input');
radio_input.type = "radio";
radio_input.name = "test_input"
radio_input.value = "teeest";
radio_input.appendChild(my_form);
However I can't get the input value to show up. I get something similar to this:
(but one instead of 3)
I want to have "test" written in the left side of the input... Can someone help me?
As #RobertoLinare said in his comment, you can create a div and append the label:
var radio_input = document.createElement('input');
var label = document.createElement('label');
var div = document.createElement('div');
radio_input.type = "radio";
radio_input.name = "test_input"
radio_input.value = "teeest";
label.innerHTML = "Label";
document.getElementById("my_form").appendChild(div);
div.appendChild(label);
div.appendChild(radio_input);
<form id="my_form">
</form>
Html :
<form id="my_form"></form>
JS :
var myForm = document.getElementById("my_form");
// Clear previous contents of the container
while (myForm.hasChildNodes()) {
myForm.removeChild(myForm.lastChild);
}
var radio_input = document.createElement("input");
radio_input.type = "radio";
radio_input.name = "test_input";
radio_input.value = "teeest";
var label = document.createElement('label');
label.innerHTML = "Label Title ";
myForm.appendChild(radio_input);
myForm.appendChild(label);
I'm building a small to do list and everything worked fine so far until I included a checkbox. now when I click on the button, nothing happens and neither do I see a checkbox. There must be something wrong with the order of code-does someone know how I need to rearrange the code and WHY?
Html code:
<body>
<h1>To Do List</h1>
<p><input type="text" id="textItem"/><button id="add">Add</button></p>
<ul id="todoList">
</ul>
</body>
Javascript code:
function addItem() {
var entry = document.createElement("li");
var checkBox = document.getElementById("input");
checkBox.type = "checkbox";
var span = document.createElement("span");
span.innerText = entry;
var textItem = document.getElementById("textItem");
entry.innerText = textItem.value;
var location = document.getElementById("todoList");
entry.appendChild(checkBox);
entry.appendChild(span);
location.appendChild(entry);
}
var item = document.getElementById("add");
item.onclick = addItem;
UPDATED - I've spotted 4 issues . Follow Below :
1st : When you create the check box you should be using setAttribute method to specify input type : checkbox.setAttribute("type" , "checkbox")
2nd : Your checkbox variable should be creating an input element : var checkBox = document.createElement("input");
3rd : You should be using innerHtml instead of innerText as you are referencing a list ELEMENT stored in your entry variable : span.innerHtml = entry;
4th: Really minor but you should grab your item and attach an event to the item before your function :
var item = document.getElementById("add");
item.addEventListener("click" , addItem)
Just change your javascript to the following :
var item = document.getElementById("add");
item.addEventListener("click" , addItem)
function addItem() {
var entry = document.createElement("li");
var checkBox = document.createElement("input");
checkBox.setAttribute("type" , "checkbox");
var span = document.createElement("span");
span.innerHtml = entry;
var textItem = document.getElementById("textItem");
entry.innerText = textItem.value;
var location = document.getElementById("todoList");
entry.appendChild(checkBox);
entry.appendChild(span);
location.appendChild(entry);
}
Example Here : http://codepen.io/theConstructor/pen/pyPdgg
Good Luck!
I want that when the "Yes" radio button of a form (form1) is checked, a new form (form2) appears, with two radio buttons and their text "Yes" and "No". With an event "onclick" in the "Yes" button of the form1, I manage to make the new form appear, with the two radio buttons, but I cannot make their text appear. Since radio buttons do not have "innerHTML", I try to add the text either as plain text, either as "label", but it is not working.
Is it a problem in the syntax or in the logic (not possible to create text at the same time as the button)?
In my HTML body I have this:
<form id="form1">
<input type="radio" id= "form1_no" value="no" checked>
<label for = "form1_no" >No</label>
<input type="radio" id= "form1_yes" value="yes" onClick= exam()>
<label for = "form2_yes" >Yes</label>
</form>
The function exam() is:
<script type='application/javascript'>
function exam() {
var inputno = document.createElement("input");
inputno.type = "radio";
inputno.id = "form2_no";
inputno.value = "no";
inputno.onclick = function () {alert("I select No in Form 2")};
document.getElementById("form2").appendChild(inputno); // this is working
var inputyes = document.createElement("input");
inputyes.type = "radio";
inputyes.id = "form2_yes";
inputyes.value ="yes";
inputyes.onclick = function () {alert("I select Yes in Form 2")};
document.getElementById("form2").appendChild(inputyes); // this is working
// now, the code that is not working:
// 1st tentative (adding "Yes" and "No" as plain text after their radio button):
var textno = "No";
document.getElementById("form2_no").appendChild(textno);
var textyes = "Yes";
document.getElementById("form2_yes").appendChild(textyes);
// 2nd tentative (adding "Yes" and "No" as labels to their radio button):
var labelno = document.createElement("label");
labelno.for="form2_no";
labelno.innerHTML = "No";
document.getElementById("form2_no").appendChild(labelno);
var labelyes = document.createElement("label");
labelyes.for="form2_yes";
labelyes.innerHTML = "Yes";
document.getElementById("form2_yes").appendChild(labelyes);
}
</script>
Something like this works to create a button and label.
<div id="radio_home"></div>
<script>
var radio_home = document.getElementById("radio_home");
function makeRadioButton(name, value, text) {
var label = document.createElement("label");
var radio = document.createElement("input");
radio.type = "radio";
radio.name = name;
radio.value = value;
label.appendChild(radio);
label.appendChild(document.createTextNode(text));
return label;
}
var yes_button = makeRadioButton("yesbutton", "yes", "Oh yea! do it!");
radio_home.appendChild(yes_button);
</script>
EDIT:
Currently using this javascript code, it works for the plus box but not the minus. (changed code fragment from the below.
// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.id= "submit2";
newAddButton.type = "button";
newAddButton.value = " + ";
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
newAddButton.id= "submit2";
I've got a javascript form, two buttons and a form is created when the plus is clicked, I was just wondering if the buttons that appear can be set to the same CSS style as the button next to the drop down lists.
So in short a css style attached to the buttons made through a javascript
HTML
<div id="mainContainer">
<div>
<select name="text[]">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
<input name="none" type="button" id="submit2" onClick="addNew();" value=" + ">
</div>
</div>
JAVASCRIPT
var counter = 0;
function addNew(e) {
var countAll = document.getElementsByTagName("select").length - 1;
var lastSelectBox = document.getElementsByTagName("select")[countAll];
var items = lastSelectBox.innerHTML;
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
// Create a new text input
var newText = document.createElement('select');
newText.type = "select";
newText.setAttribute("name", "text[]");
newText.innerHTML = items;
//for testing
// Create buttons for creating and removing inputs
var newAddButton = document.createElement('input');
newAddButton.type = "button";
newAddButton.value = " + ";
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = " - ";
// Append new text input to the newDiv
newDiv.appendChild(newText);
// Append new button inputs to the newDiv
newDiv.appendChild(newAddButton);
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
// Add a handler to button for deleting the newDiv from the mainContainer
newAddButton.onclick = addNew;
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
};
};
There are a number of things wrong with the fiddle.
To get your question out of the way, the CSS has an extraneous }, which causes the style for #submit3 to be ignored. Remove it.
The Javascript in the fiddle should not be wrapped in an onload handler; set it to "No wrap - in head" or "No wrap - in body". Otherwise clicking the button won't work.
The newly created buttons all have the same IDS. This is a no-no. Make the Javascript remember how many buttons there are and give them a unique ID based on the count. (Something like ++numberofbuttons; id = 'submit'+(numberofbuttons*2); for the one, and same plus +1 for the other.)
Oh, and your fiddle differs from the example code in the question. Don't do that.