jquery - 在按钮 jQuery 上依次在 3 个或更多类之间切换

Question

我尝试在 Stack Overflow 上找到解决方案，但我似乎找不到能够使我的项目的某一方面发挥作用的解决方案。我发现的大多数问题要么要求在两个类之间切换，要么要求在三个类之间切换但单击 div 元素本身，这不适用于我的情况。

现在，我有一个名为 .smallbutton 的按钮(位于白色阳光照耀的插图下方)，可以在默认背景颜色和称为 的辅助 div 背景颜色/文本颜色之间切换LightOrange 和 LightOrange-text 用于深米色矩形内的背景和文本。

我希望背景颜色和文本颜色可以在默认颜色、浅橙色和中橙色之间切换(在 div 元素 MediumOrange 和 MediumOrange- 下)文本)，并永远重复。

代码片段未正确加载我的代码，因此我发布了我的 jsfiddle在这里。

编辑:

对于任何想知道的人，我还查看了这个question在这里看看我是否可以从中得到任何东西，但我无法将代码重写回我的项目中。

Answer 1

首先，根据定义，“切换”是在两种状态之间...而不是三种状态。
所以你想要的是在点击时循环一个颜色数组。

非常好的项目，顺便说一句...;)

每次点击时，您都需要将颜色数组索引加一，直到数组末尾，然后返回零(无限循环)。

呃..什么？好的..

让我们先有一个颜色数组:

var colorClasses = ["LightOrange","MediumOrange","Cyan"]; // I added one here.

现在是一个计数器:

var colorCount = 0;

下面的内容应该改进...但是由于您使用了像colorName-text这样的变体类作为文本，我没有在这个问题上走得太远并很快修复了它。

所以这是一个奇怪的部分，可以快速修复我的 shmarabung 想法:

var allColorClasses = colorClasses.join(" ");
var allColorClasses_text = colorClasses.join("-text ")+"-text";

这是因为我们需要 .removeClass() 的背景和文本的“所有类”字符串。

再次...通过使用更好的颜色类命名系统可以避免这种走动。 ;)

现在看看完整的添加内容:

var colorClasses = ["LightOrange","MediumOrange","Cyan"];
var colorCount = 0;
var allColorClasses = colorClasses.join(" ");
var allColorClasses_text = colorClasses.join("-text ")+"-text";

console.log(allColorClasses);
console.log(allColorClasses_text);

$(".smallbutton").click(function () {
  colorCount++;
  if(colorCount>colorClasses.length-1){colorCount=0}

  $(".Orange").removeClass(allColorClasses).addClass(colorClasses[colorCount]);
  $(".Metronome-box").removeClass(allColorClasses_text).addClass(colorClasses[colorCount]+'-text');
  $(".tuner-text").removeClass(allColorClasses_text).addClass(colorClasses[colorCount]+'-text');
});

添加的 CSS(非常简单):

.Cyan{
  background-color: cyan;
}
.Cyan-text{
  color: dodgerblue;
}

我的调整片段

$(document).ready(function() {
  
  //toggle between default color screen and light orange screen 
  //also toggle the color inside 'metronome' and 'tuner' text
  //inside default color rectangle screen
  
  var colorClasses = ["LightOrange","MediumOrange","Cyan"];
  var colorCount = 0;
  var allColorClasses = colorClasses.join(" ");
  var allColorClasses_text = colorClasses.join("-text ")+"-text";
  
  //console.log(allColorClasses);
  //console.log(allColorClasses_text);
  
  $(".smallbutton").click(function () {
    colorCount++;
    if(colorCount>colorClasses.length-1){colorCount=0}
    
    $(".Orange").removeClass(allColorClasses).addClass(colorClasses[colorCount]);
    $(".Metronome-box").removeClass(allColorClasses_text).addClass(colorClasses[colorCount]+'-text');
    $(".tuner-text").removeClass(allColorClasses_text).addClass(colorClasses[colorCount]+'-text');
  });

  
  //toggle tuner side on and off by pressing "Tumer On"
  //grey rectangle button
  $(".GreyRectangle1").click(function() {
    $(".ReceivedTunerNote").toggleClass('ReceivedTunerNote1');
    $(".tuner-text").toggleClass('ReceivedTunerNote1');
    $(".hertz-value").toggleClass('ReceivedTunerNote1');
    $(".hertz-symbol").toggleClass('ReceivedTunerNote1');
  });
  
  //toggle metronome side on and off by pressing "Metronome On" 
  //grey rectangle button
  $(".GreyRectangle2").click(function() {
    $(".Metronome-box").toggleClass('Metronome1');
    /*make sure to toggle to the same class, in this case 
     'Metronome1'*/
    $(".tempo-text").toggleClass('Metronome1');
    $(".metronome_beats").toggleClass('Metronome1');
    $(".beat-text").toggleClass('Metronome1');
    $(".beat-note-value").toggleClass('Metronome1');
  });
});

