ugrás a tartalomhoz

onclick hidden mező értékadás

gyetvang · 2011. Már. 24. (Cs), 14.39
Sziasztok, kérem segítsetek.
Adott egy DIV onclick eseménnyel.
Alapvető probléma, hogy egy rejtett hiddennek kell értéket adnom.
A javascript eldönti, hogy van-e a hiddennek értéke. Ha nincs a javascript belevarázsol 3 gombot a DIV-be. HA lenyomja a felhasználó akkor beíródik helyesen az érték a hidden-be, és még ebben a függvényben el is rejtem a gombokat.
És az a bajom, hogy mikor a gombra ráklikkelek, újra meghívódik a div onclick eseménye (lefut a sulyAblakNyit függvény, és megint kegjeleníti a gombokat :( MIért? a sulyAblakCreate onLoad-ban hívódik meg. PHP-ből kapja a 

<DIV id="sulyAblak" onclick="sulyAblakNyit()"></DIV>
Forrás kód:

var KOCSI_SULY=[3.2,7.2,24];	 

function sulyAblakCreate() {
	 
	divTag=document.getElementById('sulyDiv');
	var gomb;
	for(i=0;i<KOCSI_SULY.length; i++) {
	 gomb=document.createElement("input");
	 gomb.type="button";
	 gomb.value=KOCSI_SULY[i]+" t";
	 gomb.id=KOCSI_SULY[i];
	 gomb.style.backgroundColor="#283d58";
	 gomb.style.height="30px";
	 gomb.style.width="60px";
	 gomb.style.color="white";
	 gomb.style.fontSize="16";
	 gomb.style.padding="5px";
	 gomb.style.marginLeft="5px";
	 gomb.style.border="2px white outset";
	 divTag.appendChild(gomb);
	}
	document.getElementById('3.2').onclick=function() {sulyTarol('3200');};	
	document.getElementById('7.2').onclick=function() {sulyTarol('7200');};	
	document.getElementById('24').onclick=function() {sulyTarol('24000');};	
	return false;
	}	
function sulyAblakNyit(honnan){
	obj=document.getElementById('sulyDiv').childNodes;
	if (obj.length>1) {
		for (i=0;i<KOCSI_SULY.length;i++){
			t=document.getElementById(KOCSI_SULY[i]);
			t.style.display='inline';
			}
		}
	else
		sulyAblakCreate();
	return false;	
	}
	
function sulyTarol(suly) {
	alert(suly);
	for (i=0;i<KOCSI_SULY.length;i++){
		document.getElementById(KOCSI_SULY[i]).style.display='none';
		}
	return false;	
	}
‹ menük alá kép Div-be töltés két select esetén ›
 ■
1

bubbling

ironwill · 2011. Már. 24. (Cs), 14.52
ez vagy válogathatsz is
2

HTML

Poetro · 2011. Már. 24. (Cs), 15.15
Kicsit rendbeszedtem a JavaScript-et, hogy kevesebb legyen benne a redundancia, és a hiba. Ugyanakkor nem tudom, hogyan néz ki a HTML dokumentumod, így nem tudom reprodukálni, amit te tapasztalsz.
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
<div id="sulyablak" onclick="sulyAblakNyit()">X</div>
<div id="sulyDiv"></div>
<script type="text/javascript">
var KOCSI_SULY = [3.2, 7.2, 24];

function sulyAblakCreate() {
  var divTag = document.getElementById('sulyDiv'), gomb, i;
  for (i = 0; i < KOCSI_SULY.length; i++) {
    gomb = document.createElement("input");
    gomb.type = "button";
    gomb.value = KOCSI_SULY[i] + " t";
    gomb.id = 'button' + KOCSI_SULY[i];
    gomb.style.backgroundColor = "#283d58";
    gomb.style.height = "30px";
    gomb.style.width = "60px";
    gomb.style.color = "white";
    gomb.style.fontSize = "16";
    gomb.style.padding = "5px";
    gomb.style.marginLeft = "5px";
    gomb.style.border = "2px white outset";
    divTag.appendChild(gomb);
    gomb.onclick = (function (suly) {
      return function () {
        sulyTarol(suly * 1000);
      };
    }(KOCSI_SULY[i]));
  }
  return false;
}

function sulyAblakNyit(honnan) {
  var obj = document.getElementById('sulyDiv').childNodes,
      i, t;
  if (obj.length > 1) {
    for (i = 0; i < KOCSI_SULY.length; i++) {
      t = document.getElementById('button' + KOCSI_SULY[i]);
      t.style.display = 'inline';
    }
  } else {
    sulyAblakCreate();
  }
  return false;
}

function sulyTarol(suly) {
  var i;
  alert(suly);
  for (i = 0; i < KOCSI_SULY.length; i++) {
    document.getElementById('button' + KOCSI_SULY[i]).style.display = 'none';
  }
  return false;
}
</script>
</body>
</html>
6

köszönöm

gyetvang · 2011. Már. 24. (Cs), 16.17
Köszönöm, a kód javítást.22.-33. sor érdekelne nagyon. Leírnád, hogy ott valójában mi is történik, és 32. sorban a KOCSI_SULY[i] mit szolgál. Egyébként nekem sincs semmi más a kódban, csak annyim hogy ez az egész benne van egy formban, ahol van egy onLoad esemény,ami meghívja a sulyAblakNyit() függvényt. A te általad készített kódban ha a gombra ráklikkelsz eltünnek a gombok, és ha az üres divre visszaklikkelsz, akkor megjelennek,ha ez történik akkor nálad jól működik.
8

Paraméter

Poetro · 2011. Már. 24. (Cs), 16.34
Létrehozok egy függvényt, amit meghívok a KOCSI_SULY[ i ] paraméterrel. De lesz erről hamarosan egy cikk itt a Weblaboron. Már a szerkesztőknél van, azaz (remélem) hamarosan ki is fog kerülni. Addig is, ha türelmetlen vagy, elolvashatod az eredetit. Ajánlom a Magasabb rendű függvények és Closure fejezetet.
9

Türelmes vagyok

gyetvang · 2011. Már. 24. (Cs), 17.01
Mivel már több napja bújom a netet, megvárom, és köszönöm.
3

Üdv!

Karvaly84 · 2011. Már. 24. (Cs), 15.40

document.getElementById('3.2').onclick=function() {sulyTarol('3200');};
helyett:

document.getElementById('3.2').onclick=function() {return sulyTarol('3200');};
Mivel a sulyTarol küld vissza false értéket, ami megállítja az eseményt.
Vagy a sulyTarol-ból kiveszed a return false; részt és beteszed a onclick
 esemény kezelőbe valahogy így:

document.getElementById('3.2').onclick=function() {sulyTarol('3200');return false;};
De szerintem a első jobb.
4

document.getElementById('3.2'

kuka · 2011. Már. 24. (Cs), 15.50
document.getElementById('3.2').onclick=function() {sulyTarol('3200');};
Poetro nem véletlenül írta az id-ket 'button' + KOCSI_SULY[i] formában. A 3.2 nem szabályos azonosító.

Basic HTML data types szerint:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
5

az meg a másik fele ja. de

Karvaly84 · 2011. Már. 24. (Cs), 15.53
az meg a másik fele ja. de attól még működhet, mert elvileg működik is csak a buborék jelenség kavar be, ha jól értelmeztem a kérdést, bár én is kezdő vagyok.
7

HTML Poetro

gyetvang · 2011. Már. 24. (Cs), 16.29
Átírtam a kódot, ahogy Poetro javasolta. Viszont a probléma még mindig áll. Valóban a buborék jelenség kavar be.
10

Na így fog müködni!

Karvaly84 · 2011. Már. 24. (Cs), 18.18
Közbe eszembe jutott, hogy nem elég a return false a gyári megoldásnál. tehát ezzel működik jól:

var KOCSI_SULY = [ 3.2, 7.2, 24 ];

function sulyAblakCreate() {
	divTag = document.getElementById('sulyDiv');
	var gomb;
	for (i = 0; i < KOCSI_SULY.length; i++) {
		gomb = document.createElement("input");
		with (gomb) {
			type = "button";
			value = KOCSI_SULY[i] + " t";
			id = KOCSI_SULY[i];
			with (style) {
				backgroundColor = "#283d58";
				height = "30px";
				width = "60px";
				color = "white";
				fontSize = "16";
				padding = "5px";
				marginLeft = "5px";
				border = "2px white outset";
			}
			onclick = function(suly) {
				return function sulyTarol(e) {
					e = e || window.event;
					alert(suly * 1000);
					for (i = 0; i < KOCSI_SULY.length; i++) {
						document.getElementById(KOCSI_SULY[i]).style.display = 'none';
					}
					try {
						e.stopPropagation();
					}
					catch (err) {
						e.cancelBubble = true;
					}
				};
			}(KOCSI_SULY[i]);
		}
		
		divTag.appendChild(gomb);
	}
}

function sulyAblakNyit(honnan) {
	obj = document.getElementById('sulyDiv').childNodes;
	if (obj.length > 1) {
		for (i = 0; i < KOCSI_SULY.length; i++) {
			t = document.getElementById(KOCSI_SULY[i]);
			t.style.display = 'inline';
		}
	} else sulyAblakCreate();
}
11

Fél Isten

gyetvang · 2011. Már. 24. (Cs), 22.02
Köszönöm szépen. Csak azért vagy fél Isten, hogy ne bízd el magad.
De komolyan nagyon köszönöm, a segítséget. Na az én tudásom kevés lett volna ehhez a 22.-37. sorhoz.
12

Nagyon szívesen!

Karvaly84 · 2011. Már. 25. (P), 00.14
Egyébként amit Poetro belinkelt: JavaScript függvények az mindenképp hasznos lehet a számodra. Én is csak pár hónapja ismerkedem a JavaScript-el és én is csak nem rég szereztem tudomást erről closure technikáról.