i want to add button in table row with onclick fuction. for that i am using
var cell9 = row.insertCell(8);
var edit = document.createElement("input"); // Create a <button> element
edit.id = "edit"+saveCount;
edit.type = "Button";
edit.value = "Edit Employee";
edit.name = "edit";// Create a text node
edit.onclick = editrow(id);
cell9.appendChild(edit);
in this code how to call function(with parameter as its id) on edit.onclick
edit.onclick
Wait for a function in order to execute it when the event occurs.
editrow(id);
Is not a function but the result of the function.
edit.onclick = function(){
editrow(id);
};
Will works better!
Related
I'm trying to create a table made out of user inputs, with those inputs including checkboxes.
I have a function for what to do when the box is clicked
function checkTheBox(t) {
var t;
if (array[t] == 0) {
array[t] = 1;
}
else {
array[t] = 0;
}
}
and to add that function to the created elements of the table I use
function add() {
var word = document.getElementById("text").value;
var tdt = document.createElement("td");
var tdc = document.createElement("td")
var node = document.createTextNode(word);
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "cb";
tdc.addEventListener("click", ticker(0), false);
tdc.stopPropagation;
tdt.appendChild(node);
tdc.appendChild(checkbox);
var tr = document.createElement("tr");
tr.appendChild(tdt);
tr.appendChild(tdc);
var table = document.getElementById("vt");
table.appendChild(tr);
}
The problem is that whenever I click on the Add button to create the new element it activates the function and then creates the element and the checkbox does nothing when I click on it.
I use the checkTheBox function in the first place because the only other way I've read of dealing with checkboxes is with PHP, which I have yet to delve into.
You're executing ticker(0) immediately, rather than telling it to execute when tdc is clicked.
Here...
tdc.addEventListener("click", ticker(0), false);
That will assign the result of executing ticker(0) to the click event handler. You can wrap it in an anonymous function so that it is only executed later...
tdc.addEventListener("click", function() { ticker(0); }, false);
Have a look at the documentation here for some examples...
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Search that page for "anonymous function"
Here's the code I'm currently using
function firstChildAge() {
var header = document.createElement('H3');
var body = document.getElementsByTagName('BODY');
var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
var inputChildOne = document.createElement("Input");
var childOneAgeResponse = inputChildOne.value;
header.appendChild(textnode);
document.body.appendChild(header);
document.body.appendChild(inputChildOne);
}
function submitButton() {
var btn = document.createElement('Button');
document.body.appendChild(btn);
btn.onClick = testFunction_2();
}
function testFunction_2() {
alert("foo");
}
if (childrenResponse == 1) {
firstChildAge();
submitButton();
}
As you can see, if childrenResponse (the user's response to a previous query) is equal to 1, both functions are activated. The attempted goal is to create a text node, an input, and a button. The button as of right now, should active testFunction2() which alerts us that it is working. But, testFunction2() activates before the text node or input even shows up. I can find the reason for this, and if anyone can help me out I'd greatly appreciate it. Thank you.
Also, on a side note, how can I add text to the button created in submitButton() ? Thanks!
You have called the testFunction_2, instead of assigning it. This should work out fine.
function submitButton() {
var btn = document.createElement('Button');
btn.onclick = testFunction_2;
document.body.appendChild(btn);
}
You are calling the function testFunction_2() in onClick. You need to add event listener to button as shown below
btn.addEventListener('click', testFunction_2);
To add text to button use
var txt = document.createTextNode("CLICK ME");
btn.appendChild(txt);
Check the snippet below
function firstChildAge() {
var header = document.createElement('H3');
var body = document.getElementsByTagName('BODY');
var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
var inputChildOne = document.createElement("Input");
var childOneAgeResponse = inputChildOne.value;
header.appendChild(textnode);
document.body.appendChild(header);
document.body.appendChild(inputChildOne);
}
function submitButton() {
var btn = document.createElement('Button');
var txt = document.createTextNode("CLICK ME");
btn.appendChild(txt);
document.body.appendChild(btn);
btn.addEventListener('click', testFunction_2);
}
function testFunction_2() {
alert("foo");
}
childrenResponse = 1;
if (childrenResponse == 1) {
firstChildAge();
submitButton();
}
You are calling the function testFunction_2 in onClick. You need to provide reference.
That also won't work. You need to add event listener to button.
And for setting the text, just set innerHTML of button.
var btn = document.createElement('Button');
btn.innerHTML = "click";
btn.addEventListener('click', testFunction_2);
document.body.appendChild(btn);
btn.onclick = testFunction_2; // in place of addEventListener.
// if you want to use onclick. use small case 'c' in onclick.
There were 2 problems:
onClick should've been onclick.
You were executing the function and assigning the result of that function to the onclick. btn.onClick = testFunction_2(); should be btn.onClick = testFunction_2;
See working snippet below.
function firstChildAge() {
var header = document.createElement('H3');
var body = document.getElementsByTagName('BODY');
var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
var inputChildOne = document.createElement("Input");
var childOneAgeResponse = inputChildOne.value;
header.appendChild(textnode);
document.body.appendChild(header);
document.body.appendChild(inputChildOne);
}
function testFunction_2() {
alert("foo");
}
function submitButton() {
var btn = document.createElement('button');
btn.innerHTML = "Some button name";
btn.onclick = testFunction_2;
document.body.appendChild(btn);
}
var childrenResponse = 1;
if (childrenResponse == 1) {
firstChildAge();
submitButton();
}
In javascript you can use the innerHTML set the button's HTML contents.
See Setting button text via javascript
btn.innerHTML = "This is a button name";
The Mozilla Developer Network is a good resource. Here's two links for the above mentioned snippets.
MDN innerHTML
MDN HTML Button element
I'm having an issue trying to setup a row where by when the remove button is pressed, the row is removed from the table. When I set the onclick method as shown below, it will automatically remove the row upon creation of it. I assume it's calling the function
I've seen that you should remove the parenthesis when assigning such and that's causing the issue. But for obvious reasons I require the rows id to be able to remove the row.
name = "thomas";
foo = "foo";
bar = "bar";
// Create a new row
var row = table.insertRow();
row.id = name;
// Create cells with requested information
row.insertCell().innerText = name;
row.insertCell().innerText = foo;
row.insertCell().innerText = bar;
var removeButton = document.createElement("BUTTON");
removeButton.innerHTML = "Remove";
removeButton.onclick = deleteRow(row.id);
var removeButtonCol = row.insertCell();
removeButtonCol.appendChild(removeButton);
function deleteRow(rowID)
{
var row = document.getElementById(rowID);
row.parentNode.removeChild(row);
}
So how can I resolve this? I don't know how to setup an onclick for a function that requires parenthesis or an eaiser way to pass the row id when a button is pressed that belongs to a rwo
So it turns out I should be using an event listener instead of the onclick method.
EG, where we did onclick:
var removeButton = document.createElement("BUTTON");
removeButton.innerHTML = "Remove";
removeButton.addEventListener('click', function () {
deleteRow(row.id)
});
This works perfectly
Im new to javascript and coding in general, I'm trying to make a simple to do list but cant get the delete button to delete all the checkboxes, it will only delete the last checkbox made. Thanks guys
http://jsfiddle.net/2L8y73ac/
var task = document.getElementById('textinput');
function ObjectTask() {
self = this;
self.init = function() {
self.itemText=document.createTextNode(task.value);
self.checkbox = document.createElement("input");
self.checkbox.type = "checkbox";
self.checkbox.name = task.value;
self.checkbox.id = "checkbox";
self.checkbox.value = "0";
self.checkbox.onclick = self.clickMe;
self.listItem=document.createElement("li");
self.listItem.id = task.value;
self.listItem.appendChild(self.itemText);
self.listItem.appendChild(self.checkbox);
self.deleteCheckBox = document.getElementById('deleteBtn');
self.deleteCheckBox.onclick = self.deleteMe;
document.getElementById('place').appendChild(self.listItem);
}
self.clickMe = function() {
if (self.checkbox.value === "0") {
self.checkbox.value = "1";
console.log("1");
}else {
self.checkbox.value = "0";
console.log("0");
}
}
self.deleteMe = function(){
if (self.checkbox.value == "1"){
var parent = self.listItem.parentNode;
parent.removeChild(self.listItem);
}
}
}
function taskadd() {
var taskNew = new ObjectTask();
taskNew.init();
}
I can't seem to get the adding to work either, but that doesn't matter. :)
The problem is that you assign a new click handler to the single delete button everytime when you add an item. When you click the delete button, the event handler of the last item is called, everytime (even when the item itself is already deleted).
The problem is in this piece of code:
self.deleteCheckBox = document.getElementById('deleteBtn');
self.deleteCheckBox.onclick = self.deleteMe;
deleteCheckBox is assigned the (global) delete button. After that, you assign a new onclick handler to it, overwriting the previous one.
A better approach would be to write one generic handler for the delete button, which looks up all selected checkboxes and finds the other elements belonging to it to delete them. So just like your global taskadd(), you should also have a global taskdelete() that deletes all selected tasks.
I created an input type=file and I need to connect it to my Javascript function, the problem is that I get postback (I don't need server-side), I tried different ways (code below).. maybe I set the function wrong... Help please
++ createMyButton is fired from another function and works fine.
//JAVASCRIPT
function createMyButton(){
var deleteBtn = document.createElement('input');
deleteBtn.type = "button";
deleteBtn.title = "Delete";
//1 try
deleteBtn.onclick = 'deleteItem()';
//2 try
deleteBtn.onclick = 'deleteItem();return false';
}
//FUNCTION
function deleteItem() {
alert("delete");
}
These are the issue I seen
1.deleteBtn.onclick = 'deleteItem();' are you missing quote "''here ?
2
. If u want to bind event to element use addEventListener to for
E.g
var deleteBtn = document.createElement('input');
deleteBtn.type = "button";
deleteBtn.title = "Delete";
// you missed button value here
deleteBtn.value = "Delete";
deleteBtn.addEventListener('click', deleteItem);
//FUNCTION
function deleteItem() {
var btn = this; // you can use button here
alert("delete");
}
JSBIN EXAMPLE