Reputation: 1352
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);
}
Upvotes: 0
Views: 1159
Reputation: 51695
<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.
Upvotes: 0
Reputation: 37126
You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute
Upvotes: 2