I have used unique string with each key but stil unale to pass the final step of #drumMachine code challange

html code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drum machine</title>
</head>
<body>
     <div class="container" id="drum-machine">
    <h1>DRUM MACHINE</h1>
      <input type="text" id="display">
        <div class="align-items-center text-center ">
            <button class="drum-pad btn col-3 btn-dark" id="Heater-1" onclick="display('Heater-1');play('Q');"> Q 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3" type="audio/mpeg" class="clip" id="Q">
            </button>
             <button class="drum-pad btn col-3 btn-warning" id="Heater-2" onclick="display('Heater-2');play('W');"> W 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3" type="audio/mpeg" class="clip" id="W">
           </button>
            <button class="drum-pad btn col-3 btn-dark" id="Heater-3" onclick="display('Heater-3'); play('E');"> E 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3" type="audio/mpeg" class="clip" id="E">
           </button>
        </div>
        <br>
        <div class="align-items-center text-center">
           <button class="drum-pad btn col-3 btn-dark" id="Heater-4" onclick="display('Heater-4'); play('A');"> A 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3" type="audio/mpeg" class="clip" id="A">
           </button>
           <button class="drum-pad btn col-3 btn-warning" id="Clap" onclick="display('Clap'); play('S');"> S 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3" type="audio/mpeg" class="clip" id="S">
           </button>
           <button class="drum-pad btn col-3 btn-dark" id="Open-Open-HH" onclick="display('Open-Open-HH'); play('D');"> D 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3" type="audio/mpeg" class="clip" id="D">
           </button>
       </div>
       <br>
       <div class="align-items-center text-center">
           <button class="drum-pad btn col-3 btn-dark" id="Kick-n-Hat" onclick="display('Kick-n-Hat'); play('Z');"> Z 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3" type="audio/mpeg" class="clip" id="Z">
          </button>
          <button class="drum-pad btn col-3 btn-warning" id="Kick" onclick="display('Kick'); play('X');"> X 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3" type="audio/mpeg" class="clip" id="X">
           </button>
           <button class="drum-pad btn col-3 btn-dark" id="Closed-Open-Open-H" onclick="display('Closed-Open'); play('C');"> C 
              <audio src="https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3" type="audio/mpeg" class="clip" id="C">
           </button>       
       </div>
       <div class="volume">
        <div class="slider">
            <input type="range" id="control" min="0" max="1" step="0.1"
            value="0.3" onchange="volumeRange();">
         </div>
    </div>
    
  <script src="app.js"></script>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>

css code

*{
    padding: auto;
    margin: auto;
}
body{
    align-items: center;
    background-color: aquamarine;
}
.container{
    display: flex;
    align-items: center;
    border-radius: 15px;
    border: #3838 solid 0.3px;
    display: block;
    background-color: rgb(26, 63, 63);
    margin-top: 3%;
    padding: 10px;
    height: fit-content;
    width: max-content;
    box-shadow: 0px 4px 4px 4px rgb(0, 0, 0.25);}
h1{
    text-align: center;
    text-transform: uppercase;
    margin: 10px;
    width: 355px;
    border: #3838 solid 0.3px;
    border-radius: 10px;
    padding: 5px;
    font: 2em sans-serif;
    font-weight: 600;
    background-color: rgb(28, 53, 45);
    color: rgb(248, 237, 237);
    box-shadow: 0px 1px 1px 1px rgb(0, 0, 0.25);
}
.container #display{
    margin-left: 45px;
    margin-top: 2px;
    margin-bottom: 15px;
    width: 275px;
      height: 50px;
      align-items: center;
      border: #3838 solid 0.3px;
    border-radius: 10px;
    padding: 5px;
    font: 1em sans-serif;
    font-weight: 400;
    background-color: rgb(235, 235, 235);
    color: rgb(88, 68, 68);
    box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.4);
}
button{
    width: 10px;
    height: 99px;
    gap: 0px;
    margin: 0%;
    box-shadow: 0px 4px 4px 4px rgb(0, 0, 0.25);
}
.volume{
    margin: 10px;
    border: #3838 solid 0.3px;
    border-radius: 10px;
    padding: 10px;
    margin-left: 38px;
    margin-top: 20px;
    width: fit-content;
    background-color: rgb(28, 53, 45);
    color: rgb(248, 237, 237);
    box-shadow: 0px 1px 1px 1px rgb(0, 0, 0.25);
}
.volume .slider{
    display: flex;
    height: 5px;
    width: 275px;
    align-items: center;
}
.volume .slider input{
    width: 100%;    
    height: 2px;
    outline: none;
    border-radius: 10px;
    -webkit-appearance:none;
    margin-right: 1px;
    color: rgb(8, 66, 66);
    box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.5);
}

js code


function display(value){
  document.getElementById('display').value=value;
}
function play(str){
  var audio = document.getElementById(str);
  audio.play();
  audio.volume = document.getElementById("control").value;
}
function keyPress(evt){ 
  if (evt.keyCode == 81)
  {
    document.getElementById("Q").click();
  }
  else if (evt.keyCode == 87)
  {
    document.getElementById("W").click();
  }
  else if (evt.keyCode == 69)
  {
    document.getElementById("E").click();
  }
  else if (evt.keyCode == 65)
  {
    document.getElementById("A").click();
  }
  else if (evt.keyCode == 83)
  {
    document.getElementById("S").click();
  }
  else if (evt.keyCode == 68)
  {
    document.getElementById("D").click();
  }
  else if (evt.keyCode == 90)
  {
    document.getElementById("Z").click();
  }
  else if (evt.keyCode == 88)
  {
    document.getElementById("X").click();
  }
  else if (evt.keyCode == 67)
  {
    document.getElementById("C").click();
  }
}
document.addEventListener("keydown", keyPress);



      

Welcome to our community!

This is the HTML-CSS subforum. This project belongs to the Front End Development Libraries course. Post your question in the JS subforum.

Change the display element from an input element to a text element (like a p or whatever) and set the text content.

Thanks for your suggestion, I did but same issue, no improvement

Post your latest code, I would suggest you create a Codepen for it.

Making the fix I suggested made all the tests pass for me.

How are you setting the element text content? You can’t use value just to be clear. You have to use textContent, or innerText, or innerHTML.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.