Jak ukazují prvky, když tlačítko bylo kliknuto v Javascriptu

Question 1

Snažil jsem se vytvořit kódy, které prvky jsou zobrazeny, když tlačítko bylo kliknuto, je to vlastně mohl, aby jim ukazuje, ale chci jim ukázat, samostatně na každé tlačítko, (chci se schovat další prvky, když jiné tlačítko bylo kliknuto), kde potřebuji opravit?

function button1() {
  'use strict';
 document.getElementById("red1"). className = "red1" ;
 document.getElementById("blue1"). className = "blue1" ;
}



function button2(){
  'use strict';
  document.getElementById("red2"). className = "red2" ;
  document.getElementById("blue2"). className = "blue2" ;
}

function button3(){
  'use strict';
  document.getElementById("red3"). className = "red3" ;
  document.getElementById("blue3"). className = "blue3" ;
}

function button4(){
  'use strict';
  document.getElementById("red4"). className = "red4" ;
  document.getElementById("blue4"). className = "blue4" ;
}


function button5(){
  'use strict';
  document.getElementById("red5"). className = "red5" ;
  document.getElementById("blue5"). className = "blue5" ;
}

function button6(){
  'use strict';
  document.getElementById("green6"). className = "green6" ;
  document.getElementById("red6"). className = "red6" ;
  document.getElementById("blue6"). className = "blue6" ;
}


function init(){
  'use strict';
  document.getElementById("btn1").addEventListener("click",button1);
  document.getElementById('btn2').addEventListener('click',button2);
  document.getElementById('btn3').addEventListener('click',button3);
  document.getElementById('btn4').addEventListener('click',button4);
  document.getElementById('btn5').addEventListener('click',button5);
  document.getElementById('btn6').addEventListener('click',button6);
}

window.onload = init;

.hidden{
  display: none;
}

.red1{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue1{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top: -600px;
}

.red2{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue2{
  width: 300px;
  height: 300px;
  background-color: blue;
}


.red3{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue3{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-left:600px;
  margin-top: -600px; 
}



.red4{
  width: 600px;
  height: 600px;
  background-color: red;
  margin-left: 300px;

}

.blue4{
  width: 300px;
  height: 300px;
  background-color: blue; 
  position: absolute;
  margin-top: -400px;
}

.red5{
  width: 600px;
  height: 600px;
  background-color: red;
  position: absolute;
  z-index: 10;
}

.blue5{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top:36px;
  margin-left: 45px;
  position: absolute;
  z-index: 40;
}


.red6{
  width: 600px;
  height: 600px;
  background-color: red;
  position: absolute;
  z-index: 20;

}

.blue6{
  width: 300px;
  height: 300px;
  background-color: blue;
  z-index: 100;
  position: absolute;

}



.green6{
  width: 900px;
  height: 700px;
  background-color: green;
  margin-top: 0;
  z-index: 10;
  position: absolute;
  
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
    <title>2 Boxes</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<div id="outer">
<h2>Boxes</h2>
  <form id="myForm">
    <fieldset>
      <label>Blue box sits inside the red box</label>
      <button type="button" id="btn1">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits under the red box</label>
      <button type="button" id="btn2">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits to the right of the red box</label>
      <button type="button" id="btn3">Click</button>
    </fieldset>
    <fieldset>
      <label>Red box sits to the right of the blue box</label>
      <button type="button" id="btn4">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits inside the red box and move the blue box 20px down and 45 pixels to the right of the top left hand corner of the red box</label>
      <button type="button" id="btn5">Click</button>
    </fieldset>
    <fieldset>
      <label>Green box around both the blue and red boxes</label>
      <button type="button" id="btn6">Click</button>
    </fieldset>
  </form>
</div>

    <div id="button1" >
    <p  id="red1" class="hidden"></p>
    <p  id="blue1" class="hidden"></p>
  </div>

  <div id="button2">
    <p id="red2" class="hidden"></p>
    <p id="blue2" class="hidden"></p>
  </div>

  <div id="button3">
    <p id="red3" class="hidden"></p>
    <p id="blue3" class="hidden"></p>
  </div>

  <div id="button4">
    <p id="red4" class="hidden"></p>
    <p id="blue4" class="hidden"></p>
  </div>

  <div id="button5">
    <p id="red5" class="hidden"></p>
    <p id="blue5" class="hidden"></p>
  </div>

  <div id="button6">
    <p id="red6" class="hidden"></p>
    <p id="blue6" class="hidden"></p>
    <p id="green6" class="hidden"></p>
  </div>
</body>
</html>

Question 2

Raději bych psát další funkci, kterou je skrývání všech prvků, a volat tuto funkci na začátku své další funkce. Příklad:

function hideAll() {
 document.getElementById("red1").className = "hidden" ;
 document.getElementById("blue1").className = "hidden" ;
 ...
}

Volání funkce v jiné funkce. Příklad:

function button1() {
 hideAll();
 document.getElementById("red1").className = "red1" ;
 document.getElementById("blue1").className = "blue1" ;
}

Nyní můžete také přizpůsobit své další CSS pravidla s cílem odstranit display: none takto:

.red1{
  width: 600px;
  height: 600px;
  background-color: red;
  display: block;
}

.blue1{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top: -600px;
  display: block;
}
 ...

Bare na paměti, že tento způsob programování je velmi neefektivní a existuje mnoho způsobů, jak refaktorovat kód, aby se více čitelné a přizpůsobivé.

Deni J. · Answer 1 · 2021-11-19T09:00:02

Raději bych psát další funkci, kterou je skrývání všech prvků, a volat tuto funkci na začátku své další funkce. Příklad:

function hideAll() {
 document.getElementById("red1").className = "hidden" ;
 document.getElementById("blue1").className = "hidden" ;
 ...
}

Volání funkce v jiné funkce. Příklad:

function button1() {
 hideAll();
 document.getElementById("red1").className = "red1" ;
 document.getElementById("blue1").className = "blue1" ;
}

Nyní můžete také přizpůsobit své další CSS pravidla s cílem odstranit display: none takto:

.red1{
  width: 600px;
  height: 600px;
  background-color: red;
  display: block;
}

.blue1{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top: -600px;
  display: block;
}
 ...

Bare na paměti, že tento způsob programování je velmi neefektivní a existuje mnoho způsobů, jak refaktorovat kód, aby se více čitelné a přizpůsobivé.

Jak ukazují prvky, když tlačítko bylo kliknuto v Javascriptu

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii