const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
const colorIdentifier = document.querySelector('.color');
const button = document.getElementById('btn');


for (let color of colors) {
  loopButton();
}

function loopButton() {
  button.addEventListener('click', function() {
    colorIdentifier.innerText = color;
  })
};
/* * {
  border: 5px solid purple;
} */


/*
=============== 
Fonts
===============
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: hsl(205, 78%, 60%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --ff-primary: "Roboto", sans-serif;
  --ff-secondary: "Open Sans", sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}


/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff-secondary);
  background: var(--clr-grey-10);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-family: var(--ff-primary);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}


/*  global classes */


/* section */

.section {
  padding: 5rem 0;
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}

@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}


/*
=============== 
Nav
===============
*/

nav {
  background: var(--clr-white);
  height: 3rem;
  display: grid;
  align-items: center;
  box-shadow: var(--dark-shadow);
}

.nav-center {
  width: 90vw;
  max-width: var(--fixed-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-center h4 {
  margin-bottom: 0;
  color: var(--clr-primary-5);
}

.nav-links {
  display: flex;
}

nav a {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-primary-1);
  letter-spacing: var(--spacing);
  margin-right: 1rem;
}

nav a:hover {
  color: var(--clr-primary-5);
}


/*
=============== 
Container
===============
*/

main {
  min-height: calc(100vh - 3rem);
  display: grid;
  place-items: center;
}

.container {
  text-align: center;
}

.container h2 {
  background: var(--clr-black);
  color: var(--clr-white);
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}

.color {
  color: var(--clr-primary-5);
}

.btn-hero {
  font-family: var(--ff-primary);
  text-transform: uppercase;
  background: transparent;
  color: var(--clr-black);
  letter-spacing: var(--spacing);
  display: inline-block;
  font-weight: 700;
  transition: var(--transition);
  border: 2px solid var(--clr-black);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
}

.btn-hero:hover {
  color: var(--clr-white);
  background: var(--clr-black);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Color Flipper || Simple</title>

  <!-- styles -->
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <nav>
    <div class="nav-center">
      <h4>Color Flipper</h4>
      <ul class="nav-links">
        <li><a href="index.html">simple</a></li>
        <li><a href="hex.html">hex</a></li>
      </ul>
    </div>
  </nav>

  <main>
    <div class="container">
      <h2>background color: <span class="color">#000</span></h2>
      <button class="btn btn-hero" id="btn">click me</button>
    </div>
  </main>
  <!-- javascript -->
  <script src="app.js"></script>
</body>

</html>

मैं HTML span तत्व के आंतरिक पाठ को संशोधित करना चाहता हूं। और आंतरिक पाठ colors सरणी के अलग-अलग रंग दिखाते हैं button तत्व पर क्लिक होने के बाद क्रमिक रूप से।

<h2>background color: <span class="color">#000</span></h2>

मैंने लूप विधि के लिए उपयोग किया।

for(let color of colors) {
  loopButton();
}

function loopButton() { button.addEventListener('click', function() {
  colorIdentifier.innerText = color;
}
)};

ऐसा क्यों कहा जाता है कि "ऐसा लगता है कि मेरी पोस्ट ज्यादातर कोड है, हालांकि मैंने स्निपेट का उपयोग किया है?" मुझे जानने की जरूरत है। मुझे लगता है कि अगर मैं स्निपेट में बहुत सारे कोड पोस्ट करता हूं तो यह उपयोगी है क्योंकि लोग पूरा कोड देख सकते हैं।

1
Jeatz 10 जुलाई 2021, 20:25

3 जवाब

सबसे बढ़िया उत्तर

सबसे पहले, आपको Uncaught reference त्रुटि मिलती है क्योंकि ईवेंट श्रोता फ़ंक्शन को कार्यात्मक संदर्भ के बाहर निष्पादित किया जाता है जहां आपने इसे जोड़ा था, इसलिए इसकी चर तक पहुंच नहीं है। एक आसान फिक्स बस इसे पास करना है:

for (const color of colors) {
    loopButton(color);
}

रंगों की वास्तविक लूपिंग के लिए, आप एक ही click ईवेंट और तत्व में एकाधिक कॉलबैक जोड़ रहे हैं, इसलिए आप अनिवार्य रूप से उन्हें ओवरराइट कर रहे हैं। आप जो चाहते हैं उसे पूरा करने के कई तरीके हैं, लेकिन मेरा सुझाव है कि एक काउंटर को कोड में रखें और हर बार बटन दबाए जाने पर इसे बढ़ाएं। इससे ऐसा होगा कि हर बार कॉलबैक कहे जाने पर color वैरिएबल का एक अलग मान हो। कुछ इस तरह:

let counter = 0;
function callBack() {
    const idx = counter % (colors.length);
    colorIdentifier.innerText = colors[idx];
    colorIdentifier.style.color = colors[idx];
    counter++;
}
button.addEventListener('click', callBack);

आपको अब-कार्यात्मक स्निपेट नीचे मिलेगा। आशा है कि मैंने चीजें स्पष्ट कर दी हैं। :)

const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
const colorIdentifier = document.querySelector('.color');
const button = document.getElementById('btn');


let counter = 0;
function callBack() {
    const idx = counter % (colors.length);
    colorIdentifier.innerText = colors[idx];
    colorIdentifier.style.color = colors[idx];
    counter++;
}
button.addEventListener('click', callBack);
/* * {
  border: 5px solid purple;
} */


/*
=============== 
Fonts
===============
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: hsl(205, 78%, 60%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --ff-primary: "Roboto", sans-serif;
  --ff-secondary: "Open Sans", sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}


/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff-secondary);
  background: var(--clr-grey-10);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-family: var(--ff-primary);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}


/*  global classes */


/* section */

.section {
  padding: 5rem 0;
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}

@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}


