Logowanie

Utworzenie diva po wpisaniu słowa

pytanie zadane 3 marca 2024 w JavaScript przez niezalogowany
edycja 3 marca 2024

WITAM chciałbym żeby po wpisaniu do INPUTU np slowa nowy div .w divie kwadrat powstał nowy div o ustalonych wymiarach i innych i tak za każdym razem jak to wpisze jednak żeby miało to ograniczoną ilość divów które można stworzyć

function utworz()
{
    
   if 
    
    
}

<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  <title>TWORZENIE DIVÓW</title>
  <link rel="stylesheet" href="divy.css" type="text/css">
  <script src="mechanika.js" ></script>
  
</head>
<body>
  
  <input type="text" id="poleinput"/>
  
  <input type="button" value="wyslij" onlick="utworz()"/>
  
  <div id="kwadrat">
    
    
  </div>
  
</body>
</html>

Czy ktos mógłby mi wytłumaczyć jak to zrobić ? Z góry dziękuję

komentarz 3 marca 2024 przez Iei Bywalec (2,220 p.)

Ktoś rozumie o co tutaj chodzi?

komentarz 3 marca 2024 przez niezalogowany

O co chodzi ?

komentarz 3 marca 2024 przez AnimaVillis Stary wyjadacz (13,410 p.)

Chodzi o to że Twój post jest napisany w sposób taki jak wyżej. Nie jesteśmy w stanie ogarnąć o co Ci dokładnie chodzi. Napisz najlepiej post jeszcze raz i dokładnie.

komentarz 3 marca 2024 przez niezalogowany

No nie umiem inaczej tego napisać co jest nie czytelne pytam się jak zrobić żeby po wpisaniu słowa w divie powstał nowy div

komentarz 3 marca 2024 przez AnimaVillis Stary wyjadacz (13,410 p.)

Nie piszesz nic o wpisaniu słowa w diva dodatkowo div nie jest polem tekstowym.

Stąd też prawdopodobnie rozbieżności, ale musisz wykorzystać do tego javascript :)

komentarz 3 marca 2024 przez niezalogowany

Wpisanie słowa do INPUTU ..jakieś słowo i jeżeli takie tam wpisze to utworzyły się ei nowy div w divie kwadrat

2 odpowiedzi

odpowiedź 3 marca 2024 przez Bart3on Użytkownik (620 p.)

Chcesz funkcje gdzie dajesz jako parametr slowo i na bazie tego slowa bedzie utworzony element DOM tak?

komentarz 3 marca 2024 przez niezalogowany

Prawdopodobnie.nie jestem na poziomie dom więc pewny nie jestem ale dzięki

komentarz 3 marca 2024 przez Bart3on Użytkownik (620 p.)

div jest elementem drzewa DOM. DOM to wszystkie elementy na stronie internetowej wiec div z id kwadrat i kazdy jego element jest jak najbardziej elementem DOM.

komentarz 3 marca 2024 przez niezalogowany

Rozumiem ale jeżeli nie masz nic przeciwko wytłumaczył byś mi jak go używać?

komentarz 3 marca 2024 przez Bart3on Użytkownik (620 p.)

const square = document.getElementById('kwadrat');
const submitBtn = document.getElementById('createNewElementBtn');
const input = document.getElementById('poleInput')


function utworz(elementName) {
  const newElement = document.createElement(elementName);
  square.appendChild(newElement);
} 

submitBtn.addEventListener('click', () => {
  const newDOMElement = input.value;
  utworz(newDOMElement);
} )

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<title>TWORZENIE DIVÓW</title>
</head>
<body id="body">
<input type="text" id="poleInput"/>
<input id="createNewElementBtn" type="button" value="wyslij"/>
<div id="kwadrat">

</div>
<script src="mechanika.js" ></script>
</body>
</html>

komentarz 3 marca 2024 przez niezalogowany

Dziękuję bardzo nadal muszę się nauczyć trochę ale już wiencej umiem

komentarz 3 marca 2024 przez Bart3on Użytkownik (620 p.)

Nie ma za co zawsze kazdy kiedys zaczynal :)

odpowiedź 4 marca 2024 przez VBService Ekspert (256,600 p.)

Proponuje rozwiązanie z użyciem

document.querySelector()
document.querySelectorAll()
element.innerHTML
Łączenie tekstu (string) ze zmiennymi (Interpolacja stringów)

[ pełny kod przykładu on-line ]

    <input type="text" id="pole-input" value="nowy div">
    <button type="button" id="wykonaj-button">wykonaj</button>

    <div id="kwadrat"></div>

#kwadrat {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
#kwadrat div {
  width: 100px;
  height: 100px;
  border: 2px solid red;
}

const wykonaj_button = document.querySelector('#wykonaj-button');
wykonaj_button.addEventListener('click', utworz);

function utworz() {
  const kwadrat = document.querySelector('#kwadrat');
  const ile_kwadraty = kwadrat.querySelectorAll('div').length;
  const MAKSYMALNA_KWADRATY = 15;
  
  if (ile_kwadraty >= MAKSYMALNA_KWADRATY) {
    alert(`Utworzyłeś maksymalną ilość kwadratów (${MAKSYMALNA_KWADRATY})`);
    return;
  }
  
  const value = document.querySelector('#pole-input').value.trim();  
  if (value.toLowerCase() === 'nowy div') {
    kwadrat.innerHTML += '<div></div>';
  }
}

komentarz 4 marca 2024 przez niezalogowany

Też dziękuję

komentarz 4 marca 2024 przez niezalogowany

I to bardzo

Podobne pytania

0 głosów

2 odpowiedzi 218 wizyt

Usunięcie diva po wpisaniu słowa

pytanie zadane 19 marca 2024 w JavaScript przez niezalogowany

0 głosów

1 odpowiedź 285 wizyt

JAK ZMIENIC CZĄNKE DIVA PO WPISANIU TEXT W JS

pytanie zadane 2 marca 2024 w JavaScript przez niezalogowany

0 głosów

1 odpowiedź 211 wizyt

Utworzenie pliku Java po wpisaniu w cmd: javac Main.java

pytanie zadane 29 października 2020 w Java przez Jedwab Użytkownik (550 p.)

...