Checkbox to change textdecoration input field - javascript

With javascript, i want my checkbox to change the text decoration of an input text field.
So when it's checked, the text in the input text field turns bold.
Remember i'm learning so i'm not a pro as you guys ;)
I thought something like this;
var checkbox = create("input");
checkbox.type = "checkbox";
checkbox.id = "checkboxId" + counter;
div.appendChild(checkbox);
checkbox.onClick="boldChange(this)"
var input = create("input");
input.type = "input";
input.id = "inputId" + counter;
div.appendChild(input);
function boldChange()
var boldgroup = document.getElementsByName(el.name);
for (var b=0; boldgroup[b]; ++b)
inputId.style.textDecoration = boldgroup[b].checked ? 'bold' : 'none';
}
How can i make this work?
Thank you so much in advance

Here is a working JSFiddle example based on your code above: Link to example
Code snippet: (place below </body> so that all of DOM is loaded)
<script>
var div = document.getElementById('div'),
counter = 0;
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkboxId" + counter;
div.appendChild(checkbox);
checkbox.onclick = boldChange;
counter++;
var input = document.createElement("input");
input.type = "text";
input.id = "inputId" + counter;
div.appendChild(input);
function boldChange() {
input.style.fontWeight = (checkbox.checked)?'bold':'normal';
}
</script>

Related

How do I add a checkbox on the same line as my paragraph?

I am trying to add a check box on the same line as my paragraph in my to do list.
I have tried:
let addToDoButtton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');
addToDoButtton.addEventListener('click', function(){
var paragraph = document.createElement('p');
var checkbox = document.createElement('input');
checkbox.type='checkbox';
paragraph.classList.add('paragraph-styling');
paragraph.innerText = inputField.value;
toDoContainer.appendChild(checkbox);
toDoContainer.appendChild(paragraph);
inputField.value=""
paragraph.addEventListener('click', function () {
paragraph.style.textDecoration="line-through";
paragraph.style.color='#5493f7';
})
paragraph.addEventListener('dblclick', function(){
toDoContainer.removeChild(paragraph);
toDoContainer.removeChild(paragraph)
})
I have also tried:
toDoContainer.appendChild(checkbox) &&
toDoContainer.appendChild(paragraph);
I got this for the output:
Please take a look here
const input = document.createElement('input');
input.id = 'input';
input.type = 'checkbox';
const label = document.createElement('label');
label.htmlFor = 'input';
toDoContainer.append(input, label);

Dynamic checkbox onclick is not working

I am creating dynamic checkboxes and want a function to be called every time I check any checkbox. The checkbox looks good but my onclick event does not work. Also if I do not pass 'this' to my function, my function gets called on load as well.
Below is my code:
for(var i=0; i<options.length; i++) {
var op = options[i].new_name;
var label = document.createElement("label");
var description = document.createTextNode(op);
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "multiselectCheckbox";
checkbox.value = op;
checkbox.onclick= "getCheckedValues(this)";
label.appendChild(checkbox);
label.appendChild(description);
document.getElementById("multiselect").appendChild(label);
document.getElementById("multiselect").appendChild(document.createElement("br"));
}
Please let me know what am I doing wrong here.
The below snippet works. I suppose this is what you want to do. You need not pass this in the function and also call the function without ""
var options = [{new_name: "1"}, {new_name: "2"}]
for(var i=0; i<options.length; i++) {
var op = options[i].new_name;
var label = document.createElement("label");
var description = document.createTextNode(op);
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "multiselectCheckbox";
checkbox.value = op;
checkbox.onclick = getCheckedValues;
label.appendChild(checkbox);
label.appendChild(description);
document.getElementById("multiselect").appendChild(label);
document.getElementById("multiselect").appendChild(document.createElement("br"));
}
function getCheckedValues() {
alert(this.value);
}
<div id="multiselect"></div>

getting the value of checked checkbox to remove from div with DOM

I have a doubt in selecting and verify that the checkbox is checked in a div with id="div1" which in turn is added in another div with id = "box" and the result is checkbox -> div.id = div1 -> divbox.id = box
I have this base function to create checkbox and insert in div1 and add div1 to div box and it´s work and I don´t put the css code because don´t need
function createCheckBox() {
//count
var count = 0;
//create div1
var div1 = document.createElement('div');
div1.id = "div1";
div1.style.fontSize = "20px";
//div box
var divbox = document.createElement('div');
divbox.id = "box";
//checkbox
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "checkBox" + (count++);
checkbox.id = checkbox.name;
var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode("checkBox" + (count++)));
var br = document.createElement('br');
div1.appendChild(checkbox);
div1.appendChild(label);
div1.appendChild(br);
divbox.appendChild(div1);
document.body.appendChild(divbox);
}
my doubt is select checkbox check and return if is checked or not
and in this function removeCheckBox I wanna get value of checked checkbox
in this way divbox.id = box -> div.id = div1 -> checkbox.checked and it´s not work
function removeCheckBox() {
//box
var divbox = document.getElementById("box");
//inside divbox select element with id = div1
var div1 = divbox.getElementById("div1");
for (var i = 0; div1.childNodes.length; i++) {
if (div1.childNodes[i].checked) {
alert("CheckBox is checked");
//remove from div1
div1.removeChild(div1.childNodes[i]);
} else {
alert("CheckBox is not checked");
}
}
}
any suggestion?
There is solution (description in code comment), based on all those comments :
function removeCheckBox() {
var box=document.getElementById('box');
//get all checked checkboxes inside box div
var chk=box.querySelectorAll('[type="checkbox"]:checked');
for(var i=0;i<chk.length;i++) {
box.removeChild(chk[i].parentNode); //remove complete div, who is parent of checked checkbox
}
}
function createCheckBox() {
//count
var count = 0;
var div = document.createElement('div');
div.id = "div1";
div.style.fontSize = "20px";
//div box
var box = document.getElementById('box');
//checkbox
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "checkBox" + (count++).toString();
checkbox.id = checkbox.name;
var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode("checkBox" + (count++)));
var br = document.createElement('br');
div.appendChild(checkbox);
div.appendChild(label);
div.appendChild(br);
box.appendChild(div);
}
<input type="button" value="create" onclick="createCheckBox();" />
<input type="button" value="remove" onclick="removeCheckBox();" />
<br>
<div id="box">
</div>
You have many issues in the code. Your function should look something like this:
function selectCheckBox() {
//box
var box = document.getElementById("box");
//div1
var div1 = document.getElementById("div1"); //should be document not box
for (var i = 0; i < div1.childNodes.length; i++) {//should be condition i < div1.childNodes.length, also not spelling of length
if (div1.childNodes[i].type == 'checkbox') { //make sure it is a checkbox first
if (div1.childNodes[i].checked) {
alert("CheckBox is checked");
} else {
alert("CheckBox is not checked");
}
}
}
}

