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



  • 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



  • @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>
    


  • @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>
    


  • Hey @Michael-Constantine

    Just wondering, did this solution work for you?



  • 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


Log in to reply