/*
from this pen: https://codepen.io/mtbroomell/pen/yNwwdv

function increaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number').value = value;
}

function decreaseValue() {
  var value = parseInt(document.getElementById('number').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number').value = value;
}
*/

h1 {
  font-size: 2em;
  font-family: arial;
  text-align: center;
}

p {
  font-family: arial;
}

div {
  font-family: arial;
  color: white;
  font-size: 50%;
}

body {
  text-align: center;
  background-color: #F7EBC4;
}

.BlackRectangle {
  display: grid;
  
  /*grid-template-columns creates 5 columns*/
  grid-template-columns: 100px 94px auto 94px 100px;
  
  /*grid-template-rows create 5 rows*/
  grid-template-rows: 20% 20% 20% 20% 20%;
  height: 290px;
  width: 460px;
  background-color: #212121;
  /*box shadow below i wanna fix*/
  /*box-shadow: 0px 4px 15px -2px #000000;*/
  border-radius: 25px;
  margin: auto;
  z-index: -1;
}

.greencircle {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
  background-color: green;
  height: 12px;
  width: 12px;
  border-radius: 20px;
  margin-top: 5px;
  margin-left: 28px;
}

.redcircle {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
  height: 12px;
  width: 12px;
  border-radius: 20px;
  margin-top: 5px;
  margin-left: 90px;
}

.flat {
  content: "\266D";
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  font-size: 175%;
  color: white;
  margin-right: -4px;
}

.redcircle1 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
  height: 12px;
  width: 12px;
  border-radius: 20px;
  margin-top: 5px;
  margin-left: 155px;
}

.sharp {
  content: "\266F";
  font-size: 175%;
  color: white;
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
  margin-left: -8px;
  margin-top: 2px;
}

.Orange {
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column-start: 2;
  grid-column-end: span 3;
  display: grid;
  grid-template-columns: 50px auto 50px;
  grid-template-rows: 30px auto 30px;
  font-size: 1.5em;
  background-color: #D7C39C;
  border-radius: 5px;
  height: 100px;
  width: 253px;
  margin-top: 30px;
  margin-left: 2px;
  z-index: 1;
}

.DefaultDarkBeige {
  background-color: #D7C39C;
}

.LightOrange {
  background-color: #FFB266; 
}

.MediumOrange {
  background-color: orange;
}

.tuner-text {
  grid-column: 1/1;
  grid-row: 1/1;
  color: #D7C39C;
  font-size: 70%;
  background-color: black;
  transform: scaleX(1.2);
  height: 10px;
  width: 60px;
  border-radius: 3px;
  margin-top: 1px;
  margin-left: 8px;
}

.hertz-value {
  grid-column: 1/2;
  grid-row: 1/2;
  font-size: 125%;
  font-style: italic;
  color: black;
  margin-left: -19px;
  margin-top: 11px;
}

.hertz-symbol {
  grid-column: 1/1;
  grid-row: 1/1;
  font-size: 70%;
  transform: scaleX(1.2);
  color: black;
  margin-top: 18px;
  margin-left: 22px;
}

.ReceivedTunerNote {
  position: absolute;
  grid-column: 1/3;
  grid-row: 1/2;
  font-size: 125%;
  color: black;
  z-index: 4;
  margin-left: 121px;
}

.ReceivedTunerNote1 {
  visibility:hidden;
}

