javascript—为什么在我使用for of循环修改innertext时，span元素的innertext没有更改？

nkhmeac6  于 2021-09-23  发布在  Java
关注(0)|答案(3)|浏览(538)
  1. const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
  2. const colorIdentifier = document.querySelector('.color');
  3. const button = document.getElementById('btn');
  5. for (let color of colors) {
  6.   loopButton();
  7. }
  9. function loopButton() {
  10.   button.addEventListener('click', function() {
  11.     colorIdentifier.innerText = color;
  12.   })
  13. };
  1. /* * {
  2.   border: 5px solid purple;
  3. } */
  5. /*
  6. =============== 
  7. Fonts
  8. ===============
  10. * /
  12. @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  14. /*
  15. =============== 
  16. Variables
  17. ===============
  19. * /
  21. :root {
  22.   /* dark shades of primary color*/
  23.   --clr-primary-1: hsl(205, 86%, 17%);
  24.   --clr-primary-2: hsl(205, 77%, 27%);
  25.   --clr-primary-3: hsl(205, 72%, 37%);
  26.   --clr-primary-4: hsl(205, 63%, 48%);
  27.   /* primary/main color */
  28.   --clr-primary-5: hsl(205, 78%, 60%);
  29.   /* lighter shades of primary color */
  30.   --clr-primary-6: hsl(205, 89%, 70%);
  31.   --clr-primary-7: hsl(205, 90%, 76%);
  32.   --clr-primary-8: hsl(205, 86%, 81%);
  33.   --clr-primary-9: hsl(205, 90%, 88%);
  34.   --clr-primary-10: hsl(205, 100%, 96%);
  35.   /* darkest grey - used for headings */
  36.   --clr-grey-1: hsl(209, 61%, 16%);
  37.   --clr-grey-2: hsl(211, 39%, 23%);
  38.   --clr-grey-3: hsl(209, 34%, 30%);
  39.   --clr-grey-4: hsl(209, 28%, 39%);
  40.   /* grey used for paragraphs */
  41.   --clr-grey-5: hsl(210, 22%, 49%);
  42.   --clr-grey-6: hsl(209, 23%, 60%);
  43.   --clr-grey-7: hsl(211, 27%, 70%);
  44.   --clr-grey-8: hsl(210, 31%, 80%);
  45.   --clr-grey-9: hsl(212, 33%, 89%);
  46.   --clr-grey-10: hsl(210, 36%, 96%);
  47.   --clr-white: #fff;
  48.   --clr-red-dark: hsl(360, 67%, 44%);
  49.   --clr-red-light: hsl(360, 71%, 66%);
  50.   --clr-green-dark: hsl(125, 67%, 44%);
  51.   --clr-green-light: hsl(125, 71%, 66%);
  52.   --clr-black: #222;
  53.   --ff-primary: "Roboto", sans-serif;
  54.   --ff-secondary: "Open Sans", sans-serif;
  55.   --transition: all 0.3s linear;
  56.   --spacing: 0.1rem;
  57.   --radius: 0.25rem;
  58.   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  59.   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  60.   --max-width: 1170px;
  61.   --fixed-width: 620px;
  62. }
  64. /*
  65. =============== 
  66. Global Styles
  67. ===============
  69. * /
  71. * ,
  73. ::after,
  74. ::before {
  75.   margin: 0;
  76.   padding: 0;
  77.   box-sizing: border-box;
  78. }
  80. body {
  81.   font-family: var(--ff-secondary);
  82.   background: var(--clr-grey-10);
  83.   color: var(--clr-grey-1);
  84.   line-height: 1.5;
  85.   font-size: 0.875rem;
  86. }
  88. ul {
  89.   list-style-type: none;
  90. }
  92. a {
  93.   text-decoration: none;
  94. }
  96. h1,
  97. h2,
  98. h3,
  99. h4 {
  100.   letter-spacing: var(--spacing);
  101.   text-transform: capitalize;
  102.   line-height: 1.25;
  103.   margin-bottom: 0.75rem;
  104.   font-family: var(--ff-primary);
  105. }
  107. h1 {
  108.   font-size: 3rem;
  109. }
  111. h2 {
  112.   font-size: 2rem;
  113. }
  115. h3 {
  116.   font-size: 1.25rem;
  117. }
  119. h4 {
  120.   font-size: 0.875rem;
  121. }
  123. p {
  124.   margin-bottom: 1.25rem;
  125.   color: var(--clr-grey-5);
  126. }
  128. @media screen and (min-width: 800px) {
  129.   h1 {
  130.     font-size: 4rem;
  131.   }
  132.   h2 {
  133.     font-size: 2.5rem;
  134.   }
  135.   h3 {
  136.     font-size: 1.75rem;
  137.   }
  138.   h4 {
  139.     font-size: 1rem;
  140.   }
  141.   body {
  142.     font-size: 1rem;
  143.   }
  144.   h1,
  145.   h2,
  146.   h3,
  147.   h4 {
  148.     line-height: 1;
  149.   }
  150. }
  152. /*  global classes */
  154. /* section */
  156. .section {
  157.   padding: 5rem 0;
  158. }
  160. .section-center {
  161.   width: 90vw;
  162.   margin: 0 auto;
  163.   max-width: 1170px;
  164. }
  166. @media screen and (min-width: 992px) {
  167.   .section-center {
  168.     width: 95vw;
  169.   }
  170. }
  172. main {
  173.   min-height: 100vh;
  174.   display: grid;
  175.   place-items: center;
  176. }
  178. /*
  179. =============== 
  180. Nav
  181. ===============
  183. * /
  185. nav {
  186.   background: var(--clr-white);
  187.   height: 3rem;
  188.   display: grid;
  189.   align-items: center;
  190.   box-shadow: var(--dark-shadow);
  191. }
  193. .nav-center {
  194.   width: 90vw;
  195.   max-width: var(--fixed-width);
  196.   margin: 0 auto;
  197.   display: flex;
  198.   align-items: center;
  199.   justify-content: space-between;
  200. }
  202. .nav-center h4 {
  203.   margin-bottom: 0;
  204.   color: var(--clr-primary-5);
  205. }
  207. .nav-links {
  208.   display: flex;
  209. }
  211. nav a {
  212.   text-transform: capitalize;
  213.   font-weight: 700;
  214.   font-size: 1rem;
  215.   color: var(--clr-primary-1);
  216.   letter-spacing: var(--spacing);
  217.   margin-right: 1rem;
  218. }
  220. nav a:hover {
  221.   color: var(--clr-primary-5);
  222. }
  224. /*
  225. =============== 
  226. Container
  227. ===============
  229. * /
  231. main {
  232.   min-height: calc(100vh - 3rem);
  233.   display: grid;
  234.   place-items: center;
  235. }
  237. .container {
  238.   text-align: center;
  239. }
  241. .container h2 {
  242.   background: var(--clr-black);
  243.   color: var(--clr-white);
  244.   padding: 1rem;
  245.   border-radius: var(--radius);
  246.   margin-bottom: 2.5rem;
  247. }
  249. .color {
  250.   color: var(--clr-primary-5);
  251. }
  253. .btn-hero {
  254.   font-family: var(--ff-primary);
  255.   text-transform: uppercase;
  256.   background: transparent;
  257.   color: var(--clr-black);
  258.   letter-spacing: var(--spacing);
  259.   display: inline-block;
  260.   font-weight: 700;
  261.   transition: var(--transition);
  262.   border: 2px solid var(--clr-black);
  263.   cursor: pointer;
  264.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  265.   border-radius: var(--radius);
  266.   font-size: 1rem;
  267.   padding: 0.75rem 1.25rem;
  268. }
  270. .btn-hero:hover {
  271.   color: var(--clr-white);
  272.   background: var(--clr-black);
  273. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>Color Flipper || Simple</title>
  9.   <!-- styles -->
  10.   <link rel="stylesheet" href="styles.css" />
  11. </head>
  13. <body>
  14.   <nav>
  15.     <div class="nav-center">
  16.       <h4>Color Flipper</h4>
  17.       <ul class="nav-links">
  18.         <li><a href="index.html">simple</a></li>
  19.         <li><a href="hex.html">hex</a></li>
  20.       </ul>
  21.     </div>
  22.   </nav>
  24.   <main>
  25.     <div class="container">
  26.       <h2>background color: <span class="color">#000</span></h2>
  27.       <button class="btn btn-hero" id="btn">click me</button>
  28.     </div>
  29.   </main>
  30.   <!-- javascript -->
  31.   <script src="app.js"></script>
  32. </body>
  34. </html>

我想修改html的内部文本 span 元素。并且内部文本显示不同颜色的 colors 后按顺序排列 button 元素被单击。

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

我使用了循环的方法。

  1. for(let color of colors) {
  2.   loopButton();
  3. }
  5. function loopButton() { button.addEventListener('click', function() {
  6.   colorIdentifier.innerText = color;
  7. }
  8. )};

我想知道，为什么会说“虽然我使用了snippet，但我的帖子看起来大部分都是代码？”。我认为如果我在代码片段中发布大量代码，会很有用，因为人们可以看到完整的代码。

loopsJavaScriptHtmlcssDom

3条答案

按热度按时间
uhry853o

uhry853o1#

因为颜色是在另一个函数上定义的，所以您不能访问它，因为let和const是块链变量-它们可以是acces

  1. const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
  2. const colorIdentifier = document.querySelector('.color');
  3. const button = document.getElementById('btn');
  5. let i = 0;
  7. function previewColors() {
  8.   colorIdentifier.innerHTML = colors[i]; // Change innerHTML text
  9.   colorIdentifier.style.color = colors[i]; // Change innerHTML color
  10.   i++;
  11.   if( i < colors.length){
  12.   window.setTimeout(previewColors, 1000); // Access array after 1 sec if i < color.length - LOOPS over the array in recursive way- .
  13.   }
  14. }
  16. button.addEventListener('click', previewColors);
  1. /* * {
  2.   border: 5px solid purple;
  3. } */
  5. /*
  6. =============== 
  7. Fonts
  8. ===============
  10. * /
  12. @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  14. /*
  15. =============== 
  16. Variables
  17. ===============
  19. * /
  21. :root {
  22.   /* dark shades of primary color*/
  23.   --clr-primary-1: hsl(205, 86%, 17%);
  24.   --clr-primary-2: hsl(205, 77%, 27%);
  25.   --clr-primary-3: hsl(205, 72%, 37%);
  26.   --clr-primary-4: hsl(205, 63%, 48%);
  27.   /* primary/main color */
  28.   --clr-primary-5: hsl(205, 78%, 60%);
  29.   /* lighter shades of primary color */
  30.   --clr-primary-6: hsl(205, 89%, 70%);
  31.   --clr-primary-7: hsl(205, 90%, 76%);
  32.   --clr-primary-8: hsl(205, 86%, 81%);
  33.   --clr-primary-9: hsl(205, 90%, 88%);
  34.   --clr-primary-10: hsl(205, 100%, 96%);
  35.   /* darkest grey - used for headings */
  36.   --clr-grey-1: hsl(209, 61%, 16%);
  37.   --clr-grey-2: hsl(211, 39%, 23%);
  38.   --clr-grey-3: hsl(209, 34%, 30%);
  39.   --clr-grey-4: hsl(209, 28%, 39%);
  40.   /* grey used for paragraphs */
  41.   --clr-grey-5: hsl(210, 22%, 49%);
  42.   --clr-grey-6: hsl(209, 23%, 60%);
  43.   --clr-grey-7: hsl(211, 27%, 70%);
  44.   --clr-grey-8: hsl(210, 31%, 80%);
  45.   --clr-grey-9: hsl(212, 33%, 89%);
  46.   --clr-grey-10: hsl(210, 36%, 96%);
  47.   --clr-white: #fff;
  48.   --clr-red-dark: hsl(360, 67%, 44%);
  49.   --clr-red-light: hsl(360, 71%, 66%);
  50.   --clr-green-dark: hsl(125, 67%, 44%);
  51.   --clr-green-light: hsl(125, 71%, 66%);
  52.   --clr-black: #222;
  53.   --ff-primary: "Roboto", sans-serif;
  54.   --ff-secondary: "Open Sans", sans-serif;
  55.   --transition: all 0.3s linear;
  56.   --spacing: 0.1rem;
  57.   --radius: 0.25rem;
  58.   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  59.   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  60.   --max-width: 1170px;
  61.   --fixed-width: 620px;
  62. }
  64. /*
  65. =============== 
  66. Global Styles
  67. ===============
  69. * /
  71. * ,
  73. ::after,
  74. ::before {
  75.   margin: 0;
  76.   padding: 0;
  77.   box-sizing: border-box;
  78. }
  80. body {
  81.   font-family: var(--ff-secondary);
  82.   background: var(--clr-grey-10);
  83.   color: var(--clr-grey-1);
  84.   line-height: 1.5;
  85.   font-size: 0.875rem;
  86. }
  88. ul {
  89.   list-style-type: none;
  90. }
  92. a {
  93.   text-decoration: none;
  94. }
  96. h1,
  97. h2,
  98. h3,
  99. h4 {
  100.   letter-spacing: var(--spacing);
  101.   text-transform: capitalize;
  102.   line-height: 1.25;
  103.   margin-bottom: 0.75rem;
  104.   font-family: var(--ff-primary);
  105. }
  107. h1 {
  108.   font-size: 3rem;
  109. }
  111. h2 {
  112.   font-size: 2rem;
  113. }
  115. h3 {
  116.   font-size: 1.25rem;
  117. }
  119. h4 {
  120.   font-size: 0.875rem;
  121. }
  123. p {
  124.   margin-bottom: 1.25rem;
  125.   color: var(--clr-grey-5);
  126. }
  128. @media screen and (min-width: 800px) {
  129.   h1 {
  130.     font-size: 4rem;
  131.   }
  132.   h2 {
  133.     font-size: 2.5rem;
  134.   }
  135.   h3 {
  136.     font-size: 1.75rem;
  137.   }
  138.   h4 {
  139.     font-size: 1rem;
  140.   }
  141.   body {
  142.     font-size: 1rem;
  143.   }
  144.   h1,
  145.   h2,
  146.   h3,
  147.   h4 {
  148.     line-height: 1;
  149.   }
  150. }
  152. /*  global classes */
  154. /* section */
  156. .section {
  157.   padding: 5rem 0;
  158. }
  160. .section-center {
  161.   width: 90vw;
  162.   margin: 0 auto;
  163.   max-width: 1170px;
  164. }
  166. @media screen and (min-width: 992px) {
  167.   .section-center {
  168.     width: 95vw;
  169.   }
  170. }
  172. main {
  173.   min-height: 100vh;
  174.   display: grid;
  175.   place-items: center;
  176. }
  178. /*
  179. =============== 
  180. Nav
  181. ===============
  183. * /
  185. nav {
  186.   background: var(--clr-white);
  187.   height: 3rem;
  188.   display: grid;
  189.   align-items: center;
  190.   box-shadow: var(--dark-shadow);
  191. }
  193. .nav-center {
  194.   width: 90vw;
  195.   max-width: var(--fixed-width);
  196.   margin: 0 auto;
  197.   display: flex;
  198.   align-items: center;
  199.   justify-content: space-between;
  200. }
  202. .nav-center h4 {
  203.   margin-bottom: 0;
  204.   color: var(--clr-primary-5);
  205. }
  207. .nav-links {
  208.   display: flex;
  209. }
  211. nav a {
  212.   text-transform: capitalize;
  213.   font-weight: 700;
  214.   font-size: 1rem;
  215.   color: var(--clr-primary-1);
  216.   letter-spacing: var(--spacing);
  217.   margin-right: 1rem;
  218. }
  220. nav a:hover {
  221.   color: var(--clr-primary-5);
  222. }
  224. /*
  225. =============== 
  226. Container
  227. ===============
  229. * /
  231. main {
  232.   min-height: calc(100vh - 3rem);
  233.   display: grid;
  234.   place-items: center;
  235. }
  237. .container {
  238.   text-align: center;
  239. }
  241. .container h2 {
  242.   background: var(--clr-black);
  243.   color: var(--clr-white);
  244.   padding: 1rem;
  245.   border-radius: var(--radius);
  246.   margin-bottom: 2.5rem;
  247. }
  249. .color {
  250.   color: var(--clr-primary-5);
  251. }
  253. .btn-hero {
  254.   font-family: var(--ff-primary);
  255.   text-transform: uppercase;
  256.   background: transparent;
  257.   color: var(--clr-black);
  258.   letter-spacing: var(--spacing);
  259.   display: inline-block;
  260.   font-weight: 700;
  261.   transition: var(--transition);
  262.   border: 2px solid var(--clr-black);
  263.   cursor: pointer;
  264.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  265.   border-radius: var(--radius);
  266.   font-size: 1rem;
  267.   padding: 0.75rem 1.25rem;
  268. }
  270. .btn-hero:hover {
  271.   color: var(--clr-white);
  272.   background: var(--clr-black);
  273. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>Color Flipper || Simple</title>
  9.   <!-- styles -->
  10.   <link rel="stylesheet" href="styles.css" />
  11. </head>
  13. <body>
  14.   <nav>
  15.     <div class="nav-center">
  16.       <h4>Color Flipper</h4>
  17.       <ul class="nav-links">
  18.         <li><a href="index.html">simple</a></li>
  19.         <li><a href="hex.html">hex</a></li>
  20.       </ul>
  21.     </div>
  22.   </nav>
  24.   <main>
  25.     <div class="container">
  26.       <h2>background color: <span class="color">#000</span></h2>
  27.       <button class="btn btn-hero" id="btn">click me</button>
  28.     </div>
  29.   </main>
  30.   <!-- javascript -->
  31.   <script src="app.js"></script>
  32. </body>
  34. </html>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-23
jv4diomz

jv4diomz2#

首先，你得到 Uncaught reference 错误，因为事件侦听器函数是在您添加它的函数上下文之外执行的，因此它没有访问变量的权限。一个简单的解决方法是将其传递：

  1. for (const color of colors) {
  2.     loopButton(color);
  3. }

至于颜色的实际循环，您将向同一个颜色添加多个回调 click 事件和元素，所以您实际上是在覆盖它们。有几种方法可以实现您想要的，但我建议在代码中保留一个计数器，并在每次按下按钮时递增它。这就使得 color 每次调用回调时，变量都有不同的值。比如：

  1. let counter = 0;
  2. function callBack() {
  3.     const idx = counter % (colors.length);
  4.     colorIdentifier.innerText = colors[idx];
  5.     colorIdentifier.style.color = colors[idx];
  6.     counter++;
  7. }
  8. button.addEventListener('click', callBack);

您将在下面找到现在的功能片段。希望我已经把事情说清楚了。：）

  1. const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
  2. const colorIdentifier = document.querySelector('.color');
  3. const button = document.getElementById('btn');
  5. let counter = 0;
  6. function callBack() {
  7.     const idx = counter % (colors.length);
  8.     colorIdentifier.innerText = colors[idx];
  9.     colorIdentifier.style.color = colors[idx];
  10.     counter++;
  11. }
  12. button.addEventListener('click', callBack);
  1. /* * {
  2.   border: 5px solid purple;
  3. } */
  5. /*
  6. =============== 
  7. Fonts
  8. ===============
  10. * /
  12. @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  14. /*
  15. =============== 
  16. Variables
  17. ===============
  19. * /
  21. :root {
  22.   /* dark shades of primary color*/
  23.   --clr-primary-1: hsl(205, 86%, 17%);
  24.   --clr-primary-2: hsl(205, 77%, 27%);
  25.   --clr-primary-3: hsl(205, 72%, 37%);
  26.   --clr-primary-4: hsl(205, 63%, 48%);
  27.   /* primary/main color */
  28.   --clr-primary-5: hsl(205, 78%, 60%);
  29.   /* lighter shades of primary color */
  30.   --clr-primary-6: hsl(205, 89%, 70%);
  31.   --clr-primary-7: hsl(205, 90%, 76%);
  32.   --clr-primary-8: hsl(205, 86%, 81%);
  33.   --clr-primary-9: hsl(205, 90%, 88%);
  34.   --clr-primary-10: hsl(205, 100%, 96%);
  35.   /* darkest grey - used for headings */
  36.   --clr-grey-1: hsl(209, 61%, 16%);
  37.   --clr-grey-2: hsl(211, 39%, 23%);
  38.   --clr-grey-3: hsl(209, 34%, 30%);
  39.   --clr-grey-4: hsl(209, 28%, 39%);
  40.   /* grey used for paragraphs */
  41.   --clr-grey-5: hsl(210, 22%, 49%);
  42.   --clr-grey-6: hsl(209, 23%, 60%);
  43.   --clr-grey-7: hsl(211, 27%, 70%);
  44.   --clr-grey-8: hsl(210, 31%, 80%);
  45.   --clr-grey-9: hsl(212, 33%, 89%);
  46.   --clr-grey-10: hsl(210, 36%, 96%);
  47.   --clr-white: #fff;
  48.   --clr-red-dark: hsl(360, 67%, 44%);
  49.   --clr-red-light: hsl(360, 71%, 66%);
  50.   --clr-green-dark: hsl(125, 67%, 44%);
  51.   --clr-green-light: hsl(125, 71%, 66%);
  52.   --clr-black: #222;
  53.   --ff-primary: "Roboto", sans-serif;
  54.   --ff-secondary: "Open Sans", sans-serif;
  55.   --transition: all 0.3s linear;
  56.   --spacing: 0.1rem;
  57.   --radius: 0.25rem;
  58.   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  59.   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  60.   --max-width: 1170px;
  61.   --fixed-width: 620px;
  62. }
  64. /*
  65. =============== 
  66. Global Styles
  67. ===============
  69. * /
  71. * ,
  73. ::after,
  74. ::before {
  75.   margin: 0;
  76.   padding: 0;
  77.   box-sizing: border-box;
  78. }
  80. body {
  81.   font-family: var(--ff-secondary);
  82.   background: var(--clr-grey-10);
  83.   color: var(--clr-grey-1);
  84.   line-height: 1.5;
  85.   font-size: 0.875rem;
  86. }
  88. ul {
  89.   list-style-type: none;
  90. }
  92. a {
  93.   text-decoration: none;
  94. }
  96. h1,
  97. h2,
  98. h3,
  99. h4 {
  100.   letter-spacing: var(--spacing);
  101.   text-transform: capitalize;
  102.   line-height: 1.25;
  103.   margin-bottom: 0.75rem;
  104.   font-family: var(--ff-primary);
  105. }
  107. h1 {
  108.   font-size: 3rem;
  109. }
  111. h2 {
  112.   font-size: 2rem;
  113. }
  115. h3 {
  116.   font-size: 1.25rem;
  117. }
  119. h4 {
  120.   font-size: 0.875rem;
  121. }
  123. p {
  124.   margin-bottom: 1.25rem;
  125.   color: var(--clr-grey-5);
  126. }
  128. @media screen and (min-width: 800px) {
  129.   h1 {
  130.     font-size: 4rem;
  131.   }
  132.   h2 {
  133.     font-size: 2.5rem;
  134.   }
  135.   h3 {
  136.     font-size: 1.75rem;
  137.   }
  138.   h4 {
  139.     font-size: 1rem;
  140.   }
  141.   body {
  142.     font-size: 1rem;
  143.   }
  144.   h1,
  145.   h2,
  146.   h3,
  147.   h4 {
  148.     line-height: 1;
  149.   }
  150. }
  152. /*  global classes */
  154. /* section */
  156. .section {
  157.   padding: 5rem 0;
  158. }
  160. .section-center {
  161.   width: 90vw;
  162.   margin: 0 auto;
  163.   max-width: 1170px;
  164. }
  166. @media screen and (min-width: 992px) {
  167.   .section-center {
  168.     width: 95vw;
  169.   }
  170. }
  172. main {
  173.   min-height: 100vh;
  174.   display: grid;
  175.   place-items: center;
  176. }
  178. /*
  179. =============== 
  180. Nav
  181. ===============
  183. * /
  185. nav {
  186.   background: var(--clr-white);
  187.   height: 3rem;
  188.   display: grid;
  189.   align-items: center;
  190.   box-shadow: var(--dark-shadow);
  191. }
  193. .nav-center {
  194.   width: 90vw;
  195.   max-width: var(--fixed-width);
  196.   margin: 0 auto;
  197.   display: flex;
  198.   align-items: center;
  199.   justify-content: space-between;
  200. }
  202. .nav-center h4 {
  203.   margin-bottom: 0;
  204.   color: var(--clr-primary-5);
  205. }
  207. .nav-links {
  208.   display: flex;
  209. }
  211. nav a {
  212.   text-transform: capitalize;
  213.   font-weight: 700;
  214.   font-size: 1rem;
  215.   color: var(--clr-primary-1);
  216.   letter-spacing: var(--spacing);
  217.   margin-right: 1rem;
  218. }
  220. nav a:hover {
  221.   color: var(--clr-primary-5);
  222. }
  224. /*
  225. =============== 
  226. Container
  227. ===============
  229. * /
  231. main {
  232.   min-height: calc(100vh - 3rem);
  233.   display: grid;
  234.   place-items: center;
  235. }
  237. .container {
  238.   text-align: center;
  239. }
  241. .container h2 {
  242.   background: var(--clr-black);
  243.   color: var(--clr-white);
  244.   padding: 1rem;
  245.   border-radius: var(--radius);
  246.   margin-bottom: 2.5rem;
  247. }
  249. .color {
  250.   color: var(--clr-primary-5);
  251. }
  253. .btn-hero {
  254.   font-family: var(--ff-primary);
  255.   text-transform: uppercase;
  256.   background: transparent;
  257.   color: var(--clr-black);
  258.   letter-spacing: var(--spacing);
  259.   display: inline-block;
  260.   font-weight: 700;
  261.   transition: var(--transition);
  262.   border: 2px solid var(--clr-black);
  263.   cursor: pointer;
  264.   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  265.   border-radius: var(--radius);
  266.   font-size: 1rem;
  267.   padding: 0.75rem 1.25rem;
  268. }
  270. .btn-hero:hover {
  271.   color: var(--clr-white);
  272.   background: var(--clr-black);
  273. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.   <title>Color Flipper || Simple</title>
  9.   <!-- styles -->
  10.   <link rel="stylesheet" href="styles.css" />
  11. </head>
  13. <body>
  14.   <nav>
  15.     <div class="nav-center">
  16.       <h4>Color Flipper</h4>
  17.       <ul class="nav-links">
  18.         <li><a href="index.html">simple</a></li>
  19.         <li><a href="hex.html">hex</a></li>
  20.       </ul>
  21.     </div>
  22.   </nav>
  24.   <main>
  25.     <div class="container">
  26.       <h2>background color: <span class="color">#000</span></h2>
  27.       <button class="btn btn-hero" id="btn">click me</button>
  28.     </div>
  29.   </main>
  30.   <!-- javascript -->
  31.   <script src="app.js"></script>
  32. </body>
  34. </html>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-23
gcxthw6b

gcxthw6b3#

好的，你要做的是点击按钮来显示数组中的下一种颜色吗？如果是这样，那么这就是javascript

  1. const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]
  2. const colorIdentifier = document.querySelector(".color")
  3. const button = document.getElementById("btn")
  5. // global index for so we can iterate array 1 by 1
  6. let index = 0
  8. // button on click event listener
  9. button.addEventListener("click", () => {
  10.     // set the text of colorIdentifier to colors and use the index of how many times we clicked the button
  11.     colorIdentifier.textContent = colors[index]
  13.     // iterate the button for on each click this is shorthand for index = index + 1
  14.     index++
  16.     // check to see if the index is bigger then the length and resets it back to 0
  17.     if (index >= colors.length) index = 0
  18. })
展开查看全部
赞(0）分享  回复(0）举报  2021-09-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com