CODEWITHSUNDEEP
javascripthtmlcss
Sander Seiersnes
Sander Seiersnes

Reputation: 27

Click on a div to activate other div

How can I make multiple <div> elements with classes or id get active when I press on a <div>element that have class or id. Like the picture below, I want it to go from a white screen to that type of screen that i made with css classes and ids. https://i.sstatic.net/tPZou.jpg

You can see the phone I made under here. Press on the black area to get the white screen, I want to press the white to get the passcode screen: https://seigmann123.github.io/iphone12/phone.html

function screen() {
  var e = document.getElementById("screen");
  var c = window.getComputedStyle(e).backgroundColor;
  if (c === "rgb(0, 0, 0)") {
    document.getElementById("screen").style.background = "#ffffff";
  }
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone {
  position: relative;
  background: rgb(32, 32, 32);
  border-radius: 30px;
  height: 560px;
  width: 295px;
  margin: 0 auto;
}

.sensores {
  position: absolute;
  background: rgb(32, 32, 32);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 32;
  width: 175;
  margin: 0 auto;
  right: 0;
  left: 0;
}

#screen {
  position: absolute;
  background: #000;
  border-radius: 30px;
  height: 540px;
  width: 275px;
  margin: 0 auto;
  right: 0;
  left: 0;
  top: 10;
}

.off-on-button {
  width: 3px;
  height: 60px;
  background: rgb(32, 32, 32);
  position: absolute;
  right: 0;
  margin: 0 auto;
  top: 125;
  border-radius: 20px;
  left: 294;
}

.sound-up {
  width: 3px;
  height: 35px;
  background: rgb(32, 32, 32);
  position: absolute;
  right: 0;
  margin: 0 auto;
  top: 115;
  border-radius: 20px;
  left: -295;
}

.sound-down {
  width: 3px;
  height: 35px;
  background: rgb(32, 32, 32);
  position: absolute;
  right: 0;
  margin: 0 auto;
  top: 160;
  border-radius: 20px;
  left: -295;
}
<div class="phone">
  <div id="screen" onclick="javascript:screen();"></div>
  <div class="sensores"></div>
  <div class="off-on-button"></div>
  <div class="sound-up"></div>
  <div class="sound-down"></div>
</div>

Upvotes: 1

Views: 447

Answers (3)

Sander Seiersnes
Sander Seiersnes

Reputation: 27

I can try to explain better and show better.

I want to do so I can press on #screen to get #screen-on, so then #screen gets replaced with #screen-on. And when I press on #screen-on I want to get #password-screen as a overlay on #screen-on with #sircle on top

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone{
    position: relative;
    background: rgb(32, 32, 32);
    border-radius: 30px;
    height: 560px;
    width: 295px;
    margin: 0 auto;
}

.sensores{
    position: absolute;
    background: rgb(32, 32, 32);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    height:32;
    width: 175;
    margin: 0 auto;
    right: 0;
    left: 0;

}



#screen{
    position: absolute;
    background: rgb(0, 0, 0);
    border-radius: 30px;
    height: 540px;
    width: 275px;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: 10;
    
}


#screen-on{
    position: absolute;
    background: rgb(0, 0, 0);
    border-radius: 30px;
    height: 540px;
    width: 275px;
    margin: 0 auto;
    right: 0;
    left: 0;
    top: 10;
    
}




#sircle{
    width: 65px;
    font-size: 45px;
    line-height: 1.4;
    height: 65px;
    background: #494545;
    position: absolute;
    right: 0;
    text-align: center;
    left: 0;
    margin: 0 auto;
    bottom: 0px;
    top: 50;
    border-radius: 50%;
    color: #dcdcdc;
}

#password-screen {
    position: absolute;
    height: 540px;
    width: 275px;
    background-color: rgb(29, 27, 27);
    right: 0;
    left: 0;
    top: 10;
    margin: 0 auto;
    opacity: 0.5;
    border-radius: 30px;
}



.off-on-button{
    width: 3px;
    height: 60px;
    background: rgb(32, 32, 32);
    position: absolute;
    right: 0;
    margin: 0 auto;
    top: 125;
    border-radius: 20px;
    left: 294;
}


.sound-up{
    width: 3px;
    height: 35px;
    background: rgb(32, 32, 32);
    position: absolute;
    right: 0;
    margin: 0 auto;
    top: 115;
    border-radius: 20px;
    left: -295;
}


.sound-down{
    width: 3px;
    height: 35px;
    background: rgb(32, 32, 32);
    position: absolute;
    right: 0;
    margin: 0 auto;
    top: 160;
    border-radius: 20px;
    left: -295;
}

Upvotes: 0

ShanieMoonlight
ShanieMoonlight

Reputation: 1861

Change JS to

  function screen() {
      var e = document.getElementById("screen");
      e.classList.toggle("black-screen")
  }

add this to css

#screen{
   background:white;
   ...
   ...
 }

.black-screen{
  background:#000 !important;
}

Upvotes: 0

Tushar Nitave
Tushar Nitave

Reputation: 577

Try this. Sample code to mimic what you want to achieve.

<!DOCTYPE html>
<head>
<title>Demo</title>
<style>
    #whiteDiv, #blueDiv, #passwd{

        height: 300px;
        width:300px;
    }
    #whiteDiv, #passwd{
        display: none;

    }
</style>
</head>
<body>
<div style="border: 1px solid #000;width:300px;height:300px">
    <div style="background-color:#08c" id="blueDiv"onclick="activateWhite();">
        click me
    </div>

    <div style="background-color:#fff" id="whiteDiv" onclick="showPasswd();">
        click me
    </div>
    
    <div style="background-color: #fff;" id="passwd">
        <p>Enter password</p>
        <input type="password">
    </div>
</div>

<script>
    function activateWhite(){
        document.getElementById("whiteDiv").style.display = "block";
        document.getElementById("blueDiv").style.display = "none";
    }

    function showPasswd(){
        document.getElementById("passwd").style.display = "block";
    }
</script>
</body>

Upvotes: 1

Related Questions