CODEWITHSUNDEEP
javascriptjqueryhtmlcssarrays
Bridget Kacprzyk
Bridget Kacprzyk

Reputation: 27

How do i finish this button array to make it work?

I'm very new to coding and haven't learned anything about buttons so sorry if I'm missing a lot. I don't know how to finish this loop so that when i click the button it cycles through the array i made. 

var love = ["0", "1", "2", "3", "4", "5"];

for (let i = 0; i < love.length; i++) {
  console.log(love[i])
}


$(".button").on("click", function() {});
* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}
<button class=button>New </button>
<div class="love"></div>

Upvotes: 0

Views: 81

Answers (4)

Jens Ingels
Jens Ingels

Reputation: 816

//Declare
const button = document.querySelectorAll(".button");
let love = ["0", "1", "2", "3", "4", "5"];

//Global Listener
document.addEventListener("click", (e) => {
	const target = e.target;
  
  //Check if button
  if(target.classList.contains("button"))
    //Loop
		love.forEach((item, i, array) => console.log(item));
    
});
* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}
<button class=button>New </button>
<div class="love"></div>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

First, that's not just javaScript it's jQuery. Second, your question is a bit unclear. You want when you click on the button, to start the for loop and console log ? something like this ? :

var love = ["0", "1", "2", "3", "4", "5"];

$(".button").on("click", function() {
  for (let i = 0; i < love.length; i++) {
    console.log(love[i])
  }
});
* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">New </button>
<div class="love"></div>

Upvotes: 1

Bikramjeet Singh
Bikramjeet Singh

Reputation: 186

Move the code for the actions you want to perform within the function body.

$(".button").on( "click", function() {
    var love = ["0", "1", "2", "3", "4", "5"];
    for (let i = 0; i < love.length; i++) {
        console.log (love[i])
    }
});

Upvotes: 0

Oliver Trampleasure
Oliver Trampleasure

Reputation: 3293

This works as you want (I think! I'm not 100% what you're looking for). I created a variable love_ind that keeps track of where you are in the array, and that is increased with each button press. It also checks if you reach the end of the array and restarts the cycle.

Let me know if this isn't what you were hoping for.

Demo

// Create array
var love = ["0", "1", "2", "3", "4", "5"];

// Create an index that we can increase later
var love_ind = 0

// Add click event to button
$(".button").on("click", function() {

  // Change text of the div
  $(".love").text(love[love_ind]);
  
  // Increase index for next button press
  love_ind = love_ind + 1;
  
  // Check if index is greater than the length of the array
  if (love_ind == love.length) {
    
    // Reset index to 0 if it is
    love_ind = 0;
    
  }
  
});
* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class=button>New</button>
<div class="love"></div>

Upvotes: 0

Related Questions