Dodanie do tablicy obiektu

0

Witam. Chciałem napisać część kodu , który wstawiłby mi do tablicy obiekt (kulke) i przy nacisnięciu na przycisk "zwiększ" wyświetlałby coraz to nowe kulki a po naciśnięciu przycisku "zmniejsz" je usuwał. W załączniku dodam swój kod - ostrzegam , że jestem amatorem w programowaniu. Mam problem : nie wiem jak wstawić obiekt do tablicy aby właśnie po naciśnięciu mi wyświetlało coraz to nowe kulki ,. może ktoś wpadnie na inny pomysł. Z góry dziękuję za odpowiedź.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf8"/>
<title> Znaczniki i podstawy w HTML</title>
<meta name="decription" content="Przed tobą nauka HTML">
<meta name="keywords" content="znaczniki html i tak dalej"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
</head>
<style>
#Liczenie
{
    background-color: red;
    color: white;
    
}
.bombelek
{
    background-color: blue;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
</style>

<body>
<div id="Liczenie">
<div id="bombelek"></div>     
<script>            
           let d;
           let b = 0;
               function rysowanie()
               {
                
               let tablica = [];
               
    for (i = 0; i<=b; i++) {
    let bomb = document.getElementById("bombelek") 
    tablica.push(bomb)
    console.log(tablica)
    }
   return b;
   return tablica;
   
  }       
    rysowanie();

  function plus()
  {
   b = b+1;
   return b;
  }

  function minus()
  {
   b = b-1;
   return b;
  }
  
</script>
           <button type="button" id="przycisk1">Zwiększ</button>
           <button type="button" id="przycisk2">Zmniejsz</button>
           <script>
            
           document.write(b)
           let dodaj = document.getElementById('przycisk1')
           dodaj.addEventListener('click',plus)
           dodaj.addEventListener('click',rysowanie)
           let odejmij = document.getElementById('przycisk2')
           odejmij.addEventListener('click',minus)
           odejmij.addEventListener('click',rysowanie)

           </script>
    </div>
  
</br>
</body>
</html>
0

Poprawiłem nieco ten twój kod

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf8"/>
  <title> Znaczniki i podstawy w HTML</title>
  <style>
    #Liczenie
    {
      background-color: red;
      color: white;
    }
    .bombelek
    {
      background-color: blue;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <button type="button" id="przycisk1">Zwiększ</button>
  <button type="button" id="przycisk2">Zmniejsz</button>
  <div id="container"></div>
  <script>
   var b = 0;
   function rysowanie() {
    let container = document.getElementById("container");
    container.innerHTML = "";
    for (i=0; i<b; i++) {
      let div = document.createElement("div");
      div.className = "bombelek";
      container.appendChild(div);
    }
  }       
  rysowanie();

  function plus() { ++b; }

  function minus() { --b; }

  let dodaj = document.getElementById('przycisk1')
  dodaj.addEventListener('click',plus)
  dodaj.addEventListener('click',rysowanie)

  let odejmij = document.getElementById('przycisk2')
  odejmij.addEventListener('click',minus)
  odejmij.addEventListener('click',rysowanie)

</script>

</body>
</html>
0 
.bubble {
  width: 100px;
  height: 100px;
  background: lightgreen;  
  float: left;
  margin-left: 1px;
  margint-top: 1px;
}

<body style="background: darkgoldenrod;">

<div id="group1">
  <button id="plus">plus</button>
  <button id="minus">minus</button>
  <button id="commit">commit</button>
  <div id="counter"></div>
</div>

let quantity = 0;

function increase (e) {

    if(e.target.id == 'minus' && quantity >= 1) {
      quantity--;
    } else if(e.target.id == 'plus' && quantity <= 99){
      quantity++;
    }
  
    document.getElementById('counter').textContent = quantity;
}

document.getElementById('group1').addEventListener('click', increase, false);

function bubble () {

  if(document.querySelectorAll('.bubble').length < quantity) {
    for(let i=document.querySelectorAll('.bubble').length;i<quantity;i++) {
      new_div = document.createElement('div');
      new_div.className = "bubble";
      document.body.appendChild(new_div);
  
    }
  } else if(document.querySelectorAll('.bubble').length > quantity){
    let bubble2 = document.querySelectorAll('.bubble');
    for(let j=bubble2.length-1;j>=bubble2.length-1-(bubble2.length-1-quantity);j--) {
      bubble2[j].remove();
    }
  }

}

document.getElementById('commit').addEventListener('click', bubble, false);

</body>

Zamiast kodu z target możesz rozbić jedną funkcję na dwie, przykład poniżej.


let quantity = 0;

function increase () {
  if(quantity <= 99) {
    quantity++;
  }

  document.getElementById('counter').textContent = quantity;
}

function decrease () {
  if(quantity >= 1) {
   quantity--;
  }

   document.getElementById('counter').textContent = quantity;
}

document.getElementById('plus').addEventListener('click', increase, false);
document.getElementById('minus').addEventListener('click', decrease, false);

// function bubble () { ...

lub


let quantity = 0;

function increase () {
  if(quantity <= 99) {
    quantity++;
  }
}

function decrease () {
  if(quantity >= 1) {
   quantity--;
  }
}

function output_text () {
  document.getElementById('counter').textContent = quantity;
}

document.getElementById('plus').addEventListener('click', increase, false);
document.getElementById('minus').addEventListener('click', decrease, false);
document.getElementById('plus').addEventListener('click', output_text, false);
document.getElementById('minus').addEventListener('click', output_text, false);

// function bubble () { ...

W początkowym poście w elemencie HTML masz napisane id, a w CSS odwołujesz się do niego poprzez klasę. Następnym razem uważaj. Pamiętaj jeszcze, że id ma być unikatowe, tylko jedno w kodzie HTML (w uproszczeniu), a nie kilka. Kilka i więcej to może być klas.

0
lookacode1 napisał(a):

Poprawiłem nieco ten twój kod

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf8"/>
  <title> Znaczniki i podstawy w HTML</title>
  <style>
    #Liczenie
    {
      background-color: red;
      color: white;
    }
    .bombelek
    {
      background-color: blue;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <button type="button" id="przycisk1">Zwiększ</button>
  <button type="button" id="przycisk2">Zmniejsz</button>
  <div id="container"></div>
  <script>
   var b = 0;
   function rysowanie() {
    let container = document.getElementById("container");
    container.innerHTML = "";
    for (i=0; i<b; i++) {
      let div = document.createElement("div");
      div.className = "bombelek";
      container.appendChild(div);
    }
  }       
  rysowanie();

  function plus() { ++b; }

  function minus() { --b; }

  let dodaj = document.getElementById('przycisk1')
  dodaj.addEventListener('click',plus)
  dodaj.addEventListener('click',rysowanie)

  let odejmij = document.getElementById('przycisk2')
  odejmij.addEventListener('click',minus)
  odejmij.addEventListener('click',rysowanie)

</script>

</body>
</html>

Wooow super , dziękuję bardzo !! Jeśli chodzi o samo rysowanie bąbelków rozumiem , że stworzyłeś zmienną let o nazwie "container" i pobrałeś element o id = container , następnie (tutaj pewien nie jestem i czemu tak) zawartość naszego pojemnika zastąpiłeś pustką czyli pustym ciągiem , następnie po stworzeniu zmiennej "div" przypisałeś do niej nowy element , który będzie nowym div- em , nazwałeś go "bombelek" i w związku z tym appendChild nie moge do końca zrozumieć. Jeśli bym chciał teraz np. zrobić tak żeby się coś z bąbelkiem działo po nacisnięciu itp to muszę napisać : class bombelek = {kod} ??

0

@kamil_matys:

<div id="container"></div>

po

container.appendChild(div);
container.appendChild(div);

będzie

<div id="container">
    <div class="bombelek"></div>
    <div class="bombelek"></div>
</div>

po

container.innerHTML = "";

będzie

<div id="container"></div>

Jak chcesz zrobić z bombelkiem coś ciekawego to możesz dodać w stylach:

.bombelek:hover {
   background-color: red;
}
0

Dziękuję bardzo wszystkim za podpowiedzi !! Bardzo mi pomogły i do następnego !

1 użytkowników online, w tym zalogowanych: 0, gości: 1