Change the color of one div with on keypress jquery/javascript

Question

I want to change the color of one div by clicking "1" key. I have a bunch of videos playing and when you click "1", a certain video starts playing. I want to create something that looks like a control panel, so that when you click "1" the video will turn on (which I have working with keypress in javascript) but will also change the color of my div when I press "1"

HTML

</head>
<body>

<div class="intro">Press The Number Keys and Q W E To Activate Video
</div>

<div id="one">1</div>

JAVASCIPT JQUERY

$(document).ready(function() {
  $(document).keypress(function(event) {
    if (event.which === 49) {
      $("#one").css('background-color'),("#00ffff");
    }
  });
 });


document.onkeypress = function(e) {
  console.log(e)
  if (e.key === "1" ) {
   var vid = document.getElementById('vid');
   vid.paused ? vid.play() : vid.pause();
   var vid = document.getElementById('vid').style.opacity = '1';

  } else if (e.key === "2" ) {
   var cami = document.getElementById('cami');
   cami.paused ? cami.play() : cami.pause(); 
   var cami = document.getElementById('cami').style.opacity = '1';

  }

Tanner_Gram · Accepted Answer · 2018-12-12 19:23:37Z

1

Something like this should get you there. Just sandboxed the background color change logic.

<div class="intro">Press The Number Keys and Q W E To Activate Video
</div>


<div id="changeExample">This is a test</div>

document.onkeypress = function(e) {
  console.log(e)
  if (e.key === "1" ) {
        if( $("#changeExample").hasClass("red")  ){

            $("#changeExample").removeClass("red").addClass("pink").css("background-color", "pink");

        }
        else if( $("#changeExample").hasClass("pink") ){
            $("#changeExample").removeClass("pink").addClass("red").css("background-color", "red");
        }
        else{
            $("#changeExample").addClass("red").css("background-color", "red");
        }

  }
}

edited Dec 12, 2018 at 19:23

answered Dec 12, 2018 at 18:52

Tanner_Gram

1,1209 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kelsey Selby Over a year ago

thank you so much i got this to work!! Also do you know how I could change it back to pink by clicking 1 again?

Tanner_Gram Over a year ago

Accept my answer and I will start whipping something up for you for sure.

score 0 · Accepted Answer · 2018-12-12 18:49:38Z

0

Simply add this to your if statement: vid.style.backgroundColor = "yourcolor";

edited Dec 12, 2018 at 18:49

answered Dec 12, 2018 at 18:44

user9480491

1 Comment

Kelsey Selby Over a year ago

if (event.which === 49) id.style.backgroundColor = "#00ffff";

Collectives™ on Stack Overflow

Change the color of one div with on keypress jquery/javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related