I have the following code that allows me to display the number of models I have in my database. Each model details are tagged with a href button for the user to select.
1) Once the user clicked on the href button, the button's text will be changed to "selected".
2) If the user clicked on the button showing "selected", the button's text will be changed to "select".
<div class="row text-center">
<?php
while($rowModelList=mysql_fetch_array($resultModelList))
{
?>
<div class="col-md-3 col-sm-6 hero-feature">
<div class="thumbnail">
<img src="Images/Models/<? echo $rowModelList['modelImage'];?>" alt="" style="height: 200px;">
<div class="caption">
<h4><?php echo $rowModelList['modelName']?></h4>
<p>
Select
</p>
</div>
</div>
</div>
<?php
}
?>
</div>
I have the following code that allows me to change the colour and text of the href button when clicked.
/* Changing the colour of the href button upon clicked */
function changecolor(element) {
alert(element.target.id);
if (element.innerHTML == "Select") {
element.innerHTML = "Selected";
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
alert(element);
}
return false;
}
However, I am trying to restrict the number of buttons to be selected by the user.
For example, a list of 20 models is shown to the user but they are only allowed to select 8 of the model. Once 8 of the button's text are shown to be "selected", they will need to deselect one of the selected button in order to make new selection.
Any idea how I can modify the code to achieve it?
Thanks in advance
simply count selected options in your function:
var selectedCount = 0; // global variable
function changecolor(element) {
alert(element.target.id);
if(selectedCount > 8)
{
alert("already selected 8 options");
return false;
}
if (element.innerHTML == "Select") {
element.innerHTML = "Selected";
selected++;
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
selected--;
alert(element);
}
return false;
}
But its a lot easier if you use class for each element. Less code, and more control. Add class "selected" if element is checked, and remove it if unchecked. You dont need to style it in your javascript code.
jQuery example with class usage:
jQuery(document).ready(function(){
jQuery('.option').click(function(){
if(jQuery(this).hasClass('selected'))
{
// mark as unchecked
jQuery(this).html('not selected');
jQuery(this).removeClass('selected');
}
else
{
// mark as checked
if(jQuery('.selected').length >= 2) // check limit
{
alert('to many selected');
return false
}
jQuery(this).html('selected');
jQuery(this).addClass('selected');
}
return false;
});
});
Just create a variable that tracks how many are selected
/* Changing the colour of the href button upon clicked */
var selectedCount = 0;
function changecolor(element) {
if (selectedCount >=8 ) {
return;
}
if (element.innerHTML == "Select") {
selectedCount++;
element.innerHTML = "Selected";
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
selectedCount--;
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
alert(element);
}
return false;
}
You should avoid a global variable and you can do so using a closure/module pattern.
/* Changing the colour of the href button upon clicked */
var changecolor = (function(){
var selectedCount = 0;
function(element) {
if (selectedCount >=8 ) {
return;
}
if (element.innerHTML == "Select") {
selectedCount++;
element.innerHTML = "Selected";
element.style.backgroundColor = "#C0C0C0"; /*Grey*/
element.style.borderColor = "#C0C0C0";
alert(element);
} else {
selectedCount--;
element.innerHTML = "Select";
element.style.backgroundColor = "#FED136"; /*Yellow*/
element.style.borderColor = "#FED136";
alert(element);
}
return false;
}
})();
Related
I'm trying to add some validation on something I'm working on. Basically if no input is processed, it would return a red paragraph telling you to enter something and return false. The problem I'm having is how to remove it when a valid value is processed.
var input = document.getElementById('input'),
button = document.getElementById('add')
function removeItem() {
var item = this.parentNode
var parent = item.parentNode
parent.removeChild(item)
}
button.addEventListener('click', function (e) {
if (input.value === '') {
var p = document.querySelector('p')
p.style.display = 'block'
return false
} else if (!input.value === '') {
p.style.display = ''
return true
}
var userInput = document.createTextNode(input.value)
var li = document.createElement('li')
var ul = document.getElementById('todo')
var remove = document.createElement('button')
remove.innerHTML = 'Remove'
remove.addEventListener('click', removeItem);
ul.insertBefore(li, ul.childNodes[0])
li.appendChild(userInput)
li.appendChild(remove)
})
<input type="text" id="input"/>
<button id="add">Add</button>
<p>plz add</p>
<div class="container">
<ul id="todo"></ul>
</div>
p {
display: none;
color: #f00;
}
Some issues:
You return in both if ... else cases, which (if it would work) makes the rest of the code unreachable.
The else if condition is unnecessary (since the if condition was already false), but is also wrong: ! has precedence over ===, so better use !==. Anyway, it is not needed at all.
Here is the corrected code:
var input = document.getElementById('input'),
button = document.getElementById('add');
function removeItem() {
var item = this.parentNode;
var parent = item.parentNode;
parent.removeChild(item);
}
button.addEventListener('click', function(e) {
var p = document.querySelector('p');
if (input.value.trim() === '') {
p.style.display = 'block';
return false;
}
p.style.display = '';
var remove = document.createElement('button');
remove.textContent = 'Remove';
remove.addEventListener('click', removeItem);
var li = document.createElement('li');
li.appendChild(document.createTextNode(input.value));
li.appendChild(remove);
todo.insertBefore(li, todo.childNodes[0]);
});
p {
display: none;
color: #f00;
}
<input type="text" id="input"/>
<button id="add">Add</button>
<p>plz add</p>
<div class="container">
<ul id="todo"></ul>
</div>
add an id to the error element. Then :
var el = document.getElementById('theidyouset')
el.parentNode.removeChild( el );
or you could hide it
el.className += " classhiddenwithcss";
Use CSS classes and simply add or remove the class from the class list as needed.
Also, because you are using return in both of your if/else cases, the code will stop processing and not continue on to do the rest of the work. Move the if/else to the end of the code so that return is the last thing you do.
And, use semi-colons at the end of your statements.
var input = document.getElementById('input'),
button = document.getElementById('add')
function removeItem() {
var item = this.parentNode;
var parent = item.parentNode;
parent.removeChild(item);
}
button.addEventListener('click', function(e) {
var p = document.querySelector('p')
var userInput = document.createTextNode(input.value)
var li = document.createElement('li')
var ul = document.getElementById('todo')
var remove = document.createElement('button')
remove.innerHTML = 'Remove'
remove.addEventListener('click', removeItem);
ul.insertBefore(li, ul.childNodes[0])
li.appendChild(userInput)
li.appendChild(remove)
if (input.value === '') {
p.classList.remove("hidden");
return false;
} else {
p.classList.add("hidden");
return true;
}
})
p {
color: #f00;
}
.hidden {
display:none;
}
<input type="text" id="input"/>
<button id="add">Add</button>
<p class="hidden">plz add</p>
<div class="container">
<ul id="todo"></ul>
</div>
I'm trying to hide/show a div depending on a checkbox, but can't make it work. I've seen many examples, tutorials, but couldn't adapt them to my case. It seems there are a lot of ways to do that.
Here is part of my code:
<div id="layer-control">
<p>Selectionnez les couches pour les afficher sur la carte.</p>
<div id="reciprocite">
<nav id='filter-group-reci' class='filter-group-reci'></nav>
<div id='recipro-polygon' class='legend' style="display:none;">>
<div><span style='background-color: #e6d94c' 'opacity:0.45'></span>GPV (adhérent URNE)</div>
<div><span style='background-color: #010492' 'opacity:0.45'></span>GPRMV (adhérent URNE)</div>
<div><span style='background-color: #179201' 'opacity:0.45'></span>EH3VV (adhérent URNE)</div>
<div><span style='background-color: #920104' 'opacity:0.45'></span>GAP </div>
<div><span style='background-color: #404040' 'opacity:0.45' ></span>AAPPMA Non réciprocitaires</div>
</div>
</div>
<div id="rivieres">
<nav id='filter-group-rivieres' class='filter-group-rivieres'></nav>
<div id='rivieres-line' class='legend'>
<div><span style="background-color: #0400ff; height: 4px"></span>1ère Catégorie DPF</div>
<div><span style="background-color: #6ea5f2; height: 2px"></span>1ère Catégorie</div>
<div><span style="background-color: #c110b6; height: 4px"></span>2ème Catégorie DPF</div>
<div><span style="background-color: #e48ff5; height: 2px"></span>2ème Catégorie</div>
<span><em>*Domaine Public Fluvial</em></span>
</div>
</div>
var layers = document.getElementById('filter-group-reci');
var layers2 = document.getElementById('filter-group-rivieres');
var layers3 = document.getElementById('filter-group-parcours');
toggleLayer('Réciprocité', ['reciprocite-gpv', 'reciprocite-gap','reciprocite-gprmv','reciprocite-non-recipro','reciprocite-eh3vv']);
toggleLayer2('Catégories Piscicoles',['cours-deau-large-1ere-dpf', 'cours-deau-m-1ere-dpf','cours-deau-s-1ere-dpf','cours-deau-large-2eme-dpf', 'cours-deau-m-2eme-dpf','cours-deau-s-2eme-dpf','cours-deau-large-1ere', 'cours-deau-m-1ere','cours-deau-s-1ere','cours-deau-large-2eme', 'cours-deau-m-2eme','cours-deau-s-2eme'])
//Bouton réciprocité
function toggleLayer(name,ids) {
var input = document.createElement('input');
input.type = 'checkbox';
input.id = ids;
input.checked = false;
layers.appendChild(input);
var label = document.createElement('label');
label.setAttribute('for', ids);
label.textContent = name;
layers.appendChild(label);
input.onclick = function (e) {
e.stopPropagation();
for (layers in ids){
var visibility = map.getLayoutProperty(ids[layers], 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(ids[layers], 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(ids[layers], 'visibility', 'visible');
}
}
};
}
//Bouton Catégorie piscicoles
function toggleLayer2(name,ids) {
var input = document.createElement('input');
input.type = 'checkbox';
input.id = ids;
input.checked = true;
layers2.appendChild(input);
var label = document.createElement('label');
label.setAttribute('for', ids);
label.textContent = name;
layers2.appendChild(label);
input.onclick = function (e) {
e.stopPropagation();
for (layers in ids){
var visibility = map.getLayoutProperty(ids[layers], 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(ids[layers], 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(ids[layers], 'visibility', 'visible');
}
}
};
}
First, I've read that it may be possible using CSS, with "input:checked ~ "
i tried:
.legend {
display:none;
}
#reciprocite-gpv,reciprocite-gap,reciprocite-gprmv,reciprocite-non-recipro,reciprocite-eh3vv input:checked ~ .legend {
display: block;
}
Didn't work, maybe I caused a syntax error?
Then i tried using javascript (or is it JQuery?)
$(function(){
$("input[type=checkbox]").change(function(){
if ($(this).is(":checked")){
$(this).next("div").css("display","block");
} else {
$(this).next("div").css("display","none");
}
});
$("input[type=checkbox]").change();
});
Could anyone give me a hint how to accomplish this?
You can use onclickto create a toggle-function and check, whether the checkbox is checked or not. Depending on the result you change the text of your div.
Take a look at this plunker. Here I used plain JavaScript. As you use jQuery you could also use div.html("your text") to change the text.
I have a drop down list and I want every time someone clicks on one of the list, it shows a hidden div, I've written this code but for some reason it doesn't work:
<?php
echo '<select name="ipqos" onchange="myFunction()">';
if ($enable_iprule[0]=='yes'){
echo '<option value="enable_iprule" selected>Enable IP Rule';
}
else{
echo '<option value="enable_iprule">Enable IP Rule';
}
if ($enable_qoshunter[8]=='yes'){
echo '<option value="enable_qoshunter" selected>Enable QoS Hunter';
}
else{
echo '<option value="enable_qoshunter">Enable QoS Hunter';
}
if ($enable_iprule[8]=='no' && $enable_qoshunter[0]=='no'){
echo '<option value="disable_all" selected>Disable All';
}
else{
echo '<option value="disable_all">Disable All';
}
echo '</select>';
echo "
<div id=\"ip\" style=\"display:none\">
<br><br>IP Rule :
<br><textarea name=\"ip_rule\" rows=\"2\"/>$ip_list[1]</textarea>
</div>
<div id=\"qos\" style=\"display:none\">
<br><br>QoS Target :
<br><textarea name=\"qos_target\" rows=\"2\"/>$qos_list[1]</textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>";
?>
I don't get any error messages on my script but for some reason every time I click on a menu, the corresponding hidden div doesn't show up
Where did I go wrong?
UPDATE: This is the View Source from Google Chrome
<select name="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
<script>
function myFunction() {
var menu = document.getElementById('ipqos');
if (menu.options[menu.selectedIndex].text == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (menu.options[menu.selectedIndex].text == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
</script>
This line:
var menu = document.getElementById('ipqos');
There is no element with ID ipqos. There is an element with that name, but not an ID. Change it to:
<select name="ipqos" id="ipqos" onchange="myFunction()">
Second, you're comparing the text of the selected option. Looking at your options, you want to be checking the value instead:
menu.options[menu.selectedIndex].value == 'enable_iprule'
Working example:
function myFunction() {
var menu = document.getElementById('ipqos');
var val = menu.options[menu.selectedIndex].value;
if (val == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (val == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
<select name="ipqos" id="ipqos" onchange="myFunction()"><option value="enable_iprule">Enable IP Rule<option value="enable_qoshunter">Enable QoS Hunter<option value="disable_all">Disable All</select>
<div id="ip" style="display:none">
<br><br>IP Rule :
<br><textarea name="ip_rule" rows="2"/></textarea>
</div>
<div id="qos" style="display:none">
<br><br>QoS Target :
<br><textarea name="qos_target" rows="2"/></textarea>
RGraham solutions works perfectly.
I did a small work arround on your script.
Here is a simple jsFiddle : http://jsfiddle.net/5ypkaxup/
For the Javascript, I did simplify the process a little bit.
function changedSelect() {
var selectedOption = document.getElementById("ip_select").value;
document.getElementById("demo").innerHTML = "You selected: " + selectedOption;
if(selectedOption == 'enable_iprule') {
document.getElementById('ip').style.display = 'block';
document.getElementById('qos').style.display = 'none';
}
else if (selectedOption == 'enable_qoshunter') {
document.getElementById('qos').style.display = 'block';
document.getElementById('ip').style.display = 'none';
}
else {
document.getElementById('qos').style.display = 'none';
document.getElementById('ip').style.display = 'none';
}
}
As he told, you need to give an ID to your select element to make it works.
<select id="ip_select" name="ipqos" onchange="changedSelect();">
On the click of a button (using onclick), I am toggling the display style of three divs between none and block. I am at a loss as to how I can make these divs fade in and out. I am open to using JQuery as well but I do not see how I could integrate andéor use the fadeIn() and fadeOut() functions here. Any suggestions as to how I can go about doing this would be greatly appreciated.
Below is the function that is being called onclick for reference, this is where the display attribute of my divs is toggled.
function divSelector(count){
if (count == 1){
var temp = document.getElementById('second-about-text');
temp.style.display = 'none';
temp = document.getElementById('third-about-text');
temp.style.display = 'none';
temp = document.getElementById('first-about-text');
temp.style.display = 'block';
}
else if (count == 2){
var temp = document.getElementById('first-about-text');
temp.style.display = 'none';
temp = document.getElementById('third-about-text');
temp.style.display = 'none';
temp = document.getElementById('second-about-text');
temp.style.display = 'block';
}
else if (count == 3){
var temp = document.getElementById('first-about-text');
temp.style.display = 'none';
temp = document.getElementById('second-about-text');
temp.style.display = 'none';
temp = document.getElementById('third-about-text');
temp.style.display = 'block';
}
else{
console.log("Count is nothing.");
}
}
Since you are open to JQuery try this way:
I am just assuming your markup here. Give a common class to your divs say content so that they are accessible with one selector.
$('.content:gt(0)').hide(); //start up hide all but the first one.
function divSelector(count){
var currElem = $('.content:eq(' + count-1 + ')'); //get the div based on the count number eq will give the div based on its index and position in DOM. Assuming these divs appear in DOM one after the other.
$('.content').not(currElem).fadeOut('1000', function(){ //Fade out other content divs
currElem.fadeIn('1000'); //Fade in the current one.
});
}
:gt()
:eq()
:fadeIn()
:fadeOut()
providing your markup will clear out the assumptions and help provide a better solution.
Here is a fully contained example for you:
jsFiddle here
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
.btn {height:50px;width:50px;margin:50px 50px;}
.one{background-color:red;}
.two{background-color:green;}
.three{background-color:blue;}
</style>
<script type="text/javascript">
$(document).ready(function() {
count = 1;
$('#mybutt').click(function() {
divSelector(count);
count++;
if (count==4) count = 1;
});
function divSelector(count){
if (count == 1){
$('#first-about-text').fadeIn(1000);
$('#second-about-text').hide();
$('#third-about-text').fadeOut(1000);;
}else if (count == 2){
$('#first-about-text').fadeOut(1000);
$('#second-about-text').fadeIn(1000);
$('#third-about-text').hide();;
}else if (count == 3){
$('#first-about-text').hide();
$('#second-about-text').fadeOut(1000);
$('#third-about-text').fadeIn(1000);;
}else{
console.log("Count is nothing.");
}
}
}); //END $(document).ready()
</script>
</head>
<body>
<div id="first-about-text" class="btn one"></div>
<div id="second-about-text" class="btn two"></div>
<div id="third-about-text" class="btn three"></div>
<input type="button" id="mybutt" value="Click Me">
</body>
</html>
Is it what you need?
function divSelector(count){
if (count == 1){
$('#second-about-text').fadeOut();
$('#third-about-text').fadeOut();
$('#first-about-text').fadeIn();
}
else if (count == 2){
$('#second-about-text').fadeIn();
$('#third-about-text').fadeOut();
$('#first-about-text').fadeOut();
}
else if (count == 3){
$('#second-about-text').fadeOut();
$('#third-about-text').fadeIn();
$('#first-about-text').fadeOut();
}
else{
console.log("Count is nothing.");
}
}
Okay, so this is my problem. I'm creating a game of memory with some images in it. I cannot understand how I would be able to display the image after setting it to display='none' with the for-loop onLoad function.
I've tried for a couple of hours now without result. =(
Anyone that can help me?
And also elem.id points to a td id so it's dynamic. It's tricky because in every td there is an img.
I sincerely appreciate your help.
This is my code:
var clicked = true;
var firstClick;
var secondClick;
var firstPlayer = true;
var addPointPlayer1 = 0;
var addPointPlayer2 = 0;
var totalPoints = 8;
function clickCard(elem){
//document.getElementsByTagName('img').style.display = "";
if(clicked){
firstClick = document.getElementById(elem.id);
// document.getElementsByName(/.img/).style.visibility="visible";
firstClick.style.backgroundColor= "white";
clicked = false;
}
else{
secondClick = document.getElementById(elem.id);
secondClick.style.backgroundColor = "white";
if(firstClick.innerHTML == secondClick.innerHTML){
firstClick.style.backgroundColor="white";
secondClick.style.backgroundColor="white";
if(firstPlayer){
addPointPlayer1++;
totalPoints--;
}
else{
addPointPlayer2++;
totalPoints--;
}
}
else {
alert('This is not a pair, player change');
firstClick.style.backgroundColor="#7f1a1a";
secondClick.style.backgroundColor="#7f1a1a";
if(firstPlayer){
firstPlayer = false;
}
else{
firstPlayer = true;
}
}
clicked = true;
}
//Keeping control of the winner
if(totalPoints == 0){
if(addPointPlayer1 > addPointPlayer2){
alert("Game over! Player 1 wins with " + addPointPlayer1 + " points" + addPointPlayer2);
}
else if (addPointPlayer1 == addPointPlayer2){
alert("This is a draw press cmd+R for a rematch");
}
else{
alert("Game over! Player 2 wins with " + addPointPlayer2 + " points against " + addPointPlayer1);
}
}
}
//creates a blank game-plan
function hideGamePlan(){
var images = document.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}
If you've set the display to none, then somewhere else you should be setting the display to something - ie block.
I recommend this for help: http://www.w3schools.com/cssref/pr_class_display.asp
After if(clicked){firstClick = document.getElementById(elem.id);
I guess your problem is to find the children image tag element
if that is the case You may use find("img")
I mean
if(clicked){
firstClick = document.getElementById(elem.id);
elemtochange = firstClick.find("img");
// Changing image style here
elemtochange.style.display ="block";
}
Or you may want to look into Jquery to do the same for you by just
if (clicked){
$(elem).children("img").show(); // elem = Clicked element
}
Instead of show you may use hide to hide the element or toggle to toggle the display between show and hide on every click
I've solved this with
function clickCard(elem){
if(!clicked){
firstClick = document.getElementById(elem.id);
firstClick.style.backgroundColor= "white";
findImage[firstClick.id-1].style.visibility="visible";
clicked = true;
//alert(findImage);
}
else{
secondClick = document.getElementById(elem.id);
secondClick.style.backgroundColor = "white";
findImage[secondClick.id-1].style.visibility="visible";
// firstClick.getAttribute('src');
// secondClick.getAttribute('src');
if(firstClick.innerHTML == secondClick.innerHTML){
firstClick.style.backgroundColor="white";
secondClick.style.backgroundColor="white";
if(firstPlayer){
addPointPlayer1++;
totalPoints--;
}
else{
addPointPlayer2++;
totalPoints--;
}
}
else {
alert('This is not a pair, player change');
firstClick.style.backgroundColor="#7f1a1a";
secondClick.style.backgroundColor="#7f1a1a";
findImage[firstClick.id-1].style.visibility="hidden";
findImage[secondClick.id-1].style.visibility="hidden";
if(firstPlayer){
firstPlayer = false;
//findImage[elem.id-1].style.visibility="hidden";
}
else{
firstPlayer = true;
}
}
clicked = false;
}
//Keeping control of the winner
if(totalPoints == 0){
if(addPointPlayer1 > addPointPlayer2){
alert("Game over! Player 1 wins with " + addPointPlayer1 + " points" + addPointPlayer2);
}
else if (addPointPlayer1 == addPointPlayer2){
alert("This is a draw press cmd+R for a rematch");
}
else{
alert("Game over! Player 2 wins with " + addPointPlayer2 + " points against " + addPointPlayer1);
}
}
}
function hideGamePlan(){
findImage = document.getElementsByTagName('img');
for (i = 0; i < findImage.length;i++ ) {
findImage[i].style.visibility = "hidden";
}
}
Thanks for all the response's! I ended up just placing the submit buttons up top..
<form action = "/memory-game/index.php" method = "POST">
<input type="submit" name="dog" value="Dog" />
<input type="submit" name="cat" value="Cat" />
<input type="submit" name="fish" value="Fish" />
<input type="submit" name="zoo" value="Zoo" />
<input type="submit" name="xmas" value="Xmas" />
<input type="submit" name="pen" value="Pengins" />
</form>
Then for the other page did this:
if(isset($_POST['dog'])){$currentArr = $dogArr;}
elseif(isset($_POST['cat'])){$currentArr = $catArr;}
elseif(isset($_POST['fish'])){$currentArr = $fishArr;}
elseif(isset($_POST['xmas'])){$currentArr = $xmasArr;}
elseif(isset($_POST['pen'])){$currentArr = $penginArr;}
elseif(isset($_POST['zoo'])){$currentArr = $zooArr;}