How to random select and change the value of a td

JavaScript
1

I want when the <td> is clicked to write X and after that randomly to choose a <td > and write Y.

HTML

<body>
	<table id="myTable">
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</body>

JS

	$(document).ready(function(){
	$("#myTable").on("click", "td", function() {

        $(this).html("X");
		$(this).disabled = true;
		if(disabled){
			
		}
	});

	});
2

What have you tried? This is just the click event. Do you have any ideas of how to randomly select a td? It sounds like the setup for a homework question.

3

Hi there rk29,

and a warm welcome to these forums. :sunglasses:

Here is one possible solution that may mildly amuse you…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Do Silly Things</title>
<style media="screen">
body {
    background: #f0f0f0;
 }
#myTable {
    width: 30%;
    margin: auto;
    border: 0.06em solid #999;
    border-spacing: 0.3em;
    box-shadow: 0.7em 0.7em 0.7em #999;
    background: #fff;
 }
#myTable td {
    width: 20%;
    padding: 0.5em;
    border: 0.1em solid #000;
    text-align: center;
    cursor: pointer;
 }
.color1 {
    border-radius: 0.5em;
    background: #72706f;
    color: #eee
 }
.color2 {
    border-radius: 0.75em;
    background: #bfbdba;
    color: #111;
 }
</style>
</head>
<body> 
<table id="myTable">
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
 <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
        <tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
 </tr>
</table>
<script>
(function() {
   'use strict';
   /* jshint browser: true */
   var td=document.getElementById('myTable').getElementsByTagName('td');
   var ary=[];
   var yn=[];
   var test=[];
   var c;
   var i;
   var r;
   var n;
   var k;
for(c=0;c<td.length;c++)  {
   test[c]=true;
   ary[c]=c; 
   td[c].addEventListener('click', doSillyThings(c), false);
 }
function doSillyThings(c) {
   td[c].onclick=function() {
if(test[c]===true) {
   this.firstChild.nodeValue='X';
   this.className='color1';
   test[c]=false;
   rdm(c);
   td[n].firstChild.nodeValue='Y';
   td[n].className='color2';
   }
  };
 }
function rdm(c) {
   yn.push(ary[c]);
   k=ary.indexOf(c);
if(k!=-1) {
   ary.splice(k,1); 
 }
if(ary.length>0) {
   r=Math.floor(Math.random()*ary.length); 
   yn.push(ary[r]);
   n=yn[yn.length-1];
   ary.splice(r,1);
 }
   return  n;
 }
}());
</script>
</body>
</html>

coothead

2 Likes
4

Thank you very much, it works just perfect. I was just trying to understand the order that my functions should be called.I’m still new at this and I want to understand the logic.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.