Some help with these buttons, please

I thought this would work fine, but I cant figure out why it’s not working. What I’m trying to do seems pretty simple-I’m sure I’m overlooking something dumb-I’m trying to get 4 different buttons that when clicked log the button text to cell 1 and the time it is pushed to cell 2 of a table row. If you could tell me why this isn’t doing that and/or how I should better approach this, I would be grateful.

<!DOCTYPE html>
<html>
	<head>
		<title>Action Logger App</title>
	</head>
	<body>
		<button onclick="logAction">Action1</button>
		<button onclick="logAction">Action2</button>
		<button onclick="logAction">Action3</button>
		<button onclick="logAction">Action4</button>
		<br>

		<table id="actionLog">
			<tr>
				<th>Action</th>
				<th>Time</th>
			</tr>
		</table>   
		<script type="text/javascript">
		function logAction() {
			var tbl = document.getElementById("actionLog");
			var row = tbl.insertRow(0);
			var actionCell = row.insertCell(0);
			var timeCell = row.insertCell(1);
			var btn = document.getElementByTag("button");
			actionCell.innerHTML = btn.innerHTML();
			timeCell.innerHTML = Date();
		}
		</script>
	</body>
</html>

Thank you for the response. So, I fixed the buttons onClick to call the function. I still dont think I’m approaching the first cell right. I’ve got the 2nd cell to give the time/date, but I get undefined for the first cell. I’m wondering if I should call the onClick in the function instead of in the buttons. I suppose I could just write a function for each button and give them a unique id. I’m not even sure I can call innnerHTML on a button. Though, I don’t see why not.

			var btn = document.getElementsByTagName("button");
			actionCell.innerHTML = btn.innerHTML;

If anyone is curious as to the solution I came up for this, here it is:

<!DOCTYPE html>
<html>
	<head>
		<title>Action Logger App</title>
	</head>
	<body>
		<button class="actionBtn">Action1</button>
		<button class="actionBtn">Action2</button>
		<button class="actionBtn">Action3</button>
		<button class="actionBtn">Action4</button>
		<br>

		<table id="actionLog">
			<tr>
				<th>Action</th>
				<th>Time</th>
			</tr>
		</table>   
		<script type="text/javascript">
		var buttons = document.querySelectorAll('.actionBtn');

		for (var i=0; i<buttons.length; i++) {
			buttons[i].addEventListener('click', logAction)
		}
		function logAction(event) {
			var tbl = document.getElementById("actionLog");
			var row = tbl.insertRow(1);
			var actionCell = row.insertCell(0);
			var timeCell = row.insertCell(1);
			var actionTxt = event.target.innerHTML;
			actionCell.innerHTML = actionTxt;
			timeCell.innerHTML = Date();
		}
		</script>
	</body>
</html>

If there’s a better way, I’d love to hear it. For now, this’ll work. Now I’m going to set up a user login, and a database for users and their tables. I’m hoping to figure out how multiple users can add to a shared table and their user name will be added in the row with it’s own cell. Any advice is more than welcomed.
Cheers!