Logowanie

Utworzenie diva po wpisaniu słowa

pytanie zadane 3 marca w JavaScript przez Infos Użytkownik (650 p.)
edycja 3 marca przez Infos

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 przez Iei Obywatel (1,950 p.)

Ktoś rozumie o co tutaj chodzi?

komentarz 3 marca przez Infos Użytkownik (650 p.)

O co chodzi ?

komentarz 3 marca przez AnimaVillis Stary wyjadacz (11,510 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 przez Infos Użytkownik (650 p.)

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 przez AnimaVillis Stary wyjadacz (11,510 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 przez Infos Użytkownik (650 p.)

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 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 przez Infos Użytkownik (650 p.)

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

komentarz 3 marca 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 przez Infos Użytkownik (650 p.)

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

komentarz 3 marca 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 przez Infos Użytkownik (650 p.)

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

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

Nie ma za co zawsze kazdy kiedys zaczynal :)

odpowiedź 4 marca przez VBService Ekspert (253,420 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 przez Infos Użytkownik (650 p.)

Też dziękuję

komentarz 4 marca przez Infos Użytkownik (650 p.)

I to bardzo

Podobne pytania

0 głosów

2 odpowiedzi 110 wizyt

Usunięcie diva po wpisaniu słowa

pytanie zadane 19 marca w JavaScript przez Infos Użytkownik (650 p.)

0 głosów

1 odpowiedź 105 wizyt

JAK ZMIENIC CZĄNKE DIVA PO WPISANIU TEXT W JS

pytanie zadane 2 marca w JavaScript przez Infos Użytkownik (650 p.)

0 głosów

1 odpowiedź 148 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.)

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...