JSFiddle - React, Tailwind, and code Playground

by Jamie Cropley

HTML

<button id="button1" onclick="button1Function()">
BUTTON 1
</button>

<br>
<br>
<br>

<button id="button2" onclick="button2Function()">
BUTTON 2
</button>

<br>
<br>
<br>

<button id="button3" onclick="button3Function()">
BUTTON 3
</button>

<br>
<br>
<br>

<table id="table">
<tr>
<th>Score: </th>
</tr>
  <tr>
    <td></td> <!-- Score -->
  </tr>
</table>

JavaScript

/*

// Button code:


function button1Function() {
var button1Score = 1;
}


function button2Function() {
var button2Score = 0;
}


function button3Function() { 
var button3Score = -1;
}

*/


// Table code:

/*
var table = document.getElementById("table");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
cell1.innerHTML = "testing";
*/


// Alternative code:

document.getElementById('button1').onclick = function() {
   //console.log("button1 was clicked");
   var table = document.getElementById("table");
	 var row = table.insertRow(1);
	 var cell1 = row.insertCell(0);
   
   //cell1.innerHTML = "button1 was clicked";
   cell1.innerHTML = 1;
};

document.getElementById('button2').onclick = function() {
   //console.log("button2 was clicked");
   var table = document.getElementById("table");
	 var row = table.insertRow(1);
	 var cell1 = row.insertCell(0);
  
   //cell1.innerHTML = "button2 was clicked";
   cell1.innerHTML = 0;
};

document.getElementById('button3').onclick = function() {
   //console.log("button3 was clicked");
   var table = document.getElementById("table");
	 var row = table.insertRow(1);
	 var cell1 = row.insertCell(0);
   
   //cell1.innerHTML = "button3 was clicked";
   cell1.innerHTML = -1;
};