Dodawanie nowych pól tekstowych

pytanie zadane 25 marca 2017 w JavaScript przez bugs55 Obywatel (1,090 p.)
edycja 25 marca 2017 przez bugs55

Cześć.
Piszę stronę do losowania tytułów książek. Na tej stronie znajduje się guzik do dodawania inputów tekstowych. Kiedy dodaje nowe pola, po uzupełnieniu 2 domyślnych, to zawartość tych pierwszych kasuje się. Chciałbym jakoś temu zapobiec.
Proszę o pomoc ;)


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>What to read next?</title>
	<link rel="stylesheet" href="style.css">
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
	<div id="container-head" class="container-fluid">
		<div id="header">WHAT TO READ NEXT?</div>
		<div id="zz">
			<div id="txt">Wylosuj swoją następną książkę</div>
			<div id="down"><span class="glyphicon glyphicon-chevron-down"></span></div>
		</div>
	</div>
	<div class="container-fluid">
			<div class="container pad" id="opis">
				<h1 class="tyt">Gdzie jestem?</h1>
				<p id="o">Skończyłeś czytać książkę i nie wiesz na którą następnie się zdecydować? Pozwól, że nasz zaawansowany bot z napędem jonicznym oparty na skomplikowanych algorytmach i skryptach dokona wyboru za Ciebie!</p>
			</div>
	</div>
	<div id="wpisz" class="container-fluid panel-con">
			<div class="container pad">
				<h1 id="tyt2" class="tyt">Po prostu wpisz tytuły!</h1>
				<div id="ile" class="form-group form-group-lg">
					<input type="text" class="form-control inputs">
					<input type="text" class="form-control inputs">
				</div>
				<div id="przyciski" class="row container">
					<div id="dodaj" class="col-sm-6" onclick="dodaj()"><span class="glyphicon glyphicon-plus"></span> Dodaj</div>
					<div id="usun-disactive" class="col-sm-5 col-sm-offset-1 gz"><span class="glyphicon glyphicon-remove"></span> Usuń</div>
				</div>
				<div class="row" id="guzik"><button type="button" id="losuj" class="btn btn-primary col-xs-4 col-xs-offset-4" onclick="rob()">Losuj!</button></div>
				<div id="wygrana" class="nie">
					Losowanie wygrywa...<br>
					<h2 id="tyt-wyg">Tytuł</h2>
					Nie trać więcej czasu, bierz i czytaj! ;)
				</div>
			</div>
	</div>
	<div class="container-fluid panel-con">
		<div class="container pad">
			<h1 class="tyt" id="tyt3">Twórcy</h1>
			<div id="mik" class="panel-con">
				<div class="row container">
					<div id="kon" class="col-sm-3 col-sm-offset-3">
		               <div class="zdj" id="kon-zdj"></div>
		               <div class="imie">Konrad</div>
		           </div>
		           <div id="mac" class="col-sm-3">
		               <div class="zdj" id="mac-zdj"></div>
		               <div class="imie">Maciek</div>
		           </div>
	           </div>
			</div>
			<div id="zap">
				<h3 id="zap2">Zajrzyj na naszego książkowego bloga!</h3>
				<div id="mikbooks-zdj"><a href="http://mikbooks.esy.es/"><img src="zdj/mikbooks.png"></a></div>
			</div>
		</div>
	</div>
</body>
</html>

<script type="text/javascript">

	function dodaj()
	{
		document.getElementById("ile").innerHTML += "<input type='text' class='form-control inputs'>";
		spr();
	}

	function usun()
	{
		document.getElementsByClassName("inputs")[document.getElementById("ile").children.length-1].remove();
		spr();
	}

	function spr(){

		var i = document.getElementsByClassName("gz")[0];

		if (document.getElementById("ile").children.length>2) {
			i.id = "usun";
			i.addEventListener("click",usun);
		}

		if (document.getElementById("ile").children.length==2) {
			i.id = "usun-disactive";
			i.removeEventListener("click",usun);
		}
	}

	function rob(){
		var ile = document.getElementById("ile").children.length;
		var pula = new Array();

		for(var j=0; j<=ile-1; j++)
		{
			pula[j] = document.getElementsByClassName("inputs")[j].value;
		}

		for(var j=0; j<=ile-1; j++)
		{
			if (pula[j]=="") pula.splice(j,1);
			ile = pula.length;
		}
		
		var w = Math.floor(Math.random() * (ile));
		console.log(w);

		document.getElementById("tyt-wyg").innerHTML = pula[w];
		document.getElementById("wygrana").classList.remove("nie");
	}
</script>

komentarz 25 marca 2017 przez Codeboy Stary wyjadacz (12,120 p.)

dodaj cały swój kod, bo to zależy od tego czym jest element o id "ile"

komentarz 25 marca 2017 przez bugs55 Obywatel (1,090 p.)

Dodane ;)

1 odpowiedź

odpowiedź 25 marca 2017 przez Codeboy Stary wyjadacz (12,120 p.)

Poczytaj o append()

W twoim przypadku będzie wyglądać to tak:

function dodaj() {  
  var parent = document.getElementById("ile");
  var input = document.createElement("input");
  input.classList.add("form-control");
  input.classList.add("inputs");
  parent.append(input);
}

PS: Poza tym masz źle umieszczone <link> i <script>. Linki powinny być w <head> a skrypty na koniec w <body>. Nie używa się tez onclcków też, od tego jest AddEventListener. No ogólnie sporo do poprawy ;)