Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • menu.unsolved
    • menu.solved
    S

    0
    Online

    180
    Users

    136
    Topics

    389
    Posts

    how to add Random pick and Reset buttons for a table (html - javascript)

    Non-Coding Bootcamp Coding Question & Answers
    2
    4
    64
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Michael Constantine
      Michael Constantine last edited by

      Hello there again, i have been working on a small project that i got help a lot here, but i need some more if you can please, i have this code, you can check it out to see what it does

      <html>
<head>





<script>


function inputClickHandler(e){
    e = e||window.event;
    var tdElm = e.target||e.srcElement;
    if(tdElm.style.backgroundColor == 'rgb(63, 73, 109)'){
        tdElm.style.backgroundColor = '#fff';
    } else {
        tdElm.style.backgroundColor = '#3f496d';
    }
}
</script>






</head>

<body>

<style>
td:hover, th:hover { background:#3f496d; color:#fff; }
td:hover, th:hover { cursor:pointer }






table {
  border-collapse: collapse;
}
table, tr, td {
  border: 1px solid black;
}
tr, td {
  padding: 4px;
  text-align: center;
}

table { 
    border-spacing: 3px;
    border-collapse: separate;
}

.highlightRed {
  background:#3f496d;
  color:#fff;
}

</style>

<form>
<table border width='250' height='250' cellspacing='0' cellpadding='0' align=center>



<tr>
<td class="cell">01</td>
<td class="cell">02</td>
<td class="cell">03 </td>
<td class="cell">04</td>
<td class="cell">05 </td>
<td class="cell">06</td>
<td class="cell">07 </td>
<td class="cell">08</td>
<td class="cell">09 </td>
<td class="cell">10</td>
</tr>

<tr>
<td class="cell">11</td>
<td class="cell">12</td>
<td class="cell">13 </td>
<td class="cell">14</td>
<td class="cell">15 </td>
<td class="cell">16</td>
<td class="cell">17 </td>
<td class="cell">18</td>
<td class="cell">19 </td>
<td class="cell">20</td>
</tr>

<tr>
<td class="cell">21</td>
<td class="cell">22</td>
<td class="cell">23 </td>
<td class="cell">24</td>
<td class="cell">25 </td>
<td class="cell">26</td>
<td class="cell">27 </td>
<td class="cell">28</td>
<td class="cell">29 </td>
<td class="cell">30</td>
</tr>

<tr>
<td class="cell">31</td>
<td class="cell">32</td>
<td class="cell">33 </td>
<td class="cell">34</td>
<td class="cell">35 </td>
<td class="cell">36</td>
<td class="cell">37 </td>
<td class="cell">38</td>
<td class="cell">39 </td>
<td class="cell">40</td>
</tr>

<tr>
<td class="cell">41</td>
<td class="cell">42</td>
<td class="cell">43 </td>
<td class="cell">44</td>
<td class="cell">45 </td>
<td class="cell">46</td>
<td class="cell">47 </td>
<td class="cell">48</td>
<td class="cell">49 </td>
<td class="cell">50</td>
</tr>

<tr>
<td class="cell">51</td>
<td class="cell">52</td>
<td class="cell">53 </td>
<td class="cell">54</td>
<td class="cell">55 </td>
<td class="cell">56</td>
<td class="cell">57 </td>
<td class="cell">58</td>
<td class="cell">59 </td>
<td class="cell">60</td>
</tr>

<tr>
<td class="cell">61</td>
<td class="cell">62</td>
<td class="cell">63 </td>
<td class="cell">64</td>
<td class="cell">65 </td>
<td class="cell">66</td>
<td class="cell">67 </td>
<td class="cell">68</td>
<td class="cell">69 </td>
<td class="cell">70 </td>
</tr>

<tr>
<td class="cell">71</td>
<td class="cell">72</td>
<td class="cell">73 </td>
<td class="cell">74</td>
<td class="cell">75 </td>
<td class="cell">76</td>
<td class="cell">77 </td>
<td class="cell">78</td>
<td class="cell">79 </td>
<td class="cell">80 </td>
</tr>

<tr>
<td class="cell">81</td>
<td class="cell">82</td>
<td class="cell">83 </td>
<td class="cell">84</td>
<td class="cell">85 </td>
<td class="cell">86</td>
<td class="cell">87 </td>
<td class="cell">88</td>
<td class="cell">89 </td>
<td class="cell">90 </td>
</tr>

</table>
</form>
<script>
// Keeps track of all red cells
let count = 0;
// Get all cells
let cells = document.querySelectorAll(".cell"); 
// Attach click event listener to all cells 
for(let i = 0; i < cells.length; i++){
	let cell = cells[i];
  cell.onclick = function() {
    // If cell has not been highlighted yet
    if(!cell.classList.contains('highlightRed')){
      // If less than 6 cells have been highlighted as red, highlight 
      // this cell red 
    	if(count < 6){
        cell.classList.toggle("highlightRed");	
      	count++;
      }
    // Cell is highlighted as RED. 
    // Mark cell is whie and decrement count. 
    }else {
			cell.classList.toggle("highlightRed");
      count--;
    }
	};
}
</script>
</body>


</html>

      and you can check this link to see what i am trying to do so anyway, i still need to add two buttons (actually not a button, because i will add an icon instead of a button like a trash icon or any things else, a photo actually)one of them to UN-Highlight any amount of cells that i have highlighted and second one is to check some amount of cells to highlight them randomly, i don't know if i am allowed to ask here for such a things .. anyway i have tried .. thank u in advance

      Reply Quote 0
        1 Reply Last reply
      • avan
        avan last edited by

        @Michael-Constantine

        Again, this can accomplished with a little bit of JavaScript:

        <html>
<head>





<script>


function inputClickHandler(e){
    e = e||window.event;
    var tdElm = e.target||e.srcElement;
    if(tdElm.style.backgroundColor == 'rgb(63, 73, 109)'){
        tdElm.style.backgroundColor = '#fff';
    } else {
        tdElm.style.backgroundColor = '#3f496d';
    }
}
</script>






</head>

<body>

<style>
td:hover, th:hover { background:#3f496d; color:#fff; }
td:hover, th:hover { cursor:pointer }






table {
  border-collapse: collapse;
}
table, tr, td {
  border: 1px solid black;
}
tr, td {
  padding: 4px;
  text-align: center;
}

table { 
    border-spacing: 3px;
    border-collapse: separate;
}

.highlightRed {
  background:#3f496d;
  color:#fff;
}

</style>

<form>
<table border width='250' height='250' cellspacing='0' cellpadding='0' align=center>



<tr>
<td class="cell">01</td>
<td class="cell">02</td>
<td class="cell">03 </td>
<td class="cell">04</td>
<td class="cell">05 </td>
<td class="cell">06</td>
<td class="cell">07 </td>
<td class="cell">08</td>
<td class="cell">09 </td>
<td class="cell">10</td>
</tr>

<tr>
<td class="cell">11</td>
<td class="cell">12</td>
<td class="cell">13 </td>
<td class="cell">14</td>
<td class="cell">15 </td>
<td class="cell">16</td>
<td class="cell">17 </td>
<td class="cell">18</td>
<td class="cell">19 </td>
<td class="cell">20</td>
</tr>

<tr>
<td class="cell">21</td>
<td class="cell">22</td>
<td class="cell">23 </td>
<td class="cell">24</td>
<td class="cell">25 </td>
<td class="cell">26</td>
<td class="cell">27 </td>
<td class="cell">28</td>
<td class="cell">29 </td>
<td class="cell">30</td>
</tr>

<tr>
<td class="cell">31</td>
<td class="cell">32</td>
<td class="cell">33 </td>
<td class="cell">34</td>
<td class="cell">35 </td>
<td class="cell">36</td>
<td class="cell">37 </td>
<td class="cell">38</td>
<td class="cell">39 </td>
<td class="cell">40</td>
</tr>

<tr>
<td class="cell">41</td>
<td class="cell">42</td>
<td class="cell">43 </td>
<td class="cell">44</td>
<td class="cell">45 </td>
<td class="cell">46</td>
<td class="cell">47 </td>
<td class="cell">48</td>
<td class="cell">49 </td>
<td class="cell">50</td>
</tr>

<tr>
<td class="cell">51</td>
<td class="cell">52</td>
<td class="cell">53 </td>
<td class="cell">54</td>
<td class="cell">55 </td>
<td class="cell">56</td>
<td class="cell">57 </td>
<td class="cell">58</td>
<td class="cell">59 </td>
<td class="cell">60</td>
</tr>

<tr>
<td class="cell">61</td>
<td class="cell">62</td>
<td class="cell">63 </td>
<td class="cell">64</td>
<td class="cell">65 </td>
<td class="cell">66</td>
<td class="cell">67 </td>
<td class="cell">68</td>
<td class="cell">69 </td>
<td class="cell">70 </td>
</tr>

<tr>
<td class="cell">71</td>
<td class="cell">72</td>
<td class="cell">73 </td>
<td class="cell">74</td>
<td class="cell">75 </td>
<td class="cell">76</td>
<td class="cell">77 </td>
<td class="cell">78</td>
<td class="cell">79 </td>
<td class="cell">80 </td>
</tr>

<tr>
<td class="cell">81</td>
<td class="cell">82</td>
<td class="cell">83 </td>
<td class="cell">84</td>
<td class="cell">85 </td>
<td class="cell">86</td>
<td class="cell">87 </td>
<td class="cell">88</td>
<td class="cell">89 </td>
<td class="cell">90 </td>
</tr>

</table>
</form>

<button onclick="unselect()">
  Un-Select All
</button>

<button onclick="random()">
  Random Select
</button>

<script>

// Keeps track of all red cells
let count = 0;
const MAX = 6;

function unselect(){
  let cells = document.querySelectorAll(".cell"); 
// Attach click event listener to all cells 
	for(let i = 0; i < cells.length; i++){
    let cell = cells[i];
    if(cell.classList.contains('highlightRed')){
    	cell.classList.toggle("highlightRed");
    }
  }
  count = 0;
}
function random(){
  unselect();
	let cells = document.querySelectorAll(".cell"); 
  let pickedAlready = [];
  for (let i = 0; i < MAX; i++){
	  let random = Math.floor(Math.random() * cells.length);
    while(pickedAlready.includes(random)){
    	random = Math.floor(Math.random() * cells.length);
    }
    
    let cell = cells[random];
		cell.classList.toggle("highlightRed");
    pickedAlready.push(random);
    count++;
  } 
}


// Get all cells
let cells = document.querySelectorAll(".cell"); 
// Attach click event listener to all cells 
for(let i = 0; i < cells.length; i++){
	let cell = cells[i];
  cell.onclick = function() {
    // If cell has not been highlighted yet
    if(!cell.classList.contains('highlightRed')){
      // If less than 6 cells have been highlighted as red, highlight 
      // this cell red 
    	if(count < MAX){
        cell.classList.toggle("highlightRed");	
      	count++;
      }
    // Cell is highlighted as RED. 
    // Mark cell is whie and decrement count. 
    }else {
			cell.classList.toggle("highlightRed");
      count--;
    }
	};
}
</script>
</body>


</html>
        Reply Quote 0
          1 Reply Last reply
        • avan
          avan last edited by

          Hey @Michael-Constantine

          Just wondering, did this solution work for you?

          Reply Quote 0
            1 Reply Last reply
          • Michael Constantine
            Michael Constantine last edited by

            Very sorry for not answering, yes of course it did worked, allow me to say you are a real master and thank you a lot

            Reply Quote 0
              1 Reply Last reply
            • First post
              Last post

            Reddit Feed

            How to learn Python?
            Thu, 23 Sep 2021 17:17
            surprise surprise - looking for a front end Bootcamp!
            Thu, 23 Sep 2021 17:36
            MIT xPRO
            Thu, 23 Sep 2021 12:48
            For software developers of the UK (or any job that requires coding/programming), how do I get into the field?
            Thu, 23 Sep 2021 07:54
            Learning to code.
            Thu, 23 Sep 2021 08:37
            R vs Matlab
            Thu, 23 Sep 2021 12:18
            Python vs Julia:
            Thu, 23 Sep 2021 09:12
            Python Vs SQL
            Thu, 23 Sep 2021 03:32
            What language should I learn first?
            Wed, 22 Sep 2021 14:36
            Java vs C#
            Wed, 22 Sep 2021 14:26
            Can't afford bootcamp. Here's my plan.
            Wed, 22 Sep 2021 05:47
            Building A SoundCloud Clone
            Wed, 22 Sep 2021 00:20
            Python VS Scala
            Wed, 22 Sep 2021 03:36
            Full Stack Web Development Bootcamp suggestions
            Tue, 21 Sep 2021 17:59
            What questions should you ask a bootcamp advisor prior to joining?
            Tue, 21 Sep 2021 12:43
            REVIEWS ON CODING DOJO, APP ACADEMY, AND THE TECH ACADEMY? ALSO LOOKING FOR ADVICE ON THE BEST BOOTCAMPS OUT THERE!!
            Tue, 21 Sep 2021 04:54
            Hospital Management system (Android App)
            Tue, 21 Sep 2021 07:51
            Hospital Management system (Android App)
            Tue, 21 Sep 2021 07:52
            Are coding/data analytics boot camps worth it?
            Mon, 20 Sep 2021 20:15
            Data Visualization in Python
            Tue, 21 Sep 2021 03:27
            Best Bootcamp
            Mon, 20 Sep 2021 15:26
            Coding bootcamp or post-bacc in computer science?
            Sat, 18 Sep 2021 16:54
            People who are web developers, is it necessary to have a degree?
            Sat, 18 Sep 2021 17:55
            Problem with input data
            Sat, 18 Sep 2021 21:52
            In person boot camps around Chesapeake, VA?
            Sat, 18 Sep 2021 21:28