Polecenie dodawania przyciskiem pola do formularza

Question

Jakim poleceniem javascript utworze przycisk który będzie dodawał pola?

Przykład

Użytkownik chce dodać liczby z 3 pól ale są 2 pola. Użytkownik dodaje 3cie pole przez kliknięcie w przycisk Dodaj.

Comments

Uczę się js. Proszę o pomoc. Nie wiem gdzie jest błąd.

Po kliknięciu w przycisk nie dodaje pola w formularzu.

HTML

  <button>Add input</button>
    <br>
    <div style="width:100%">
        <input type="number" value="0" autofocus> <br><br>
        <input type="text" class="sum" placeholder="Sum" readonly>
    </div>

JS

$(document).ready(function() {
	function sum() {
		var sum = 0;
		$('input:not(.sum)').each(function(){
			sum += parseInt($(this).val());
		});
		$('.sum').val(sum);
	}
	$(document).on('keyup change', 'input:not(.sum)', function() {
		setTimeout(sum, 100);
	});
	$('button').click(function() {
		$('<input>').attr({
			'type': "number",
			'value': "0"
		}).insertAfter('input:not(.sum):last');
		sum();
	});
});

 

---

Pomóżcie mi błagam. Chce się tego nauczyć.

Answer 1

const divForInputs = document.querySelector('div');

const addInput = () => {
  const newInput = document.createElement('input');
  divForInputs.appendChild(newInput);
};

document.querySelector('button').addEventListener('click', addInput);

Hej, powyżej moja propozycja kodu, mam nadzieję, że jeszcze się przyda :)

Widzę, że przycisk masz już dodany w html, dlatego wystarczy tylko go pobrać i ustawić nasłuchiwanie. Przy tak prostym kodzie nie ma też chyba sensu korzystać z jQuery.

Answer 2

@agapoli, Twój kod wygląda spoko, ale Ja bym zmodyfikował go tak , a @Marta Długa, sama dokona wyboru  Codepen

<button>Add input</button>
<br>
<div style="width:100%">
  <input type="number" value="0" autofocus> <br><br>
  <input type="text" class="sum" placeholder="Sum" readonly>
</div>

input {
  display: block;
}

document.querySelector('button').addEventListener('click', () => {
  const divForInputs = document.querySelectorAll('div input[type="number"]');
  const newInput = document.createElement('input');
  newInput.setAttribute('type','number');
  newInput.setAttribute('value','0');
  divForInputs[divForInputs.length-1].after(newInput);
});

lub  Codepen

<button>Add input</button>
<br>
<div style="width:100%">
  <div>
    <input type="number" value="0" autofocus>
  </div>
  <br><br>  
  <input type="text" class="sum" placeholder="Sum" readonly>
</div>

input {
  display: block;
}
div div :last-child { /* Dla prezentacji ostatnio dodanego */
  background-color: green;
  color: white;
}

document.querySelector('button').addEventListener('click', () => {
  const divForInputs = document.querySelector('div div :last-child');
  const newInput = document.createElement('input');
  newInput.setAttribute('type','number');
  newInput.setAttribute('value','0');
  divForInputs.after(newInput);
});

 

Answer 3

Musisz oczywiście stworzyć taki przycisk

const btn = document.createElement('button')

potem musisz go podłączyć do struktury htmla poprzez

document.body.appendChild(btn) , zamiast document.body możesz użyć jakiegoś diva , w którym ma się znajdować przycisk