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
Can you show us the code?
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 : 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 : </label>
<select class='pickheap' id='pickheap'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>Move : </label>
<input type="number" value="1" id='numberofbricks'/>
<label>Bricks(s)</label>
<br>
<br />
<span>Overall Move Count : <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>
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.
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.
Sorry! Learning.
I will go through it now and learn it. Thanks once more.
oh! Thank you so much. What an expert you are. I will like to be like you one day.