.input-edit-prevent-box {
  position: absolute;
  grid-column: 3/4;
  grid-row: 1/span 4;
  background-color: transparent;
  width: 85px;
  height: 100px;
  margin-left: 175px;
  z-index: 4;
}

.Metronome-box {
  position: absolute;
  grid-column: 3/ span 4;
  grid-row: 1/ span 2;
  font-size: 70%;
  color: #D7C39C;
  background-color: black;
  transform: scaleX(1.2);
  height: 10px;
  width: 60px;
  border-radius: 3px;
  z-index: 2;
  margin-left: 185px;
  margin-top: 1px;
}

/*when toggling, the visibility hidden function will
hide the div element 'A' completely that is independent
of 'METRONOME' rather than 'display:none'*/
.Metronome1 {
  visibility: hidden;
}

.DefaultOrange-text {
  color: #D7C39C;
}

.LightOrange-text {
  color: #FFB266;
}

.MediumOrange-text {
  color: orange;
}

.tempo-text {
  position: absolute;
  grid-column: 2/ span 4;
  grid-row: 1/1;
  font-size: 65%;
  color: black;
  transform: scaleX(1.2);
  margin-top: 13px;
  margin-left: 188px;
}

/*resizes the amount of showing the value*/
input[type=number] {
  width: 40px;
}

/*note: I haven't gotten to part where I can adjust
metronome beat, so left it as default 108 per beat*/
.metronome_beats {
  position: absolute;
  grid-column: 2/ span 4;
  grid-row: 1/1;
  font-size: 125%;
  color: black;
  
  /*transparent background-color and no borders is because of default setting of input*/
  background-color: transparent;
  border: none; 
  transform: scaleX(1.2);
  font-style: italic;
  text-align: right; 
  width: 35px;
  margin-left: 98px;
  margin-top: 10px;
}

.beat-note-value {
  position: absolute; 
  grid-column: 1/4;
  grid-row: 2/3;
  font-size: 125%;
  transform: scaleX(1.2);
  color: black;
  background-color: transparent;
  border: none; 
  width: 20px;
  font-style: italic;
  text-align: right;
  margin-left: 101px;
  margin-top: 45px;
}

.beat-text {
  position: absolute;
  grid-column: 3/4;
  grid-row: 1/ span 3;
  font-size: 65%;
  color: black;
  transform: scaleX(1.2);
  margin-left: 216px;
  margin-top: 48px;
  z-index: 4;
}

.top-trapezoid {
  grid-column: 1/ span 5;
  grid-row: 1 / 2;
  height: 5px;
  width: 253px;
  
  /*151515 is a very dark grey, borderline black*/
  border-top: 8px solid #151515;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  margin-top: 22px; 
  margin-left: 94px;
}

.right-trapezoid {
  grid-column: 5 / span 6;
  grid-row: 1 / span 3;
  height: 103px;
  width: 0px;
  border-right: 8px solid #3C3C3C;
  border-top: 7px solid transparent;
  border-bottom: 10px solid transparent; 
  margin-top: 22px;
  z-index: 2;
}

.bottom-trapezoid {
  grid-column: 1 / span 5;
  grid-row: 3 / span 4;
  height: 5px;
  width: 255px;
  border-bottom: 12px solid #2e2e2e;
  border-right: 6.5px solid transparent;
  border-left: 6.5px solid transparent;
  margin-top: 9px;
  margin-left: 95px;
  z-index: 2;
}

.left-trapezoid {
  grid-column: 1 / span 3;
  grid-row: 1 / span 4;
  height: 100px;
  border-left: 8px solid #1B1B1B;
  border-top: 8px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 95px;
  margin-top: 23px;
}

.tuner-on {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 0;
  grid-row-start: 1;
  color: white;
  transform: scaleX(1.3);
}

.GreyRectangle1 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  height: 15px;
  width: 53px;
  background-color: gray;
  border-radius: 20px;
  margin: auto;
  z-index: 3;
}

.InnerGreyDot {
  height: 4px;
  width: 4px;
  background-color: #9C9C9C;
  border-radius: 50%;
  z-index: 3;
  margin-left: 17px;
  margin-bottom: 2px;
}

