I have a script that makes a button in a table every 5 seconds.
I originally had the button made with the onclick attribute which called a function in the script. This however, gave me an error saying that the function didn't exist, and as from what I've seen on here, it has been answered but I don't know how I'd fix it in my situation. I switched it so that Javascript handles for the button click. I added attributes to the button tag to grab when the btnTeamListAction function is called. The console prints the following,
control.js:86 Uncaught TypeError: Cannot set property 'onclick' of null
at window.onload (control.js:86)
JS Snippets:
#button click handler
btnTeamListAction.onclick = function(){
var id = this.getAttribute("data-team-id");
var isRedo = this.getAttribute("data-is-redo");
teamListSelect(id,isRedo);
}
#the function that creates the buttons
function appendTeamTable(id,name,finished){
var finished_txt;
var action_content;
if(finished == 1){
finished_txt = "Yes";
action_content = '<button id="teams-list-action" data-team-id="'+id+'" data-is-redo="1">Retime</button>';
}
else {
finished_txt = "No";
action_content = '<button id="teams-list-action" data-team-id="'+id+'" data-is-redo="0">Time</button>';
}
var tr = document.createElement('tr');
tr.innerHTML ='<td>'+ id +'</td><td>'+ name +'</td><td>'+ finished_txt +'</td><td>'+ action_content +'</td>'
teamTable.appendChild(tr);
var btnTeamListAction = document.getElementById("teams-list-action");
btnTeamListAction.onclick = function(){
console.log("ActionClicked");
var id = this.getAttribute("data-team-id");
var isRedo = this.getAttribute("data-is-redo");
teamListSelect(id,isRedo);
}
}
I've tried browsing this form for this error and have found many related questions but not for this particular case with the button being created by JS itself.
Please ask if you need the full script or HTML, Thanks!
function appendTeamTable(id,name,finished){
var finished_txt;
var action_content= document.createElement("a");
var btn = document.createElement("button");
btn.setAttribute("id","teams-list-action");
btn.setAttribute("data-team-id",id);
if(finished == 1){
finished_txt = "Yes";
var t = document.createTextNode("Retime");
btn.setAttribute("data-is-redo","1");
}
else {
finished_txt = "No";
var t = document.createTextNode("Time");
btn.setAttribute("data-is-redo","0");
}
btn.appendChild(t);
btn.addEventListener("click",function(){
var id = this.getAttribute("data-team-id");
var isRedo = this.getAttribute("data-is-redo");
teamListSelect(id,isRedo);
});
action_content.appendChild(btn);
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(action_content);
tr.innerHTML ='<td>'+ id +'</td><td>'+ name +'</td><td>'+ finished_txt +'</td>'
tr.appendChild(td);
teamTable.appendChild(tr);}
I looked at the post here and took the idea from the second answer and put a event handler on the table itself instead of the buttons individually. It's works like a charm now. Thanks all three of you for attempting to look through my seriously messed up code! :)
Related
Im starting to do some small functions and tweaks on websites with javascript, but whats really bothers me is that I dont know how to run the javascript again after a function has run?
For instance if I call a function onclick which adds a user to an array that is shown in my website, the new user wont be displayed until the page is refreshed?
How do I work around this?
EXAMPLE:
if (!localStorage.myStorage) {
// CREATE LOCALSTORAGE
}else{
myArray = JSON.parse(localStorage.myStorage);
for (var i = 0; i < myArray.length; i++) {
if(myArray[i].id === 1){
$(".firstIdContainer").append("<p>" + myArray[i].userName + "</p>");
}
if(aUserLogin[i].id === 2) {
$(".secondIdContainer").append("<p>" + myArray[i].userName + "</p>");
}
}
}
$(document).on("click", ".btnRegisterUser", function() {
// ADD NEW USER TO LOCALSTORAGE
}
How do i make sure my new user i register will be shown immediately through my for loop displaying users.
Like:
if(!localStorage.myStorage){
// CREATE LOCALSTORAGE
}
function doIt(){
var myArray = JSON.parse(localStorage.myStorage);
for(var i in myArray){
var apd = '<p>' + myArray[i].userName + '</p>';
if(myArray[i].id === 1){
$(".firstIdContainer").append(apd);
}
else if(aUserLogin[i].id === 2) {
$(".secondIdContainer").append(apd);
}
}
}
}
doIt();
$('.btnRegisterUser').click(doIt);
Try creating a contentUpdate function that resets whatever is getting displayed and creates it again based on new variables (this would go at the bottom of a function to add the user, for example). The reason that variable changes aren't reflected in the DOM is that the DOM has no abstraction for how it was made; it's output, and it won't change itself based on what its input has done after it was put in.
If you just want to insert a new row into a table you don't need to refresh the page.
jsfiddle
html:
<table id="usertable">
<tr><td>user 1</td></tr>
</table>
<input id="newuser"></input>
<input id="adduser" type="submit"></input>
js:
var button = document.getElementById('adduser');
button.onclick = function(event) {
var user = document.getElementById('newuser').value
//add the user to your array here
//add a table row
var table = document.getElementById('usertable');
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = user;
event.preventDefault();
}
I can't get the dynamic textfield value. Please see the below my jquery code.
I added onclick event while creating the textfield for LandMark. Please see the below code.
I am always getting undefined. Please help me.
function dynamicEvent() {
alert("dynamic event");
$(document).ready(function(){
alert("inside ajax --> dynamic");
var table = document.getElementById("dataTable");
alert("table-->"+table);
var rowCount = table.rows.length;
alert("rowCount-->"+rowCount);
alert("value of rowCount"+rowCount);
var uniqueId;
for (var i=rowCount;rowCount>7;i++){
uniqueId = i;
alert("inside for loop");
alert("uniqueId-->"+uniqueId);
var element = document.createElement("input");
uniqueId=uniqueId-1;
element.id = "t02Travelfrom" +uniqueId;
var tfrom=element.id;
alert("tfrom id-->"+tfrom);
var t02Travelfrom=$("tfrom").val();
alert(tfrom+"--value-->" +t02Travelfrom);
}
});
}
You have incorrect selector:
var t02Travelfrom=$("tfrom").val();
change to:
var t02Travelfrom=$("#" + tfrom).val();
$("tfrom") returning elements with tag tfrom
You need $(tfrom). You don't need double quotas.
It occurs in this:
for(var i = 0; i<phoneNums.length; i++)
{
var lines = document.createElement('tr');
var number = document.createElement('td');
number.innerHTML = phoneNums[i];
var minutes = document.createElement('td');
minutes.innerHTML = minutesUsed[i];
var plan = document.createElement('td');
plan.innerHTML = plans[i];
var charges = document.createElement('td');
charges.innerHTML = charge[i];
document.getElementById('theTable').appendChild(lines);
lines.appendChild(number);
lines.appendChild(minutes);
lines.appendChild(plan);
lines.appendChild(charges);
}
Specifically at:
document.getElementById('theTable').appendChild(lines);
<table id = 'theTable'>
</table>
<script type = 'text/javascript'>
populateTable();
</script>
I'm trying to create a function that adds tr and td and the values to a table.
You probably are running this script before "theTable" exists in your document. Make sure that this script occurs below your table with id="theTable", or that it is run in an event handler that occurs after the table exists.
This means that you do not have an element in your DOM with an id of "theTable". Somewhere in your html you should have something like:
<table id="theTable">...
Alternatively, as others have also mentioned, this element may not have been loaded into the DOM before your script executes.
The function simply injects new rows into an empty table when the function is called.
it would seem that since the <td> class gets assigned properly, that the <tr> would also get assigned... but it doesn't!
var newRow = document.createElement("tr");
for (data in dataArray)
{
var newName = document.createElement("td");
newName.className = classNames[data];
newName.innerHTML = dataArray[data];
newRow.appendChild(newName);
counter++;
}
document.getElementById("capturedData").appendChild(newRow);
var newRow2 = document.createElement("tr");
newRow2.class = "hiddenRow";
for (data in dataArray)
{
var newData = document.createElement("td");
var newDataField = document.createElement("input");
newDataField.type = "hidden";
newDataField.name = "name" + data;
newDataField.value = dataArray[data];
newData.class = classNames[data];
newData.value = dataArray[data];
newData.appendChild(newDataField);
newRow2.appendChild(newData);
}
which is really weird. All the newly added <td> elements have their classes assigned and they show up in the DOM. But the <tr> elements don't accept the class assignment and in the DOM they have no class.
Why is this? I've read about the purported asynchronicity of script execution, but surely this can't be the case, it would defeat the purpose, no?
DOM elements have no property class, because it is a reserved keyword. You are looking for className:
newRow2.className = "hiddenRow";
Same for the cell (newData). It works for your other cell because you are using className already:
newName.className = classNames[data];
Use only className, not class . There is no class-property in <TR>.
I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:
function addRow(id, sender, message){
var theTable = document.getElementById('messageTable');
var lastRow = theTable.rows.length;
var newRow = theTable.insertRow(lastRow);
newRow.id = id;
var cellLeft = newRow.insertCell(0);
var textNode = document.createTextNode(id);
cellLeft.appendChild(textNode);
var secondCell = newRow.insertCell(1);
var textNode2 = document.createTextNode(sender);
secondCell.appendChild(textNode2);
var messageCell = newRow.insertCell(2);
var messageNode = document.createTextNode(message);
messageCell.appendChild(messageNode);
var viewCell = newRow.insertCell(3);
var viewNode = document.createElement('button');
viewNode.value = 'View';
viewNode.onclick = function(){
alert('clicked: ' + id);
};
viewCell.appendChild(viewNode);
}
You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute
<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:
viewNode.appendChild(document.createTextNode('View'));
You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.