I'm dynamically adding some rows to my ASP.NET table, I have several cells in each row and each cell contains a control which is dynamically created:
var TD = document.createElement('td');
var spanCheck = document.createElement("span");
spanCheck.innerHTML = "<input type='checkbox' name='vehicle' value='Car'>mycheck";
spanCheck.id = "newfoodcheck0";
spanCheck.onclick = function () {
if (spanCheck.checked)
alert('checked');
else
alert('unchecked');
};
TD.appendChild(spanCheck);
I'm adding an onclick function for this span (which is rendered as a checkbox), I want to know when it is checked, but if (spanCheck.checked) doesn't work and I always get 'unchecked' in my alert, what is going wrong here? should I use spanCheck.checked or I should use document.getElementById(spanCheck.id).checked? I've tested it, but again with no luck! how can I know whether my checkbox is checked or know?
What you are doing is adding click event on spanCheck and checking for spanCheck.checked. However the checked property is on the input element which is the child of the spanCheck. You might want to do somewhat like this:
var TD = document.createElement('td');
var spanCheck = document.createElement("span");
spanCheck.innerHTML = "<input id='my_input' type='checkbox' name='vehicle' value='Car'>mycheck";
spanCheck.id = "newfoodcheck0";
spanCheck.onclick = function () {
var input = document.getElementById('my_input');
if (input.checked)
alert('checked');
else
alert('unchecked');
};
Also, I think you haven't inserted your TD into the body. So in the last line, you should use appendChild:
TD.appendChild(spanCheck);
document.body.appendChild(TD);
Another thing, you should not attach onclick event on the span. You should attach the same on input element. The following code is doing the same:
var TD = document.createElement('td');
var spanCheck = document.createElement("span");
spanCheck.innerHTML = "<input id='my_input' type='checkbox' name='vehicle' value='Car'>mycheck";
spanCheck.id = "newfoodcheck0";
TD.appendChild(spanCheck);
document.body.appendChild(TD);
var input = document.getElementById('my_input');
input.onclick = function () {
if (input.checked)
alert('checked');
else
alert('unchecked');
};
In your code, spanCheck is not rendered as a checkbox. It contains a checkbox. Therefore, there's no such property spanCheck.checked. There is a spanCheck.children[0].checked property, however.
Related
I am currently working on a project that requires me to create an input element on a specific cell in the table. I have attached a screenshot to give you a better idea of what I am trying to achieve.
In addition, the table is an embedded code and all I can do is inspect its elements.
I have written the code below wherein it will check the cell in the first row under the second column and it will insert an input element.
<script>
var cellval = document.querySelector("table [data-cb-name='cbTable'] tr:nth-child(1) >
td:nth-child(2)");
if (cellval == "") {
let var x = document.createElement('input');
input.type = "submit";
input.name = "Mod0InlineAdd";
input.value = "Add";
input.class = "cbResultSetAddButton";
document.body.appendChild(x);
}
</script>
I have made my own research and checked similar issues as to what I have but nothing works with what I would like to accomplish. Can you help me understand why I am just getting a white space instead of an input button?
#Emc_tgn15 There should be no space after table in query selector and you cant directly add attributes to "input". Use className to add class attribute to element. The below script will work.
var cellval = document.querySelector("table[data-cb-name='cbTable'] tr:nth-child(1) > td:nth-child(2)");
if (cellval.innerHTML === " ") {
var x = document.createElement('input');
x.type = "submit";
x.name = "Mod0InlineAdd";
x.value = "Add";
x.className = "cbResultSetAddButton";
cellval.appendChild(x);
}
Insert your inputNode into the second row node(cellval), not into the body
and you have declared x as variable name and referenced input as your variable.
<script>
let cellval = document.querySelector("table [data-cb-name='cbTable'] tr:nth-child(1) > td:nth-child(2)");
let inputNode = document.createElement('input');
inputNode.type = "submit";
inputNode.name = "Mod0InlineAdd";
inputNode.value = "Add";
inputNode.class = "cbResultSetAddButton";
cellval.appendChild(inputNode);
</script>
I have a website that takes input and adds the text to a list with a checkbox. I am trying to make a function that crosses off items on a list when the corresponding checkbox is checked. I've been playing around with it for a while and I've noticed that the function only works if I code in the list items into the HTML before hand. The function will not work with list items that have been inputted by the user.
Function to add list items with checkbox:
document.getElementById("add").onclick = function() {
let node = document.createElement("li");
let text = document.getElementById("text").value;
let textNode = document.createTextNode(text);
node.appendChild(textNode);
document.getElementById("list").appendChild(node);
let checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.className = "checkbox";
node.appendChild(checkBox);
}
Function to cross off list items when checkbox is checked:
let checkBoxes = document.getElementsByClassName("checkbox");
for (i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener("change", checkIt);
}
function checkIt(e) {
if(e.target.checked == false) {
e.target.parentElement.style.textDecoration = "line-through";
}
else {
e.target.parentElement.style.textDecoration = "none";
}
}
Any help would be appreciated as I'm very new to JavaScript!
It seems like you are running the for-loop that adds the eventListeners just once and after new list items are added, they're not being listened to. The simple solution is to add the eventListener when you create the new checkbox like this:
checkBox.type = "checkbox";
checkBox.className = "checkbox";
checkBox.addEventListener("change", checkIt); // <-- add this
node.appendChild(checkBox);
That way all new checkboxes will have something to do when changed.
You need to add a class to your the element that you want to strike-through on click.
the structure needs to have the checkbox and the text you want to strike through on the same level:
div
checkbox
text
then you can use a css ::after pseudo selector to add animation to the text.
.checkbox:checked ~ .text {
// animation of strikethrough css
}
the ~ selector is a "sibling" selector that will find a checkbox that is checked and run the css on the .text that is placed directly after the checkbox.
Welcome to stackoverflow and javascript world, #TheWolf1494
As I understand, you are trying to bind your event handler function to checkboxes before you create them on DOM, when the document is ready. That means you are binding your function to nowhere.
Please try the following one;
document.getElementById("add").onclick = function () {
// Your existing codes
var node = document.createElement("li");
var text = document.getElementById("text").value;
var textnode = document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("list").appendChild(node);
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.className = "checkbox";
// For test purpose
checkBox.id = new Date().toISOString();
// Bind the event handler here
checkBox.onclick = function () {
console.log(this.id + ' is ' + (this.checked ? 'checked' : 'unchecked'))
}
node.appendChild(checkBox);
}
I have a table, and each row is added through JavaScript. I create these rows so that when they're clicked another cell will be created beneath them where I can display additional information. Now I want to be able to destroy the row I just created when the user clicks a button etc. So essentially, I need to be able to have the row I created have an onclick attribute, but it doesn't seem to work... I've tried everything I can think of so any help would be awesome!
var table = document.getElementById("main_table");
var row = table.insertRow(1);
row.id = count;
row.onclick = function ()
{
var id = this.id;
var target = document.getElementById(id);
var newElement = document.createElement('tr');
newElement.style.height = "500px";
newElement.id = id + "" + id;
//newElement.innerHTML = text;
target.parentNode.insertBefore(newElement, target.nextSibling );
//var newRow = document.createElement("tr");
//var list = document.getElementById(id);
//list.insertAfter(newRow,list);
var newRow = table.insertRow(newID);
}
I have tried to mimic your problem with below fiddle.
http://jsfiddle.net/kr7ttdhq/12/
newElement.onclick = createClickableCells;
del.onclick = delCell;
The above code shows the snippet from the fiddle
During the onclick event of the cell. New cells are created which in turn have the same onclick events as the first cell.
Moreover, a 'close' text cell is inserted by which you can delete the entire row.
Hope this helps
The code below will add element once user clicks addmore link.
The problem arrives when the user clicks the remove link.
I have something like these on my code
<script language="JavaScript">
var count=1;
function addmore() {
alert(count);
var printme = "<table id='table"+count+"'><tr><td><a href='#' onclick='remove(count)'>remove</a></td></tr></table";
//(other code here)...
count++;
}
function remove(y) {
alert(y)
var tab = 'table'+y;
document.getElementById(tab).style.display = "none";
}
</script>
I used the alert here so I can easily monitor the value of count it gives.
What happens here is that the value of 'y' (on remove function) always the same, which is the last value of count in the loop.
For example I click the link addmore 3 times, therefore the last value of my 'count=4'.
And let say I wanted to remove the 3rd element which at this point when i clicked the remove link, it must have pass argument like this remove(3). But what happens here is whatever element i clicked it seems like it always passing argument this way remove(4)
That's because you have count as a global variable.
Try .....onclick='remove("+count+")'.... to sort of "lock in" the value.
Please try this:
var printme = "<table id='table"+count+"'><tr><td><a href='#' onclick='remove("+count+")'>remove</a></td></tr></table";
also try following line remove function:
document.getElementById(""+tab+"").style.display = "none";
All previous answers are correct, onclick refers to the current variable count when remove is called.
When you generate the text for the table you use the value of count as it is then:
onclick='remove('+count+')...
You can leave out the id's and count altogether using this:
onclick='remove(this.parentElement.parentElement.parentElement);'...
function remove(elementToRemove){
elementToRemove.parentElement.removeChild(elementToRemove);
}
maybe just onclick='remove('+count+')'
You can do something like
<html>
<head>
<script type="text/javascript">
var count=1;
function addmore() {
var id = 'table' + count;
var table = document.createElement('table');
table.setAttribute('id', id);
var tr = document.createElement('tr');
var td = document.createElement('td');
var a = document.createElement('a');
a.setAttribute('href', '#');
a.appendChild(document.createTextNode('remove ' + id));
a.onclick = function() {
table.style.display = 'none';
document.body.removeChild(table);
};
td.appendChild(a);
tr.appendChild(td);
table.appendChild(tr);
document.body.appendChild(table);
count++;
}
</script>
</head>
<body>
Add Table
</body>
</html>
With table reference and onclick defined like this you don't need id
I have a table in which I am adding some rows dynamically and in the new rows, I add one input text element. When the text in the input element changes, I wish to access the parent row and do something around it. But my code isn't able to access the parent node for input element. Following is the code sample. What is the reason for this? Is there some work around?
The creation of row looks something like this:
var newRow = document.createElement('tr');
dojo.place(newRow, row, "after");
var td = document.createElement('td');
dojo.place(td, newRow, 'last');
dojo.attr(td, 'colspan', 2);
dojo.place(document.createTextNode('Track id:'), td, 'last');
var input = document.createElement('input');
dojo.place(input, td, 'last');
dojo.attr(input, 'type', 'text');
dojo.attr(input, 'value', 0);
dojo.attr(input, 'onchange', "JavaScript: onTrackIdChange(event);");
The initial part of onTrackIdChange looks like:
function onTrackIdChange(event)
{
var textbox = event.target;
console.log(textbox);
// lets find the parent row
var row = findParentRow(btn);
The implementation of findParentRow looks like:
function findParentRow(node)
{
var parent = node;
do
{
console.log(parent);
parent = parent.parentNode;
}
while (parent.nodeName != 'TR');
return parent;
}
The findParentRow function fails since it says that parent for the input element is not defined.
In your call, findParentRow(btn), shouldn't you be passing textbox instead of btn?
There is no reference to this btn variable elsewhere in the code you've submitted, so if that's in order, you should post some more code relating to that.
parent is not defined, because node is not defined. node is not defined in findParentRow, because btn is not defined in onTrackIdChange.