.small-left-white-line {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 3;
  margin: auto;
  width: 3px;
  height: 10px;
  border-top: 1px solid white;
  margin-top: -28px;
  margin-left: 22px;
}

.first-left-white-line {
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
  width: 10px;
  height: 15px;
  border-left: 1px solid white;
  margin-left: 21px;
  margin-top: 31px;
}

.upside-down-half-circle {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: span 3;
  height: 9px;
  width: 20px;
  border-radius: 0 0 90px 90px;
  background: #828181;
  z-index: 1;
  margin-left: 40px;
  margin-top: 37px;
}

.second-left-white-line {
  grid-column: 1 / 2;
  grid-row: 2 / span 3;
  height: 98px;
  width: 21px;
  border-right: 1px solid white;
}

.third-left-white-line {
  grid-column: 1/2;
  grid-row: 4/5;
  height: 1px;
  width: 8px;
  border-top: 1px solid white;
  margin-left: 22px;
  margin-top: -19px;
}

.calibrate {
  grid-column: 1 / 2;
  grid-row: 2 / span 3;
  
  /*transform scale X will stretch the word horizontally based on the x-axis*/
  transform: scaleX(1.3);
  color: white;
  margin-right: 33px;
  margin-top: -10px;
}

.note {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
  transform: scaleX(1.3);
  color: white;
  margin-left: -55px;
  margin-top: 48px;
}

.first-right-white-line {
  grid-column: 1/span 2;
  grid-row: 1/span 3;
  height: 67px;
  width: 0px;
  border-right: 1px solid white;
  margin-left: 80px;
  margin-top: 57px;
}

.up-triangle {
  grid-column: 1/span 2;
  grid-row: 1 / span 2;
  transform: scale(0.05,0.05);
  margin-left: -145px;
  margin-top: -120px;
}

.in-between-triangle-line {
  grid-column: 1 / span 2;
  grid-row: 2 / span 3; 
  height: 8px;
  width: 1px; 
  border-left: 1px solid gray;
  margin-left: 50px;
  margin-top: 29px;
}

.down-triangle {
  grid-column: 1/span 2;
  grid-row: 1/ span 3;
  transform: scale(0.05,0.05);
  margin-left: -145px;
  margin-top: -88px;
}

.second-right-white-line {
  grid-column: 1/2;
  grid-row: 3/4;
  height: 1px;
  width: 10px;
  border-bottom: 1px solid white; 
  margin-left: 71px;
  margin-top: 7px;
}

.sound {
  grid-column: 1/2;
  grid-row: 2/4;
  transform: scaleX(1.2);
  color: white;
  margin-top: 62px;
}

.small-black-rectangle {
  grid-column: 1/2;
  grid-row: 3/4;
  height: 12px;
  width: 35px;
  border-radius: 10px;
  background-color: black;
  margin-left: 33px;
  margin-top: 15px;
  z-index: 2;
}

.sound-back {
  grid-column: 1/ 2;
  grid-row: 3/ span 5;
  color: white;
  transform: scaleX(1.2);
  margin-top: 30px;
}

.small-black-rectangle1 {
  grid-column: 1/2;
  grid-row: 3/4;
  height: 12px;
  width: 35px;
  border-radius: 10px;
  background-color: black;
  margin-left: 33px;
  margin-top: 50px;
  z-index: 2;
}

.illuminating-star {
  grid-column: 1/3;
  grid-row: 2/4;
  transform: scale(0.04,0.04);
  margin-left: -85px;
  margin-top: -97px;
}

.smallbutton {
  grid-column: 2/2;
  grid-row: 4/5;
  height: 15px;
  width: 10px;
  border-radius: 20px;
  background-color: black;
  margin-left: 2px;
  margin-top: -7px;
  z-index: 2;
}


.voltext {
  grid-column: 4/5;
  grid-row: 1/2;
  transform: scaleX(1.2);
  color: white;
  margin-left: 33px;
}

.right-side-triangle {
  grid-column: 4 / 5;
  grid-row: 1 / span 2;
  width: 0; 
  height: 0; 
  border-top: 7px solid transparent;
  border-bottom: 1px solid transparent; 
  border-right: 20px solid white;
  margin-left: 75px;
  margin-top: 8px;
}

