0

I am trying to make a simple menu where you can choose the background color of the menu itself, I load the options into an array of strings.

Inorder to navigate throught the options I use two elements with different classes, .rest and plus. Both navigate through the previous and next options available.

ISSUE: It only works once, I click on .plu and it shows "verde" or green, the nextcolor value. If I press plus again it won't show me the next value, it stays like that. I can't go back to the previous color neighter.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
$(document).ready(function(){
colores = ['amarillo', 'verde', 'rosa', 'naranja', 'purpura'];
var i = 0;
$('.colorines').text(colores[i]);

$('.rest').click(function () {
colores[i] = colores[i - 1];
$('.colorines').text(colores[i]);
});

$('.plus').click(function () {
colores[i] = colores[i + 1];
$('.colorines').text(colores[i]);
alert('next color');
});


});
.postit {
  position:absolute; 
  overflow:hidden;
  left:1070px; 
  top:-140px; 
  padding-left:10px;
  line-height: 1;   
  width: 275px;    
  margin: 0px;    
  min-height:250px;
  max-height:250px;
  padding-top:35px; 
  border:1px solid #E8E8E8;  
  border-top:60px solid #fdfd86;
  font-family:'Reenie Beanie';    
  font-size:22px;      
  border-bottom-right-radius: 60px 5px;
  display:inline-block;    
  background: #ffff88; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */
  background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C #A3FF87 #CFFFC7*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
 
.postit:after {     
  content: "";
  position:absolute; 
  z-index:-1;
  right:-0px; 
  bottom:20px;
  width:200px;
  height: 25px;
  background: rgba(0, 0, 0, 0.2);
  box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40);
  -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -o-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0);
  transform: matrix(-1, -0.1, 0, 1, 0, 0);
}

.settingswheel{
	position:absolute; 
	bottom:32px; 
	right:15px; 
	cursor:pointer;
	z-index:10001;
	-moz-transition: transform 2.5s;
    -webkit-transition: transform 2.5s;
    transition: transform 2.5s;
}

.settingswheel:hover{
  transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.settingsin{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive;  display:flex; justify-content:flex-start; align-items:center; height:110px; width:200px;  background-color:rgb(255, 255, 136); position:absolute; bottom:0px; left:5px; transition: all 1.5s ease;}
.settingsout{z-index:2; font-size:60px; font-family: 'Covered By Your Grace', cursive;  display:flex; justify-content:center; align-items:center; padding:15px; background-color:rgb(255, 255, 136); position:absolute; bottom:0px; left:-202px; transition: all 1.5s ease;}

.menu{
	list-style:none; 
	bottom:3px; 
	position:absolute; 
	font-family: 'Covered By Your Grace', cursive; 
	font-weight:300; 
	width:200px;
	z-index:1;
}

.menu  li{font-size:21px; margin-top:5px;}
<div class="postit">
  <ul class="menu">
    <li><span data-es="Pantalla completa: " data-en="Full screen: "></span><span data-es="si" data-en="yes"></span></li>
	<li><span data-es="Idioma: " data-en="Language: "></span><span class="la" style="cursor:pointer;" data-es="ingles" data-en="english"></span></li>
	<li><span data-es="Diapositivas: " data-en="Slideshow: " ></span><span>< </span><span>3s</span><span> ></span></li>
	<li><span data-es="Color postit: " data-en="Postit color: "></span ><span class="rest" style="cursor:pointer;">< </span><span class="colorines"></span><span class="plus" style="cursor:pointer;" > ></span></li>
  </ul>
</div>

Improve this question

2 Answers 2

Reset to default
1

You should be decrementing/incrementing the value of i via -- or ++ instead. It would also be a good idea to setup some kinda of conditional that checks that you don't go over/under your array index:

$(document).ready(function() {
  colores = ['amarillo', 'verde', 'rosa', 'naranja', 'purpura'];

  var i = 0;

  $('.colorines').text(colores[i]);

  $('.rest').click(function() {
    if (i === 0) {
      return;
    } else {
      $('.colorines').text(colores[--i]);
    }
  });

  $('.plus').click(function() {
    if (i === colores.length - 1) {
      return;
    } else {
      $('.colorines').text(colores[++i]);
      alert('next color');
    }
  });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yes this, thanks for the explanation and suggestion.
1

You are not incrementing "I" any time. So please increase it when it executes plus. And not use colores[i] = colores[i + 1]; it will make your colores array with duplicate elements.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.