Zmienna z JS do kodu HTML

Witam. Mam problem otóż chcę zrobić dynamiczny pasek postępu. W zależności co wpiszę w title="" to tyle postępu będzie miał mój pasek np dla title="10%" pasek postępu będzie wypełniony w 10%. Jednak to jest statyczne rozwiązanie. Chciałbym aby bez odświeżania strony ten pasek sam się dalej zapełniał. Do tego napisałem kod javascript i umieściłem go w moim kodzie html lecz nie działa. Męczę już się z tym pół dnia. Mógłby ktoś pomóc?

<div class="pWrapper"><div class="progressG" title=
		<span id="progres"></span>
		<script type="text/javascript">
			p=document.getElementById('progres')
			function odlicz(p,procent)
			{
				p.innerHTML="\"" + procent + "%\""
				var ppp = procent
				if(procent == 100)
				{
						procent = 0
				}
				if(procent < 100)
				{
					setTimeout(function(){odlicz(p,++procent)},1e3)
				}
			}
			odlicz(document.getElementById('progres'),0)
		</script>
		></div></div>

Zamiast zapełniać się pasek postępu to poniżej jego wyświetla mi się "1%" potem "2%" itd czyli liczy ale niestety ta wartość nie jest jakby w title=""...

O średniku słyszał?