Dynamic Add, Edit & Delete row in Table in Js

While i click the Add Row button it showing error. I want to append a new 'tr' of every time i click add row button. the each td must contain, checkbox, firstname, lastname, email, mobile edit & save.
i want to save the values if i click save button..
and edit button to edit the fields.
Checkbox is to select the multiple rows and delete the entire row.
Can someone please help me to do this.. thanks in advance.
var form = document.createElement('form');
document.body.appendChild(form);
var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);
var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
function addTable() {
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(checkbox);
cell.appendChild(input);
cell.appendChild(input1);
cell.appendChild(input2);
cell.appendChild(input3);
cell.appendChild(btnSave);
cell.appendChild(btnEdit);
}
JsFiddle
First and most important thing to change is the tag you're using for your add row button. By using a button you're going to cause the form to submit each time you press it, thereby undoing your row add and any other page changes. Use an < input > tag with type button if you want the same look. You'll probably want to do the same with your save edit and delete buttons if you want the page to respond without reloading.
For everything else you're pretty much there. If I were you I would stop using setAttribute for everything. You can set the id and onclick of an element by a direct property set (ie table.id = "myTable";). I typically only use setAttribute for inline style when I want to set more than one property at once (ie table.setAttribute("style","border:2px solid;color:red;");
Here's my version of your code that works.
window.onload = function(){
var addTable = function() {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var row = document.createElement('tr');
table.appendChild(row);
addCell(row,checkbox);
addCell(row,input);
addCell(row,input1);
addCell(row,input2);
addCell(row,input3);
addCell(row,btnSave);
addCell(row,btnEdit);
addCell(row,btnDelete);
};
var form = document.createElement('form');
form.method = "post";
document.body.appendChild(form);
var table = document.createElement('table');
table.id = "myTable";
form.appendChild(table);
var btnClick = document.createElement('input');
btnClick.type = "button";
btnClick.value = "Add Row";
btnClick.onclick = addTable;
form.appendChild(btnClick);
};
function addCell(row,elm){
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(elm);
}

Creating the checkbox dynamically using JavaScript?

I am trying to create a checkbox dynamically using following HTML/JavaScript. Any ideas why it doesn't work?
<div id="cb"></div>
<script type="text/javascript">
var cbh = document.getElementById('cb');
var val = '1';
var cap = 'Jan';
var cb = document.createElement('input');
cb.type = 'checkbox';
cbh.appendChild(cb);
cb.name = val;
cb.value = cap;
cb.appendChild(document.createTextNode(cap));
</script>
You're trying to put a text node inside an input element.
Input elements are empty and can't have children.
...
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";
var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode('text for label after checkbox'));
container.appendChild(checkbox);
container.appendChild(label);
The last line should read
cbh.appendChild(document.createTextNode(cap));
Appending the text (label?) to the same container as the checkbox, not the checkbox itself
You can create a function:
function changeInputType(oldObj, oTyp, nValue) {
var newObject = document.createElement('input');
newObject.type = oTyp;
if(oldObj.size) newObject.size = oldObj.size;
if(oldObj.value) newObject.value = nValue;
if(oldObj.name) newObject.name = oldObj.name;
if(oldObj.id) newObject.id = oldObj.id;
if(oldObj.className) newObject.className = oldObj.className;
oldObj.parentNode.replaceChild(newObject,oldObj);
return newObject;
}
And you do a call like:
changeInputType(document.getElementById('DATE_RANGE_VALUE'), 'checkbox', 7);
/* worked for me */
<div id="divid"> </div>
<script type="text/javascript">
var hold = document.getElementById("divid");
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "chkbox1";
checkbox.id = "cbid";
var label = document.createElement('label');
var tn = document.createTextNode("Not A RoBot");
label.htmlFor="cbid";
label.appendChild(tn);
hold.appendChild(label);
hold.appendChild(checkbox);
</script>

Categories

Resources