Hello Everyone! I am happy to be here

monique · January 17, 2018, 12:23pm

I am having problems with getElementId and Onclick buttons to function.
for example,

Chosen opponent:

Computer

Human

Play Again

From heap: Move: Bricks(s)

Overall Move Count : 0 Colorful Play Reset

New game Close window

this is a Nim game I have been trying to get working. But I find it very difficult to ask chosen opponent to work properly.
If I click on the buttons to get bricks the buttons don’t respond.

please, can someone help me with HTML, CSS and JS coding?
thanks for understanding

BenGitter · January 17, 2018, 12:49pm

Can you show us the code?

monique · January 17, 2018, 4:12pm

Thank you!
here is my code.

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NimGame App</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
   
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 639px)" href="portrait.css">
    
         
    <style>
        
       @media (max-width: 480px) {
    #picblock {
    background-image: url(mobile.png);
    background-repeat: no-repeat;
    background-size: contain ;
  }
}
@media (min-width: 481px) {
  #picblock {
    background-image: url(desktop.png);
    background-repeat: no-repeat;
    background-size: contain ;
    }
  }
        
        
button {
  font-size: 18px;
  padding: 10px 15px;
  color: #fff;
  background-color: #004444;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
   
        
    .bricks {height:50px;width:50px;border:3px solid brown;border-radius: 20px ;display:inline-block;margin:0;padding:0;background:green;}
    
    
    .heap2 .bricks{background:green;border:3px solid brown;} 
        
    
     .heap3 .bricks{background:green;border:3px solid brown;} 
        
    .theading{font-weight:bolder;font-size:30px;text-align:center;color: rebeccapurple} 
        
    .pheading{font-weight:bolder;font-size:30px;text-align:center;color: rebeccapurple}
        .boxed {
        border: 10px solid brown ;
        border-radius: 20px ;
        -moz-border-radius: 20px ; 
        }
    
    </style>
           
 <style>
    .stick #bricks:hover{visibility:hidden;display:none;}
    </style>
    <style>
        
         <style>
        
        h2 {
            color: rgb(0, 232, 15);
        }  
        
        p {
            color: rgb(191, 0, 255);
        }
            
        </style>
    
    
    
  </head>
  <body>
     
     
      <div id="brick-1" class="brick"></div>
      
<div id="header">
<div class="t">
     <br>
<span class="theading">The NIM Game</span>
  
   <br>
    </div>
    
      </div>
      
<div id="intro">
    <span><p style="color:darkblue">About the game and the rules &#x3a; NIM is a mathematical game of strategy in game theory where two players take turns removing objects from distinct heaps.On each turn, a player must remove at least one object, and may remove any number of objects provided they all come from the same heap - in this case a heap is a row. The player to draw the last object from the game loses.</p></span>
    </div>
    
    <br>

      <h2><strong>Roles!</strong></h2>
      <blockquote>
    <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
<p>In one move, you can remove any number of bricks but only from one row.Select any 'Row button' and click it to REMOVE bricks.<br> After each
move click 'Computer' to make the computer play. You lose if you leave the LAST match for the computer.<br>
Who Moves First At the start of a game, you have the first move, unless you allow the computer to play first by pressing the 'Play' button.</p>
   </blockquote>
    

    
    <br />
    <hr />
 
      <div class="heap" id="heap1">
      
      <br>
      
     <div class="stick">
  
  
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
    
      </div>
     </div>
     
     <br>
     
     
    <div id="picblock"></div>
    <div class="heap2" id="heap2">
      
      <br>
      
       <div class="stick">
  
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
      
     </div>
       </div>
     
      <br>
      
      <div id="picblock"></div>
    <div class="heap3" id="heap3">
     
      <br>
      
        <div class="stick">
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
  <div class="bricks" id="bricks" onclick="myFunction()"></div>
     
      </div>
       </div>
       
       <br>

    <hr />
    
   <form>
<table BORDER=0 cellpadding="1" cellspacing="1" id="nim game">
<tr align="center" valign="top">
<td COLSPAN="3"></td>
<td width="32"><img SRC="matcho1.gif"></td>
<td COLSPAN="3"></td>

</tr>
       </table>
        </form>
        


<div id="playerConsol">

  <div class="p">
    <span class='pheading'>Choose opponent </span>
    
  </div>
   
   <br> 
   
   
    <div className="opponent-choice">
      
  
    <div class="p" id="Computer">
      <span class="Names"><button class="move" id="click me" onclick="pcPlay()">Computer</button></span><br />
    </div>
    
    <br>
    
    <div class="p" id="Human">
        <span class="Names"><button class="move" id="click me" onlick="myFunction()">Human</button></span><br />
    </div>
    
    </div>
    <br/>
     <div class="p" id="Play Again">
      <span class="Names"><button class="move" id="click me"  
      onClick="myfunction()">Play Again</button>
         </span><br/>
    </div>
        
      
    
  <br />
  <br />
  <label>From heap &#x3a; </label>
  <select class='pickheap' id='pickheap'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <label>Move &#x3a; </label>
  <input type="number" value="1" id='numberofbricks'/>
    <label>Bricks(s)</label>
    
    <br>
    
    <br />
    
    
  <span>Overall Move Count &#x3a; <span class="MoveCount">0</span></span>
 

 <button class="connect1" onclick="myFunction()">Colorful</button>
 <button class="connect2" onclick="play()">Play</button>
 <button class="connect3" onclick="reset()">Reset</button> 
    
    

 <br>
 <br/>
  
 <tr align="center" valign="middle"> <td height="70" colspan="7"><input name="button2" type="button" class="button" onclick="new_game()" value="New game">
 
 <input name="button2" type="button" class="button" onclick="javascript:window.close()" value="Close window">
</td> 
    </tr>
      </div>
      
      <script>
          
          const rainbow = ['red','orange','yellow','green','blue','rebeccapurple','violet'];
    
            function selectMultiple() {
    document.getElementById("heap 1.bricks").multiple = true;.style.background = rainbow[Math.floor(7*Math.random())];
    
            }

</script>
    <script src='main.js'></script>
    <script type="text/javascript"></script>
    <script>
     
        
 btn.addEventListener('click', change);
        
        var brick = document.getElementById("brick-2");
    brick.style.backgroundColor = 'orange';
                    
                     
            
      </script>
      
      
      
    <script>
    
     //function for colorful
    
                 function myFunction() {
                //
   var elements=document.getElementsByClassName("bricks");
         
                //
                for(var i=0; i<elements.length; i++) {
    elements[i].style.background='red';
            
    
}
}
    </script>
    
    <script>
         //function for play
    function play() {
        //select the heap number based n user input
        var heapnum = document.getElementById("pickheap").value;
        //creates the heap id
        var heap = "heap".concat(heapnum);
        //selects all bricks within selected heap
        var elements= document.getElementById(heap).getElementsByClassName("bricks");
        //select the number of bricks to remove
        var numbricks = document.getElementById("numberofbricks").value;
        for(var i=elements.length-numbricks; i<elements.length; i++) {
         elements[i].style.visibility='hidden';
                   
        }
    }
    </script>
    
    <script>
    
      //pc play
     
     function pcPlay(){
         
          //select the heap number based n user input
        var heapnum = Math.floor((Math.random() *3) + 1);
         document.getElementById("pickheap").value=heapnum;
        
         //creates the heap id
        var heap = "heap".concat(heapnum);
        //selects all bricks within selected heap
        var elements= document.getElementById(heap).getElementsByClassName("bricks");
        //select the number of bricks to remove
        var numbricks = Math.floor((Math.random() *30) + 1);
         document.getElementById("numberofbricks").value=numbricks;

                
                for(var i=elements.length-numbricks; i<elements.length; i++) {
        elements[i].style.visibility='hidden';
         console.log(heapnum);
                   
              } 
     }
        
    </script>
    
    <script>
    
    
      //humanplay
     
     function humanPlay(){
         
         
          //select the heap number based n user input
        var heapnum = Math.floor((Math.random() *3) + 1);
         document.getElementById("pickheap").value=heapnum;

        
         //creates the heap id
        var heap = "heap".concat(heapnum);
        //selects all bricks within selected heap
        var elements= document.getElementById(heap).getElementsByClassName("bricks");
        //select the number of bricks to remove
        var numbricks = Math.floor((Math.random() *10) + 1);
         document.getElementById("numberofbricks").value=numbricks;

                
                for(var i=elements.length-numbricks; i<elements.length; i++) {
        elements[i].style.visibility='visible';         
         console.log(heapnum);
                   
              }
     }
    </script>
    
    
 <script>
     //reset
     function reset(){
            var elements= document.getElementsByClassName("bricks");
                
                for(var i=0; i<elements.length; i++) {
                    //elements[i].style.display='block';
                    elements[i].style.visibility='visible';
                }
        }
     
    </script>
    
  </body>
  
</html>

monique · January 17, 2018, 4:27pm

Started this game but get stock because i am new and i want to learn more. I mixed up lots of functions and can’t get the whole program working properly because i have difficulty in the Onclick buttons to get the bricks. Just the Reset button is working, colour just chaning to red but needed it to change in different colours that’s why i used the rainbow elements. I just need an outline why my Nim game is not working. Help!
Thanks for contributions.

BenGitter · January 17, 2018, 4:47pm

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

monique · January 17, 2018, 4:55pm

Sorry! Learning.
I will go through it now and learn it. Thanks once more.

monique · January 17, 2018, 4:57pm

oh! Thank you so much. What an expert you are. I will like to be like you one day.

Topic		Replies	Views
A short adventure game. Feedback appreciated	4	786	January 16, 2021
Coding issue need assistance JavaScript	5	293	November 24, 2023
Problem with document.getElementsById - Drum Machine Project	3	635	June 1, 2021
Simon Game player cannot click on the tile error	7	1233	January 17, 2021
Rock paper scissors game Code Feedback	4	2801	January 17, 2021

Hello Everyone! I am happy to be here

Related topics