Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

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

    Coding Question & Answers
    2
    4
    7
    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

          @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