• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Java script - "onclick"

VPS Starter Arubacloud
0 głosów
162 wizyt
pytanie zadane 22 kwietnia 2019 w JavaScript przez nie_wiem_co_robie Nowicjusz (180 p.)
otagowane ponownie 22 kwietnia 2019 przez nie_wiem_co_robie

komenda "onclick" dodana po div z klasą "point" nie wywołuje żadnej funkcji,

(Próbowałam napisać osobną funkcję, która nie wywoływała się, podpięłam więc działającą funkcję expand pod ten element [point], co również nic nie dało, stąd stwierdziłam, że problem musi być z kliknięciem, a element na pewno leży na najwyższej warstwie, nie wiem więc, skąd się bierze problem)

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Plastic</title>
    <meta charset="utf-8">
    <link   rel="stylesheet" href="style.css" >
<script src="main.js"> </script>
  </head>
  <body>
    <h2> Main Page <h2>

<div class= "toggle" id="toggle" onclick="expand()"></div>
  <div class= "menuv2" id="menuv2">
    <a href ="present.html"> <div class="presentv2" id="presentv2"> </div> </a>
    <a href ="future.html"> <div class="futurev2" id="futurev2"> </div> </a>
  </div>
<div class="stuff" id="stuff"></div>
<div class="exit"id="exit" onclick="exit()"> x </div>
<div class="controler">
<div class="bar"> </div>
<div class="loadingbar" id="loadingbar"> </div>
<div class="points">
<li><div class= "point" id="point" onclick="expand()"> </div></li>
<li><div class= "point2" id="point2" > </div></li>
<li><div class= "point3" id="point3"> </div>


</div>


</div>

</body>
</html>

 CSS:
 

h2{
  text-align: center;
}
.bar{
  background-color: grey;
  width: 500px;
  height: 25px;
  border: 2px solid black;
  position: absolute;
  z-index: 0;
}
.loadingbar{
  background-color: green;
  width: 500px;
  height: 20px;
  position: absolute;
  top:72px;
  z-index: 1;
}
.points li{
  background-color: grey;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid black;
  list-style: none;
  position: absolute;
  z-index: 2;
  cursor: pointer;
}
.points li:nth-child(2){
  left:225px;
}
.points li:nth-child(3){
  left:450px;
}

.stuff{
  width: 500px;
  height: 500px;
  background-color: black;
  transform: scale(1);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -2;
opacity: 0;
transition: 0.7s;
border-radius: 30%;
}

.exit{
  width:50px;
  height:50px;
  background-color: orange;
  position: absolute;
  top: 150px;;
  bottom: 0;
  left: 500px;
  right: 0;
  border-radius: 50%;
  z-index: -1;
transform: scale(0);
transition: 0.7s;
cursor:pointer;

}
.toggle{
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  text-align: center;
  height: 100px;
  width: 100px;
  transition: 0.7s;
  z-index: 1;
}
.presentv2{
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  text-align: center;
  height: 100px;
  width: 100px;
  transition: 0.7s;
  opacity: 0;
  z-index: -1;
}
.futurev2{
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  text-align: center;
  height: 100px;
  width: 100px;
  transition: 0.7s;
  opacity: 0;
  z-index: -1;
}

javascript
 

function expand(){
    document.getElementById("presentv2").style.left="400px";
    document.getElementById("presentv2").style.opacity="1";
    document.getElementById("futurev2").style.left="-400px";
    document.getElementById("futurev2").style.opacity="1";
    document.getElementById("stuff").style.opacity="0.5";
    document.getElementById("exit").style.transform="scale(1)";
    document.getElementById("toggle").style.zIndex="-3";

  }
function exit(){
  document.getElementById("presentv2").style.left="0";
  document.getElementById("presentv2").style.opacity="0";
  document.getElementById("futurev2").style.left="0";
  document.getElementById("futurev2").style.opacity="0";
  document.getElementById("stuff").style.opacity="0";
  document.getElementById("exit").style.transform="scale(0)";
  document.getElementById("toggle").style.zIndex="1";

}

[Tak wiem, że kod może mieć masę błędów, naprawde zaczynam dopiero z tematem]

1
komentarz 22 kwietnia 2019 przez Velta Maniak (51,890 p.)
W czym problem? Wszystko działa jak należy.

Usuń tag "java".
komentarz 22 kwietnia 2019 przez nie_wiem_co_robie Nowicjusz (180 p.)
Nope, nie działa
Onclick jest przypisane do dwóch div'ów - pierwszy to toggle(różowe kółko)funkcja expand wywołuje się wraz z kliknięciem
Drugi to div z klasą "point" -(szare kółko)  na który klikanie nie wywołuje funkcji ani expand, ani żadnej innej mu przypisanej.
komentarz 22 kwietnia 2019 przez jaca121212 Nałogowiec (40,760 p.)
komentarz 22 kwietnia 2019 przez nie_wiem_co_robie Nowicjusz (180 p.)
Dokładnie C:
Dlaczego to wcześniej nie działało?

1 odpowiedź

0 głosów
odpowiedź 22 kwietnia 2019 przez jaca121212 Nałogowiec (40,760 p.)
wybrane 23 kwietnia 2019 przez nie_wiem_co_robie
 
Najlepsza

Wyżej w kodzie nie masz pobranego elementu point


function expand(){
    document.getElementById("presentv2").style.left="400px";
    document.getElementById("presentv2").style.opacity="1";
    document.getElementById("futurev2").style.left="-400px";
    document.getElementById("futurev2").style.opacity="1";
    document.getElementById("stuff").style.opacity="0.5";
    document.getElementById("exit").style.transform="scale(1)";
    document.getElementById("toggle").style.zIndex="-3";
 
  }
function exit(){
  document.getElementById("presentv2").style.left="0";
  document.getElementById("presentv2").style.opacity="0";
  document.getElementById("futurev2").style.left="0";
  document.getElementById("futurev2").style.opacity="0";
  document.getElementById("stuff").style.opacity="0";
  document.getElementById("exit").style.transform="scale(0)";
  document.getElementById("toggle").style.zIndex="1";
 
}

Teraz masz inaczej to zrobione.

https://codepen.io/jaca121212/pen/BEPWjP

komentarz 22 kwietnia 2019 przez nie_wiem_co_robie Nowicjusz (180 p.)
Dzięki wielkie, niemniej zauważyłam, że w tym wypadku onclick nie działa bez liter między divami i średnio rozumiem dlaczego?
(różowe koło działało bez 33, nie posiada również pobranego id.
1
komentarz 22 kwietnia 2019 przez jaca121212 Nałogowiec (40,760 p.)

Dzieje się to tak bo  element o ID point jest przysłonięty elementem li. 

problem tkwił w CSS. 

https://codepen.io/jaca121212/pen/qwymjM

Podobne pytania

0 głosów
0 odpowiedzi 116 wizyt
0 głosów
1 odpowiedź 197 wizyt
pytanie zadane 1 lutego 2022 w JavaScript przez sk1neq Nowicjusz (120 p.)
0 głosów
1 odpowiedź 218 wizyt
pytanie zadane 5 czerwca 2020 w JavaScript przez Marak123 Stary wyjadacz (11,190 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...