w javascript nie jest chyba wymagany. jeśli jest to sorry ale dopiero zaczynam naukę tego języka. Jednak to nie rozwiązuje mojego problemu ;(

Unlimited napisał(a)

w javascript nie jest chyba wymagany

Skoro nie jesteś pewny, dlaczego nie sprawdzisz?

Jednak to nie rozwiązuje mojego problemu

Co pokazuje konsola błędów w przeglądarce?

Średniki

W wielu językach programowania, między innymi w C/C++ używanie średnika jest niezbędnym elementem zakończenia linii. W przypadku Javascriptu ta sytuacja nie jest przymusowa. By zakończyć instrukcję bieżącej linii wystarczy przejść do nowej, opcjonalnie można użyć średnik. W przypadku skryptozakładek średnik oddziela nowe instrukcje kodu bez przechodzenia do nowej linii.

Źródło:
http://pl.wikibooks.org/wiki/JavaScript/Sk%C5%82adnia_j%C4%99zyka

pierwszy to błąd reszta ostrzeżenia jednak z tej linijki co chcę mieć ten pasek postępu to nie ma nic:

The value "device-width;" for key "width" is invalid, and has been ignored. index.html:5
The value "1.0;" for key "initial-scale" was truncated to its numeric prefix. index.html:5
The value "1.0;" for key "maximum-scale" was truncated to its numeric prefix. index.html:5
The value "0;" for key "user-scalable" was truncated to its numeric prefix. index.html:5
Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead. index.html:5
body.scrollTop is deprecated in strict mode. Please use 'documentElement.scrollTop' if in strict mode and 'body.scrollTop' only if in quirks mode. jquery.min.js:4
body.scrollLeft is deprecated in strict mode. Please use 'documentElement.scrollLeft' if in strict mode and 'body.scrollLeft' only if in quirks mode. jquery.min.js:4
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.min.js:3

Oczywiście nie chcę się wymądrzać bo wiem że mało wiem na temat javascript dlatego proszę o jakąś pomoc. Pozdrawiam

Edit: dołączam jeszcze screena z wynikiem. procenty idą sobie w górę ładnie tylko zamiast ta wartość być w title= to jest po prostu wyświetlana...

Unlimited napisał(a)

W wielu językach programowania, między innymi w C/C++ używanie średnika jest niezbędnym elementem zakończenia linii. W przypadku Javascriptu ta sytuacja nie jest przymusowa (...)

Tia, ale prewencyjnie i tak lepiej je stawiać :P

Error parsing a meta element's content: ';' is not a valid key-value pair separator. Please use ',' instead. index.html:5

Cóż to?

to jest 5 linijka ale wątpię by miało to jakieś znaczenie w tym co chcę osiągnąć:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

O - sądziłem, że to coś innego, ale na pierwszy rzut oka ta linijka wygląda jednak okej.
Może wrzuć aktualny kod JS (ten ze średnikami), to pomyślimy dalej - a nuż w tym masz jakiś błąd :P

W zależności co wpiszę w title="" to tyle postępu będzie miał mój pasek

W swoim kodzie zmieniasz jedynie innerHTML na inną wartość: p.innerHTML="\"" + procent + "%\"".

<div class="pWrapper"><div class="progressG" title=
		<span id="progres"></span>
		<script type="text/javascript">
			p=document.getElementById('progres');
			function odlicz(p,procent)
			{
				p.innerHTML="\"" + procent + "%\"";
				var ppp = procent;
				if(procent == 100)
				{
						procent = 0;
				}
				if(procent < 100)
				{
					setTimeout(function(){odlicz(p,++procent)},1e3);
				}
			}
			odlicz(document.getElementById('progres'),0);
		</script>
		></div></div>

screen: podejrzewam że może to być wina tego otwierania ponieważ on chyba rozwala zamknięcie diva w ostatniej lini (pierwszy znak)
zamyka się w linii 123 zamiast w 141

To w czym mam wypisać tą wartość jak nie w innerHTML?

Wydaje mi się, czy nie zakańczasz div w 112 linii? Jest title= i nic dalej (chyba że po prostu ucięło kod?).

ten div kończy się w 141 linii bo w title= muszą być te procenty które wypisuje w 128 linii.

<div class="pWrapper"><div class="progressG" title="XXXXXXXXX"></div></div>

w miejscu "XXXXXXXXX" znajduje się ten javascript

po prostu zamiast np "10%" w title=, dałem kod javascript który wypisuje wartości od 0-100%. W ten sposób chciałem osiągnąć dynamiczne zapełnianie się tego pola lecz zamiast te wartości wpisywać się w title= wpisują się inaczej tak jak na tym screenie:

Przykładowo dla title="75%" progres wygląda tak:

nie potrafię już tego lepiej wytłumaczyć

Czyli w "title" wpakowałeś kod HTML i JS?

Można to zrobić ładniej (rozwiązanie zanim nie rozpowszechni się <progress>)

http://codepen.io/hauleth/pen/rdupc

Poradziłem sobie w ten sposób:

<div class="pWrapper"><div id="amul" class="progressG"></div></div>
		<span id="progres"></span>
		<script type="text/javascript">
			p=document.getElementById('progres');
			function odlicz(p,procent)
			{
				if(procent == 100)
				{
						procent = 0;
				}
				if(procent < 100)
				{
					setTimeout(function(){odlicz(p,++procent)},1e3);
				}
				document.getElementById("amul").title = procent + "%";
			}
			odlicz(document.getElementById('progres'),50);
		</script>

Jednak pomimo pojawienia się progresu w 50%, a zmienna procent się zwiększa to progres już nie i stoi non stop na 50% (zacząłem odliczanie od 50%). Można jakoś aktualizować div'a (dokładnie tego w 1-szej linijce)? Podejrzewam że on się nie aktualizuje i dlatego stoi na 50% pomimo iż zmienna procent w javascript się zwiększa.

title na 100% się zwiększa ponieważ po najechaniu myszką wyskakuje dymek i zmienia się na nim wartość w % tylko ten pasek postępu stoi...

Coś kombinujesz - nie zmieniasz innerHTML spana, no to jak ma on cokolwiek wyświetlać...

<div class="pWrapper">
	<div id="amul" class="progressG"></div>
</div>
<span id="progres"></span>
<script type="text/javascript">

	function odlicz(p, procent) {
		if (procent >= 100) procent = 0;

		setTimeout(function () { odlicz(p, ++procent) }, 1e3);
		document.getElementById('progres').innerHTML = document.getElementById("amul").title = procent + "%";
	}
	odlicz(document.getElementById('progres'), 50);
</script>

ŁF napisał(a):

Coś kombinujesz - nie zmieniasz innerHTML spana, no to jak ma on cokolwiek wyświetlać...

<div class="pWrapper">
	<div id="amul" class="progressG"></div>
</div>
<span id="progres"></span>
<script type="text/javascript">

	function odlicz(p, procent) {
		if (procent >= 100) procent = 0;

		setTimeout(function () { odlicz(p, ++procent) }, 1e3);
		document.getElementById('progres').innerHTML = document.getElementById("amul").title = procent + "%";
	}
	odlicz(document.getElementById('progres'), 50);
</script>

niestety nic to nie dało. teraz zmieniające procenty wyświetląją się pod progresem tak jak tutaj: oczywiście sam progres jest wypełniony do 50% i stoi w miejscu. screen wzięty z poprzedniego postu bo nie ma sensu robić nowego

Sposób winerfresh działa. Dzięki