.metronome-on {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: span 2;
  transform: scaleX(1.2);
  color: white;
  margin-right: 6px;
}

.GreyRectangle2 {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 1;
  height: 15px;
  width: 55px;
  background-color: gray;
  border-radius: 20px;
  margin-left: 27px;
  margin-top: 22px;
  z-index: 2;
}

.InnerGreyDot1 {
  height: 4px;
  width: 4px;
  background-color: #9C9C9C;
  border-radius: 50%;
  z-index: 3;
  margin-left: 12px;
}

.upside-down-half-circle1 {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: span 3;
  height: 9px;
  width: 20px;
  border-radius: 0 0 90px 90px;
  background: #828181;
  z-index: 1;
  margin-top: 38px;
  margin-left: 44px;
}

.beat-white-text{
  position: absolute;
  grid-column: 4/ span 6;
  grid-row: 1/span 3;
  transform: scaleX(1.2);
  color: white;
  margin-left: 380px;
  margin-top: 50px;
}

.up-beat-triangle {
  grid-column: 1/span 2;
  grid-row: 1 / span 2;
  transform: scale(0.05,0.05);
  cursor: pointer;
  margin-left: 195px;
  margin-top: -120px;
  z-index: 2;
}

.in-between-triangle-beat-line {
  grid-column: 2 / span 4;
  grid-row: 2 / span 3; 
  height: 8px;
  width: 1px; 
  border-left: 1px solid gray;
  margin-left: 290px;
  margin-top: 29px;
}

.down-beat-triangle {
  grid-column: 1/span 2;
  grid-row: 1/ span 3;
  transform: scale(0.05,0.05);
  cursor: pointer;
  margin-left: 195px;
  margin-top: -88px;
}

.tempo-white-text {
  position: absolute;
  grid-column: 4/ span 6;
  grid-row: 1/ span 2;
  transform: scaleX(1.2);
  color: white;
  margin-left: 412px;
  margin-top: 50px;
}

#up-tempo-triangle {
  position: absolute; 
  grid-column: 1/span 2;
  grid-row: 1 / span 2;
  transform: scale(0.05,0.05);
  margin-top: -150px;
  z-index: 2;
}

.in-between-triangle-tempo-line {
  grid-column: 2 / span 4;
  grid-row: 2 / span 3; 
  height: 8px;
  width: 1px; 
  border-left: 1px solid gray;
  margin-left: 324px;
  margin-top: 29px;
}

#down-tempo-triangle {
  position: absolute;
  grid-column: 1/span 2;
  grid-row: 1/ span 2;
  transform: scale(0.05,0.05);
  margin-top: -118px;
}

.tap-tempo-text {
  grid-column: 5/ span 6;
  grid-row: 3/4;
  font-size: 100%;
  color: white;
  transform: scaleX(1.2);
  margin-top: 2px;
  margin-right: -5px;
}

.tap-tempo-button {
  position: absolute;
  grid-column: 4/5;
  grid-row: 3/ span 4;
  background-color: gray;
  height: 40px;
  width: 40px;
  border-radius: 50px;
  border: 1px solid black;
  box-shadow: 
    inset 8px 8px 10px -6px rgba(0,0,0,0.35);
  margin-left: 388px;
  margin-top: 130px;
}

