Jestem początkująca. Proszę o pomoc, podpowiedź, nakierowanie. Szukałam i nie znalazłam.
Czy w JavaScript (nie mówie o Angular i jQuery) jest funkcja, dzięki której użytkownik może dodać i usunąć pole input jak poniżej na obrazku?
W Angular jest to ng-click="addItem()
Możesz z tymi inputami zrobić wszystko co tylko chcesz (usunać, skopiować, dodać), wystarczy poszukać odpowiedniej metody
Usuwanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
Dodawanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Kopiowanie: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
Xarviel napisał(a):
Możesz z tymi inputami zrobić wszystko co tylko chcesz (usunać, skopiować, dodać), wystarczy poszukać odpowiedniej metody
Usuwanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
Dodawanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Kopiowanie: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
To chyba nie to bo ja potrzebuje coś takiego, że użytkownik ma 2 pola input żeby sumować liczby, ale on potrzebuje sumować 4 liczby, a nie 2. W związku z tym klika przycisk dodaj pole 2x. Dzięki temu może sumować 4 liczby z 4 pól.
Czy jest do tego jakaś funkcja, ale bez Api bo nie znam Api? Jestem początkująca więc proszę o prostą funkcje.
Xarviel napisał(a):
Możesz z tymi inputami zrobić wszystko co tylko chcesz (usunać, skopiować, dodać), wystarczy poszukać odpowiedniej metody
Usuwanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
Dodawanie: https://developer.mozilla.org/en-US/docs/Web/API/Element/append
Kopiowanie: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="sumaIII.js"></script>
</head>
<body>
<form id="oblicz" action="" method="post">
<div>
<h3>Suma</h3><br>
<p>A + B + ....</p>
<input type="text" id="a"><br><br>
<input type="text" id="b"><br><br>
<input type="text" id="c"><br><br>
<span id="s"> = </span><br><br>
<input type="button" value="Dodaj Pole" onclick="dodaj_pole()">
<input type="button" value="Suma" onclick="sumuj()">
<input type="reset" value="RESETUJ" onclick="resetuj()">
</div>
</form>
</body>
</html>
function sumuj() {
const a = document.getElementById('a').value;
const b = document.getElementById('b').value;
const s = parseFloat(a) + parseFloat(b); // dodawanie
document.getElementById('s').innerHTML = '=' + ' ' + s;
return false;
}
function resetuj () {
document.getElementById('s').innerHTML = '';
}
function dodaj_pole(){
const c = document.getElementById('c');
c.append('c');
}
Błagam pomóż nie działa i nie wyskakuje żaden błąd.
Marta Długa napisał(a):
<input type="text" id="a"><br><br> <input type="text" id="b"><br><br> <input type="text" id="c"><br><br>
O wiele łatwiej będzie Ci się stylizować aplikacje jeśli zamiast znaczników <br> będziesz używać innych znaczników np <div>, <section>, <aside>, <header>, <footer>, <p> ... i klas CSS
.form-row {
margin-bottom: 15px;
}
<div class="form-row">
<input type="number">
</div>
<div class="form-row">
<input type="number">
</div>
Marta Długa napisał(a):
<input type="button" value="Dodaj Pole" onclick="dodaj_pole()"> <input type="button" value="Suma" onclick="sumuj()"> <input type="reset" value="RESETUJ" onclick="resetuj()">
Tego zapisu onclick="dodaj_pole()" też nie powinnaś używać i zamiast tego proponuje przerzucić się na metodę addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Poprawiając wszystkie błędy w htmlu formularz powinien wyglądać mniej więcej tak, bez żadnych znaczników <br>, oraz atrybutów onclick="dodaj()" i tym podobnych
.
<form id="calculator">
<div class="dynamic-inputs">
<div class="form-row">
<input type="number">
</div>
<div class="form-row">
<input type="number">
</div>
</div>
<div class="form-row" id="summary"></div>
<div class="form-buttons">
<button class="btn" id="add-field-button">Dodaj pole</button>
<button class="btn" id="remove-field-button">Usuń pole</button>
<button class="btn" id="calc-button">Oblicz wynik</button>
<button class="btn" id="reset-button">Resetuj wynik</button>
</div>
</form>
Jeśli chodzi o skrypt do obsługi formularza to zrobiłem to w taki sposób
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
// Na samym wstępie pobieramy obecny formularz
const form = document.querySelector('#calculator');
// Oraz listę potrzebnych rzeczy
const dynamicInputs = form.querySelector(':scope .dynamic-inputs'); // Pojemnik z listą inputów
const summary = form.querySelector(':scope #summary'); // Podsumowanie formularza
const addButton = form.querySelector(':scope #add-field-button'); // Przycisk do dodawania
const removeButton = form.querySelector(':scope #remove-field-button'); // Przycisk do usuwania
const calcButton = form.querySelector(':scope #calc-button'); // Przycisk do obliczania sumy
const resetButton = form.querySelector(':scope #reset-button'); // Przycisk do resetowania
// Wyłączamy działanie formularza, żeby nie było zbędnego przeładowania strony po wysłaniu
form.addEventListener('click', (e) => {
e.preventDefault();
});
// Tutaj jest dodawanie nowego pola
addButton.addEventListener('click', () => {
// Tworzymy element div
const row = document.createElement('div');
// Dodajemy do niego klasę .form-row
row.className = 'form-row';
// Tworzymy element input
const input = document.createElement('input');
// Ustawiamy element na typ number
input.type = 'number';
// Dodajemy input do elementu div
row.appendChild(input);
// Dodajemy element div do listy inputów
dynamicInputs.appendChild(row);
});
// Usuwanie ostatniego pola z listy
removeButton.addEventListener('click', () => {
// Pobieramy ostatni wiersz z listy
const lastRow = dynamicInputs.querySelector(':scope .form-row:last-child');
// Sprawdzamy, czy udało się pobrać prawidłowy element
if (lastRow) {
// i jeśli tak to usuwamy
lastRow.remove();
}
});
// Dodawanie wartości z wszystkich pól
calcButton.addEventListener('click', () => {
// Początkowa wartość
let value = 0;
// Pobieramy wszystkie inputy i robimy po nich pętle
for (const input of dynamicInputs.querySelectorAll(':scope input')) {
// Wartość "input.value" jest oznaczona jako tekst, więc musimy zamienić ją na liczbę
const inputValue = parseFloat(input.value, 10);
// Sprawzamy, czy udało się zamienić na prawidłową liczbę
if (!isNaN(inputValue)) {
// i jeśli tak to dodajemy
value += inputValue;
}
}
// Na sam koniec wypisujemy wynik
summary.innerHTML = `Wynik wynosi ${value}`;
});
// Przycisk do resetowania formularza
resetButton.addEventListener('click', () => {
// Pobieramy wszystkie inputy z formularza i robimy po nich pętle
for (const input of dynamicInputs.querySelectorAll(':scope input')) {
// Kasujemy wprowadzoną liczbę
input.value = '';
}
// i kasujemy tekst z podsumowania
summary.innerHTML = '';
});
Edit: @Marta Długa tylko teraz ten skrypt musisz dodać pod koniec sekcji <body>, a nie w <head jak teraz.
<script src="..."></script>
</body>
</html>
Bo przy metodach querySelector itd wyskoczy błąd, że nie można pobrać określonego elementu.
Najpierw musi załadować się cała strona, a na samym końcu skrypt js.
addEventListener, które ułatwia wprowadzanie zmian i rozdziela wygląd strony (html, css) od zasad jej działania (js). JavaScript ma dużo więcej eventów niż tylko kliknięcie (onclick), bo jest onfocus, onmousemove, onmouseout, onmouseover, onblur, onsubmit, onload, onerror, ondblclick, oraz kilkadziesiąt innych eventów. I gdyby wprowadzać tak wszystko tym starszym sposobem to byłoby strasznie nieczytelne <div onclick="click()" onblur="blur()" onmousemove="move()" onfocus="focus()" onmouseout="out()">
@Xarviel: Proszę o pomoc, podpowiedź. Prubuje na razie tylko możliwość dodawania pól, tak aby użytkownik mógł dodać sobie tyle pól ile potrzebuje.
Niestety pomimo, że nie wyskakuje błąd nie dodają się pola. Nie wiem gdzie mam błąd.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="sumaIII.js"></script>
</head>
<body>
<form id="oblicz" action="" method="post">
<div>
<div>
<input type="number">
</div>
<div>
<input type="number" id="pole_dodaj">
</div>
</div>
<div>
<button id="dodaj_pole">Dodaj pole</button>
<button id="usun_pole">Usuń pole</button>
<button id="wynik">wynik</button>
<button id="reset">Resetuj</button>
</div>
</form>
</body>
</html>
const dodaj_pole = document.getElementById('dodaj_pole');
dodaj_pole.addEventListener('click', Dodaj_Pole);
function Dodaj_Pole(){
document.getElementById('pole_dodaj').innerHTML += pole_dodaj;
}
Marta Długa napisał(a):
<input type="number" id="pole_dodaj">function Dodaj_Pole(){ document.getElementById('pole_dodaj').innerHTML += pole_dodaj; }
Pobierasz pole input i do niego próbujesz dodać nowe pole, więc dlatego nie działa.
Nie wiem, czy wiesz, ale znacznik input nie może posiadać w sobie żadnych innych elementów HTML, tekstu i takie zapisy są nieprawidłowe
<!-- TO WSZYSTKO JEST ŹLE -->
<input>
Tutaj jakiś tekst
</input>
<input>
<p>
Tutaj jakiś tekst
</p>
</input>
<input>
<input>
</input>
Musisz dodać atrybut id, albo klasę do jakiegoś elementu blokowego np diva
<div id="dynamic-inputs"></div>
przenieść do niego dwa pierwsze pola
<div id="dynamic-inputs">
<div>
<input type="number">
</div>
<div>
<input type="number">
</div>
</div>
i teraz po stronie javascriptu napisać kod, który dodaje nowe pole do znacznika #dynamic-inputs.
Początek skryptu miałaś dobry, ale zazwyczaj używa się angielskich nazw zmiennych i w javascripcie jest taka konwencja, żeby zmienne, funkcje, metody nazywać w taki sposób addField, czyli najpierw małe litery i kolejny wyraz z dużej. Bez żadnych dziwnych kresek add_field w środku nazwy.
const dynamicFields = document.getElementById('dynamic-inputs'); // Pobieramy znacznik <div id="dynamic-inputs">
const addFieldButton = document.getElementById('dodaj_pole'); // Pobieramy przycisk <button id="dodaj_pole">
addFieldButton.addEventListener('click', addField);
function addField(){
dynamicFields.innerHTML += '<div><input type="number"></div>';
// ewentualnie w taki sposób zamiast metody innerHTML
const div = document.createElement('div');
const input = document.createElement('input');
input.type = "number";
div.appendChild(input);
dynamicFields.appendChild(div);
}
Tylko żeby to wszystko nam zadziałało to musimy zrobić jeszcze jedną rzecz. Standardowo jak wysyłamy formularz <form></form> to dana podstrona się odświeża, kasując wszystkie zmiany jakie zostały zrobione.
W javascripcie możemy to wyłączyć nadpisując event submit
const form = document.getElementById('oblicz'); // Pobieramy nasz formularz
form.addEventListener('submit', sendForm);
function sendForm(event) {
event.preventDefault(); // wyłączamy wysłanie formularza
}
Tutaj na dole masz cały kod
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="oblicz" action="" method="post">
<div id="dynamic-inputs">
<div>
<input type="number">
</div>
<div>
<input type="number">
</div>
</div>
<div>
<button id="dodaj_pole">Dodaj pole</button>
<button id="usun_pole">Usuń pole</button>
<button id="wynik">wynik</button>
<button id="reset">Resetuj</button>
</div>
</form>
<script src="sumaIII.js"></script>
</body>
</html>
const form = document.getElementById('oblicz'); // Pobieramy nasz formularz
form.addEventListener('submit', sendForm);
function sendForm(event) {
event.preventDefault(); // wyłączamy wysłanie formularza
}
//
const dynamicFields = document.getElementById('dynamic-inputs'); // Pobieramy znacznik <div id="dynamic-inputs">
const addFieldButton = document.getElementById('dodaj_pole'); // Pobieramy przycisk <button id="dodaj_pole">
addFieldButton.addEventListener('click', addField);
function addField(){
dynamicFields.innerHTML += '<div><input type="number"></div>';
// ewentualnie w taki sposób zamiast metody innerHTML
const div = document.createElement('div');
const input = document.createElement('input');
input.type = "number";
div.appendChild(input);
dynamicFields.appendChild(div);
}
@Xarviel: Dzięki. Analizuje kod.
Początek skryptu miałaś dobry, ale zazwyczaj używa się angielskich nazw zmiennych i w javascripcie jest taka konwencja, żeby zmienne, funkcje, metody nazywać w taki sposób addField, czyli najpierw małe litery i kolejny wyraz z dużej. Bez żadnych dziwnych kresek add_field w środku nazwy.
Wiem, wiem, ale niestety nie znam angielskiego i to moja pięta Achillesa, bo już piąty rok się uczę angielskiego i nie mogę się nauczyć. Mam kiepską pamięć.
Marta Długa napisał(a):
@Xarviel: Czy <input type="reset" value="Reset" /> jest dobrym sposobem na resetowanie formularza? U mnie działa.
Jest okej, jeśli potrzebujesz skasować tekst wpisany do pól formularza.
<div id="inputGroup">
</div>
document.getElementById("inputGroup").appendChild("<label>Mój dodany tekst</label>")
https://developer.mozilla.org/pl/docs/Web/API/Node/appendChild
Pokombinuj z tym
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.
Methodsna samym dole to masz pełną listę dostępnych opcji. Jeśli nie masz jeszcze stworzonej struktury formularza w html / css to zacznij może od tego?