/*
=============== 
Nav
===============
*/

nav {
  background: var(--clr-white);
  height: 3rem;
  display: grid;
  align-items: center;
  box-shadow: var(--dark-shadow);
}

.nav-center {
  width: 90vw;
  max-width: var(--fixed-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-center h4 {
  margin-bottom: 0;
  color: var(--clr-primary-5);
}

.nav-links {
  display: flex;
}

nav a {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-primary-1);
  letter-spacing: var(--spacing);
  margin-right: 1rem;
}

nav a:hover {
  color: var(--clr-primary-5);
}


/*
=============== 
Container
===============
*/

main {
  min-height: calc(100vh - 3rem);
  display: grid;
  place-items: center;
}

.container {
  text-align: center;
}

.container h2 {
  background: var(--clr-black);
  color: var(--clr-white);
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}

.color {
  color: var(--clr-primary-5);
}

.btn-hero {
  font-family: var(--ff-primary);
  text-transform: uppercase;
  background: transparent;
  color: var(--clr-black);
  letter-spacing: var(--spacing);
  display: inline-block;
  font-weight: 700;
  transition: var(--transition);
  border: 2px solid var(--clr-black);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
}

.btn-hero:hover {
  color: var(--clr-white);
  background: var(--clr-black);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Color Flipper || Simple</title>

  <!-- styles -->
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <nav>
    <div class="nav-center">
      <h4>Color Flipper</h4>
      <ul class="nav-links">
        <li><a href="index.html">simple</a></li>
        <li><a href="hex.html">hex</a></li>
      </ul>
    </div>
  </nav>

  <main>
    <div class="container">
      <h2>background color: <span class="color">#000</span></h2>
      <button class="btn btn-hero" id="btn">click me</button>
    </div>
  </main>
  <!-- javascript -->
  <script src="app.js"></script>
</body>

</html>
1
literateBear 10 जुलाई 2021, 17:45

ठीक है, क्या आप जो करने की कोशिश कर रहे हैं वह है सरणी में अगला रंग दिखाने के लिए बटन क्लिक पर? यदि ऐसा है तो यह जावास्क्रिप्ट है

const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]
const colorIdentifier = document.querySelector(".color")
const button = document.getElementById("btn")

// global index for so we can iterate array 1 by 1
let index = 0

// button on click event listener
button.addEventListener("click", () => {
    // set the text of colorIdentifier to colors and use the index of how many times we clicked the button
    colorIdentifier.textContent = colors[index]

    // iterate the button for on each click this is shorthand for index = index + 1
    index++

    // check to see if the index is bigger then the length and resets it back to 0
    if (index >= colors.length) index = 0
})
0
K i 10 जुलाई 2021, 17:46

चूंकि रंग किसी अन्य फ़ंक्शन पर परिभाषित किया गया है, आप इसे एक्सेस नहीं कर सकते हैं, क्योंकि let और const ब्लॉक जंजीर चर हैं - वे acces हो सकते हैं

const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
const colorIdentifier = document.querySelector('.color');
const button = document.getElementById('btn');

let i = 0;

function previewColors() {
  colorIdentifier.innerHTML = colors[i]; // Change innerHTML text
  colorIdentifier.style.color = colors[i]; // Change innerHTML color
  i++;
  if( i < colors.length){
  window.setTimeout(previewColors, 1000); // Access array after 1 sec if i < color.length - LOOPS over the array in recursive way- .
  }
}

button.addEventListener('click', previewColors);
/* * {
  border: 5px solid purple;
} */


/*
=============== 
Fonts
===============
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: hsl(205, 78%, 60%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --ff-primary: "Roboto", sans-serif;
  --ff-secondary: "Open Sans", sans-serif;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}


/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--ff-secondary);
  background: var(--clr-grey-10);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  font-family: var(--ff-primary);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1rem;
  }
  body {
    font-size: 1rem;
  }
  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}


/*  global classes */


/* section */

.section {
  padding: 5rem 0;
}

.section-center {
  width: 90vw;
  margin: 0 auto;
  max-width: 1170px;
}

@media screen and (min-width: 992px) {
  .section-center {
    width: 95vw;
  }
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
}


/*
=============== 
Nav
===============
*/

nav {
  background: var(--clr-white);
  height: 3rem;
  display: grid;
  align-items: center;
  box-shadow: var(--dark-shadow);
}

.nav-center {
  width: 90vw;
  max-width: var(--fixed-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-center h4 {
  margin-bottom: 0;
  color: var(--clr-primary-5);
}

.nav-links {
  display: flex;
}

nav a {
  text-transform: capitalize;
  font-weight: 700;
  font-size: 1rem;
  color: var(--clr-primary-1);
  letter-spacing: var(--spacing);
  margin-right: 1rem;
}

nav a:hover {
  color: var(--clr-primary-5);
}


/*
=============== 
Container
===============
*/

main {
  min-height: calc(100vh - 3rem);
  display: grid;
  place-items: center;
}

.container {
  text-align: center;
}

.container h2 {
  background: var(--clr-black);
  color: var(--clr-white);
  padding: 1rem;
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}

.color {
  color: var(--clr-primary-5);
}

.btn-hero {
  font-family: var(--ff-primary);
  text-transform: uppercase;
  background: transparent;
  color: var(--clr-black);
  letter-spacing: var(--spacing);
  display: inline-block;
  font-weight: 700;
  transition: var(--transition);
  border: 2px solid var(--clr-black);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: var(--radius);
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
}

.btn-hero:hover {
  color: var(--clr-white);
  background: var(--clr-black);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Color Flipper || Simple</title>

  <!-- styles -->
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <nav>
    <div class="nav-center">
      <h4>Color Flipper</h4>
      <ul class="nav-links">
        <li><a href="index.html">simple</a></li>
        <li><a href="hex.html">hex</a></li>
      </ul>
    </div>
  </nav>

  <main>
    <div class="container">
      <h2>background color: <span class="color">#000</span></h2>
      <button class="btn btn-hero" id="btn">click me</button>
    </div>
  </main>
  <!-- javascript -->
  <script src="app.js"></script>
</body>

</html>
0
GNour 10 जुलाई 2021, 18:04