.tap-tempo-button:active {
  /*in order for radial-gradient to have gradient, the outer more circles must have higher percentages than the inner circle, otherwise it will become solid colors*/
  background: radial-gradient(closest-side, #EC7FA2 10%, #EBA5BB 85%, #FFD1E0 100%);
  border: 1px solid #FFEAEA;
  box-shadow: 0 0 5px 5px #FF4040;
}

.rights {
  font-weight: bold;
}

/* ADDED FOR FUN */
.Cyan{
  background-color: cyan;
}
.Cyan-text{
  color: dodgerblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<title>Tuner and Metronome Combined</title>
<h1><strong>My Tuner and Metronome (based on Korg Tuner TM50 and Metronome Design)</strong></h1>
<body>
  <div class="BlackRectangle">
      <div class="greencircle"></div>
      <div class="redcircle"></div>
      <span class="flat">&#9837;</span>
      <div class="redcircle1"></div>
      <span class="sharp">&#9839;</span>
    <div class="Orange">
      <div class="tuner-text">TUNER</div>
      <div class="hertz-value">440</div>
      <div class="hertz-symbol">HZ</div>
      <div class="ReceivedTunerNote">A</div>
      <!--the input-edit-prevent-box is used to hide input textbox. This is soley for the purpose of imitating the real-life metronome where you cannot physically edit it on-screen-->
      <div class="input-edit-prevent-box"></div>
      <div class="Metronome-box">METRONOME</div>
      <div class="tempo-text">TEMPO</div>
      <div class="beat-text">BEAT</div>
      
      <!--increment/decrement tempo and beat value-->
     <form>
        <!--input name is used to put name inside form submission-->
       <input type="number" value="108" oninput="oninput()" class="metronome_beats"></input>
       <input type="text" value="4" class="beat-note-value"></input>
       
       <!--code below is supposed to work with function previous(current) and (next) but not working atm, -->
       <!--later delete this code below-->
       <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" alt="originally giant up triangle" onclick="increaseValue()" value="Increase Value" id="up-tempo-triangle">
  <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="originally giant down triangle" onclick="decreaseValue(): return false" value="Decrease Value" id="down-tempo-triangle">
    </form>
  
    </div>
    <div class="top-trapezoid"></div>
    <div class="right-trapezoid"></div>
    <div class="bottom-trapezoid"></div>
    <div class="left-trapezoid"></div>
    <p class="tuner-on">TUNER ON</p>
    <button class="GreyRectangle1">
      <div class="InnerGreyDot" style="margin-top: 2px;"></div>
    </button>
    <div class="small-left-white-line"></div>
    <div class="first-left-white-line"></div>
    <div class="upside-down-half-circle"></div>
    <p class="calibrate">CALIB</p>
    <div class="second-left-white-line"></div>
    <div class="third-left-white-line"></div>
    <p class="note">NOTE</p>
    <div class="first-right-white-line"></div>
    <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" class="up-triangle">
    <div class="in-between-triangle-line"></div>
    <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" class="down-triangle">
    <div class="second-right-white-line"></div>
    <p class="sound">SOUND</p>
    <button class="small-black-rectangle"></button>
<p class="sound-back">SOUND<br>BACK</p>
    <button class="small-black-rectangle1"></button>
    <img src="https://imgservice.cricut.com/design-users/users/4339679/images/184947932/2b99ea92-05ad-41d3-a211-4625bb4c5796/hireslargecomposite.png" alt="Illuminating star symbol" class="illuminating-star"></img>
<button class="smallbutton"></button>
    <p class="voltext">VOL</p>
    <div class="right-side-triangle"></div>
    <p class="metronome-on">METRONOME ON</p>
    <button class="GreyRectangle2">
      <div class="InnerGreyDot1">
        <div class="InnerGreyDot1"></div>
      </div>
    </button>
    <div class="upside-down-half-circle1"></div>
  
  <!--Note: in Korg TM50 Tuner and Metronome specification, tempo range is from 30 to 252 BPM-->
  
  <!--Also, only moves up and down by 4 beats-->
    <p class="beat-white-text">BEAT</p>
<!--Have up triangle image act as button using onclick event-->
  <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184787015/cd90a26d-8c21-4437-8436-c018e4f20252/hireslargecomposite.png" alt="giant up triangle" class="up-beat-triangle"></input>
  <div class="in-between-triangle-beat-line"></div>
  <input type="image" src="https://imgservice.cricut.com/design-users/users/4339679/images/184782382/0292af05-b48b-4195-9e90-aea0f850fab8/hireslargecomposite.png" alt="giant up triangle" class="down-beat-triangle">
    <p class="tempo-white-text">TEMPO</p>
  <div class="in-between-triangle-tempo-line"></div>
  <div class="tap-tempo-text">TAP TEMPO</div>
  <button class="tap-tempo-button"></button>
  </div>
<p>Will be working on toggle function between beige, light orange, and orange</p>
<p class="rights">Made by Sarah</p>
</body>

Fiddle