webForum webForum sponsras med lina och serverplats av Binero AB

Gå tillbaka   webForum > Utveckling > Webbutveckling > Javascript

Javascript Här diskuteras det som rör Javascript, AJAX, DOM & DHTML.

Svar
 
Trådverktyg Visningsalternativ
Äldre 2001-10-24, 15:05   #1
tlee
Medlem
 
Registrerad: 2001-03-19
Ort: -
Inlägg: 293
Lösningar: 0
fråga byta ut en text snutt vid OnChange()

Tjena!

När jag gör en OnChange() så vill jag att en textrad på sidan skall ändras, alltså ingen <textara> eller <input> fält
utan bara vanlig text, texten som skall uppdateras är:

<div name=txt>detta är textraden som skall ändras</div>

Och den skall ersättas med:
<a href=# OnClick=javascript:OpenWindow('more_info.asp?ID=123');>Mer Info</A>

Kod:
<html>
<head>
<SCRIPT LANGUAGE = JavaScript>
<!--

function OpenWindow(Url)
{
window.open(Url,'themanwiththeplan','toolbar=no,location=no,directories=no,status=no,menubar=no
,resizable=yes,copyhistory=no,scrollbars=1,width=560,height=400');
}
//-->
</SCRIPT>
</head>
</body>
<div name=txt>detta är textraden som skall ändras</div>
<br>
</body>
</html>
Är ni med på vad jag menar?

Hur kan ett sådant exempel se ut?

/t

------------------
the man with the golden bottle..

[Redigerat av tlee den 29 okt 2001]
__________________
the man with the golden bottle..
tlee besöker inte forumet just nu   Svara med citat
Äldre 2001-10-24, 18:32   #2
Jojoxx
Moderator
 
Registrerad: 2000-06-18
Inlägg: 4 195
Lösningar: 246
meddelande

Kod:
<script language="JavaScript" type="text/javascript">
function writeit(Id,string){
	if (document.all){
		document.all[Id].innerHTML = string;
	} else if (document.getElementById){
		jxdocrange = document.createRange();
		jxdocrange.setStartBefore(document.getElementById(Id));
		while (document.getElementById(Id).hasChildNodes()){
			document.getElementById(Id).removeChild(document.getElementById(Id).lastChild);
		}
		document.getElementById(Id).appendChild(jxdocrange.createContextualFragment(string));
	}
}
</script>
<div id="txt">detta är textraden som skall ändras</div>
anropas ex. från onChange med onChange="writeit('txt','Ny text');"

------------------
/ J
__________________
/ Jojoxx

"Always remember that you're unique and special, just like everyone else..."
Jojoxx besöker inte forumet just nu   Svara med citat
Äldre 2001-10-25, 12:40   #3
tlee
Medlem
 
Registrerad: 2001-03-19
Ort: -
Inlägg: 293
Lösningar: 0
fråga

Tack för hjälpen Jojoxx, känns bra att du ställer upp!

Jag får följande felmeddelande:

'document.all[...]' är null eller inte ett objekt

jag anropar såhär..

Kod:
<SELECT NAME=sel1 onChange="writeit('ändra denna texten','nu är det denna texten')";>
</SELECT>
ändra denna texten
allting ligger inom samma <form> tagg.
__________________
the man with the golden bottle..
tlee besöker inte forumet just nu   Svara med citat
Äldre 2001-10-25, 14:11   #4
Jojoxx
Moderator
 
Registrerad: 2000-06-18
Inlägg: 4 195
Lösningar: 246
meddelande

Du sag att jag andrat <div name=txt> till <div id="txt">?

------------------
/ J
__________________
/ Jojoxx

"Always remember that you're unique and special, just like everyone else..."
Jojoxx besöker inte forumet just nu   Svara med citat
Äldre 2001-10-26, 14:12   #5
tlee
Medlem
 
Registrerad: 2001-03-19
Ort: -
Inlägg: 293
Lösningar: 0
meddelande

Hej alla glada!

Nu funkar det, men efter att jag har varit inne och grejat och lagt till lite grejer
så funkar det inte alls..

<OPTION VALUE='190:128P4:Dimm PC133 128Mb 3,3v168p'>Dimm PC133 128Mb 3,3v168p</OPTION>

Ur denna stringen skall jag plocka ut priset, artikelnr och artikelnamn, dom är separerade i den
ordningen med kolon, och sen sätta samman till en sträng som ser ut ungefär såhär:

<a href=more_info.asp?Artikelnr=128P4>Dimm PC133 128Mb 3,3v168p</a>

och när man väljer någon i rullmenyn skall strängen placeras inom div taggen:

<div id="txt"><a href=more_info.asp?Artikelnr=128P4>Dimm PC133 128Mb 3,3v168p</a></div>

och sen när man väljer en ny rullgardin så skrivs det gamla värdet över med en ny länk(värdet i string).

Nedan är koden, jag har ändrat i jojoxx writeit() funktion och laggt in den i
Calc() funktionen.. men nu funkar den inte..

Felet jag får just nu är:

'document.all[...]' är null eller inte ett objekt

Och sen hur jag plockar ut artikelnr och artikelnamn det vette fåglarna, kan någon hjälpa till med det?

/t


Kod:
<HTML>
<HEAD>
<script lanugage=javascript>
<!--

function Calc(iMax, Id){

// Fixa inmatade ',' decimaltecken till '.'

var slask="";
apa = document.f_Conf.txtPercent.value;
for(var i=0;i<=apa.length;i++) {
    if (apa.charAt(i)==',') { slask=slask+'.';
    } else { slask=slask+apa.charAt(i); }
}


var iResult=0,iArt="",i,selValue,prize, intPercent;
for(i=1; i<=iMax; i++){
selValue=eval("document.f_Conf.sel"+i+".options[document.f_Conf.sel"+i+".selectedIndex].value")
iArt+=eval("document.f_Conf.sel"+i+".selectedIndex");
prize=parseFloat(selValue.split(":"));
if(isNaN(prize)){ prize=0; }
iResult+=prize

// byta ut texten ..
// hur får jag ut ArticleNr och ArtikelNamnet från strängen???????????????
strArticleNr = selValue.split(":"));
strArticleName = selValue.split(":"));

string = "<a href=more_info.asp?ID="+strArticleNr+">"+strArticleName+"</a>"

if (document.all){
document.all[Id].innerHTML = string;
} else if (document.getElementById){
jxdocrange = document.createRange();
jxdocrange.setStartBefore(document.getElementById(Id));
while (document.getElementById(Id).hasChildNodes()){
document.getElementById(Id).removeChild(document.getElementById(Id).lastChild);
}
document.getElementById(Id).appendChild(jxdocrange.createContextualFragment(string));
}

}
document.f_Conf.txtResult.value = iResult;
document.f_Conf.txtArticleNr.value = iArt;


intPercent = parseFloat(slask);

if (isNaN(intPercent)) {
intPercent=100;
} else {
intPercent += 100;
}
document.f_Conf.txtResultPercent.value = (intPercent * parseFloat(document.f_Conf.txtResult.value))/100;

}
-->
</script>

</HEAD>

<BODY background=/Images/background-2000x050.gif onload=javascript:Calc('15');>
<form method=post action=show_conf.asp name=f_Conf>
<table border=0 cellpadding=2 cellspacing=2 width=600>
<tr vAlign=top>
<TD><TABLE border=1 cellpadding=5 cellspacing=0><TR>
<TD>Grundsystem</TD>
</TR>
<TR><TD>
<SELECT NAME=sel1 onChange=javascript:Calc('5','txt');>
<OPTION SELECTED VALUE='770:CP900:Cpu Celeron 900MHz 128K'>Cpu Celeron 900MHz 128K</OPTION>
<OPTION VALUE='880:CP950:Cpu Celeron 950MHz 128K'>Cpu Celeron 950MHz 128K</OPTION>
<OPTION VALUE='1050:CP10G:Cpu Celeron 1000MHz 128K'>Cpu Celeron 1000MHz 128K</OPTION>
<OPTION VALUE='1710:P3866:Cpu Pentium III 866MHz'>Cpu Pentium III 866MHz</OPTION>
<OPTION VALUE='2310:P310G:Cpu Pentium III 1000MHz'>Cpu Pentium III 1000MHz</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel2 onChange=javascript:Calc('5','txt');>
<OPTION VALUE='190:128R8:Rambus minne PC800 128MB'>Rambus minne PC800 128MB</OPTION>
<OPTION VALUE='190:128P4:Dimm PC133 128Mb 3,3v168p'>Dimm PC133 128Mb 3,3v168p</OPTION>
<OPTION VALUE='190:2563E:Dimm PC133 256Mb ECC 168p'>Dimm PC133 256Mb ECC 168p</OPTION>
<OPTION VALUE='190:256P4:Dimm PC133 256Mb 3,3v168p'>Dimm PC133 256Mb 3,3v168p</OPTION>
<OPTION SELECTED VALUE='140:64MP4:Dimm PC133  64Mb 3,3v168p'>Dimm PC133  64Mb 3,3v168p</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel3 onChange=javascript:Calc('5','txt');>
<OPTION VALUE='190:HG307:Hårddisk IDE 30Gb 7200rpm'>Hårddisk IDE 30Gb 7200rpm</OPTION>
<OPTION VALUE='190:HG400:Hårddisk IDE 40Gb 7200rpm'>Hårddisk IDE 40Gb 7200rpm</OPTION>
<OPTION VALUE='190:HG600:Hårddisk IDE 60Gb 7200rpm'>Hårddisk IDE 60Gb 7200rpm</OPTION>
<OPTION SELECTED VALUE=>Utan Hårddisk</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel4 onChange=javascript:Calc('5','txt');>
<OPTION VALUE='190:ETHNP:Ethernetkort PCI Combo'>Ethernetkort PCI Combo</OPTION>
<OPTION VALUE='0:ETHTP:Ethern.kort PCI 10/100 TP'>Ethern.kort PCI 10/100 TP</OPTION>
<OPTION SELECTED VALUE=>Inget Nätverk</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel5 onChange=javascript:Calc('5','txt');>
<OPTION SELECTED VALUE='190190:CE600:Miditower chassi ATX'>Miditower chassi ATX</OPTION>
<OPTION VALUE='190:FK320:Semitower chassi ATX'>Semitower chassi ATX</OPTION>
</SELECT>
</TD></TR>
</TABLE></TD>
</tr>
</table>
<br>
<table border=0 cellpadding=0 cellspacing=0 width=600>
<tr>
<td width=300>Nettopris för ovanstående konfiguration är:</td><td> <input type=text name=txtResult readonly> <i> (exkl moms)</i>*</td>
</tr>
<tr>
<td width=300>Med <input type=text name=txtPercent size=2 OnChange=javascript:Calc('5','txt');> % i påslag blir det:</td><td><input type=text name=txtResultPercent readonly><i> (exkl moms)</i>*</td>
</tr>
<TR>
<td width=300>*</td><td> <input type=hidden name=txtArticleNr>*</td>
</tr>
</table>
<input type=hidden name=txtMax value=15>
<br><br>Förhandsgranska din beställning.*<input type=image value=submit src=/images/button_ok.gif>**<a href=javascript:history.go(-1);><img src="/Images/button_back.gif" border=0></A>
<input type=hidden name=txtConfigName value='Arlec dator system'>
<div id="txt"></div>
</form>
------------------
the man with the golden bottle..

[Redigerat av tlee den 29 okt 2001]
__________________
the man with the golden bottle..
tlee besöker inte forumet just nu   Svara med citat
Äldre 2001-10-29, 08:18   #6
tlee
Medlem
 
Registrerad: 2001-03-19
Ort: -
Inlägg: 293
Lösningar: 0
fråga

ingen som vet ?

------------------
the man with the golden bottle..
__________________
the man with the golden bottle..
tlee besöker inte forumet just nu   Svara med citat
Äldre 2001-10-29, 08:39   #7
Jojoxx
Moderator
 
Registrerad: 2000-06-18
Inlägg: 4 195
Lösningar: 246
meddelande


Felet ligger i onLoad-eventet i <body>-taggen.

* Det första argumentet skall 5 eftersom du inte har fler <select>-menyer.
* Det andra argumentet är helt utelämnat. Skall vara 'txt'.
* I event skall du inte använda fake-protokollet "JavaScript:".

Alltså; onLoad="Calc('5','txt')"


------------------
/ J
__________________
/ Jojoxx

"Always remember that you're unique and special, just like everyone else..."
Jojoxx besöker inte forumet just nu   Svara med citat
Äldre 2001-10-29, 09:55   #8
tlee
Medlem
 
Registrerad: 2001-03-19
Ort: -
Inlägg: 293
Lösningar: 0
glad

sådärja!.. nu funkar det.. men inte överallt utan bara på <select> nr 5.

Detta har väl med for loopen antar jag eftersom den loopar igenom alla <select>s till den sista vilket är den femte. Kan man på något sätt få den att välja den sista <select> som man gjorde ett nytt val i ?

Jag bifogar fungerande den fungerande koden.

Kod:
<HTML>
<HEAD>
<script lanugage=javascript>
<!--

function Calc(iMax, Id){

// Fixa inmatade ',' decimaltecken till '.'
var slask="";
apa = document.f_Conf.txtPercent.value;
for(var i=0;i<=apa.length;i++){
if (apa.charAt(i)==',') { slask=slask+'.'; }
else { slask=slask+apa.charAt(i); }
}

// deklarera variabler

var iResult=0,iArt="",i,selValue,prize, intPercent;

// loopa igenom alla <select>:s och hämta värdena.

for(i=1; i<=iMax; i++){
selValue=eval("document.f_Conf.sel"+i+".options[document.f_Conf.sel"+i+".selectedIndex].value")
iArt+=eval("document.f_Conf.sel"+i+".selectedIndex");

// stycka upp och smäll in i en array

var arr_Main = selValue.split(":");
prize=parseFloat(arr_Main[0]);
strArticleNr = arr_Main[1];
strArticleName = arr_Main[2];

// baka ihop till en länksträng

string = "<a href=# OnClick=OpenWindow('more_info.asp?ID="+strArticleNr+"');>"+strArticleName+"</a>";

if(isNaN(prize)){ prize=0; }
iResult+=prize

// byta ut texten inom <div> taggarna med värdet i string .

if (document.all){
document.all[Id].innerHTML = string;
} else if (document.getElementById){
jxdocrange = document.createRange();
jxdocrange.setStartBefore(document.getElementById(Id));
while (document.getElementById(Id).hasChildNodes()){
document.getElementById(Id).removeChild(document.getElementById(Id).lastChild);
}
document.getElementById(Id).appendChild(jxdocrange.createContextualFragment(string));
}

}

// skriv ut priset och artikelnumret

document.f_Conf.txtResult.value = iResult;
document.f_Conf.txtArticleNr.value = iArt;


// skall det vara påslag fixa det.

intPercent = parseFloat(slask);

if (isNaN(intPercent)) {
intPercent=100;
} else {
intPercent += 100;
}
document.f_Conf.txtResultPercent.value = (intPercent * parseFloat(document.f_Conf.txtResult.value))/100;

}

function OpenWindow(Url)
{
window.open(Url,'themanwiththeplan','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=yes,copyhistory=no,scrollbars=1,width=560,height=400');
}

-->
</script>

</HEAD>

<BODY background=/Images/background-2000x050.gif onload="Calc('5','txt');">
<form method=post action=show_conf.asp name=f_Conf>
<table border=0 cellpadding=2 cellspacing=2 width=600>
<tr vAlign=top>
<TD><TABLE border=1 cellpadding=5 cellspacing=0><TR>
<TD>Grundsystem</TD>
</TR>
<TR><TD>
<SELECT NAME=sel1 onChange="Calc('5','txt');">
<OPTION SELECTED VALUE='770:CP900:Cpu Celeron 900MHz 128K'>Cpu Celeron 900MHz 128K</OPTION>
<OPTION VALUE='880:CP950:Cpu Celeron 950MHz 128K'>Cpu Celeron 950MHz 128K</OPTION>
<OPTION VALUE='1050:CP10G:Cpu Celeron 1000MHz 128K'>Cpu Celeron 1000MHz 128K</OPTION>
<OPTION VALUE='1710:P3866:Cpu Pentium III 866MHz'>Cpu Pentium III 866MHz</OPTION>
<OPTION VALUE='2310:P310G:Cpu Pentium III 1000MHz'>Cpu Pentium III 1000MHz</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel2 onChange="Calc('5','txt');">
<OPTION VALUE='190:128R8:Rambus minne PC800 128MB'>Rambus minne PC800 128MB</OPTION>
<OPTION VALUE='190:128P4:Dimm PC133 128Mb 3,3v168p'>Dimm PC133 128Mb 3,3v168p</OPTION>
<OPTION VALUE='190:2563E:Dimm PC133 256Mb ECC 168p'>Dimm PC133 256Mb ECC 168p</OPTION>
<OPTION VALUE='190:256P4:Dimm PC133 256Mb 3,3v168p'>Dimm PC133 256Mb 3,3v168p</OPTION>
<OPTION SELECTED VALUE='140:64MP4:Dimm PC133  64Mb 3,3v168p'>Dimm PC133  64Mb 3,3v168p</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel3 onChange="Calc('5','txt');">
<OPTION VALUE='190:HG307:Hårddisk IDE 30Gb 7200rpm'>Hårddisk IDE 30Gb 7200rpm</OPTION>
<OPTION VALUE='190:HG400:Hårddisk IDE 40Gb 7200rpm'>Hårddisk IDE 40Gb 7200rpm</OPTION>
<OPTION VALUE='190:HG600:Hårddisk IDE 60Gb 7200rpm'>Hårddisk IDE 60Gb 7200rpm</OPTION>
<OPTION SELECTED VALUE=>Utan Hårddisk</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel4 onChange="Calc('5','txt');">
<OPTION VALUE='190:ETHNP:Ethernetkort PCI Combo'>Ethernetkort PCI Combo</OPTION>
<OPTION VALUE='0:ETHTP:Ethern.kort PCI 10/100 TP'>Ethern.kort PCI 10/100 TP</OPTION>
<OPTION SELECTED VALUE=>Inget Nätverk</OPTION>
</SELECT>
</TD></TR>
<TR><TD>
<SELECT NAME=sel5 onChange="Calc('5','txt');">
<OPTION SELECTED VALUE='190190:CE600:Miditower chassi ATX'>Miditower chassi ATX</OPTION>
<OPTION VALUE='190:FK320:Semitower chassi ATX'>Semitower chassi ATX</OPTION>
</SELECT>
</TD></TR>
</TABLE></TD>

</tr>
</table>


<br>
<table border=0 cellpadding=0 cellspacing=0 width=600>
<tr>
<td width=300>Nettopris för ovanstående konfiguration är:</td><td> <input type=text name=txtResult readonly> <i> (exkl moms)</i>*</td>
</tr>
<tr>
<td width=300>Med <input type=text name=txtPercent size=2 OnChange="Calc('5','txt');"> % i påslag blir det:</td><td><input type=text name=txtResultPercent readonly><i> (exkl moms)</i>*</td>
</tr>
<TR>
<td width=300>*</td><td> <input type=hidden name=txtArticleNr>*</td>
</tr>
</table>
<input type=hidden name=txtMax value=15>
<br><br>Förhandsgranska din beställning.*<input type=image value=submit src=/images/button_ok.gif>**<a href=javascript:history.go(-1);><img src="/Images/button_back.gif" border=0></A>
<input type=hidden name=txtConfigName value='Arlec dator system'>
<div id="txt"></div>
</form>
<br><br>
/t

------------------
the man with the golden bottle..

[Redigerat av tlee den 29 okt 2001]

[Redigerat av tlee den 29 okt 2001]

[Redigerat av tlee den 29 okt 2001]
__________________
the man with the golden bottle..
tlee besöker inte forumet just nu   Svara med citat
Svar
webForum > Utveckling > Webbutveckling > Javascript

Trådverktyg
Visningsalternativ

Forumregler
Du får inte posta nya trådar
Du får inte posta svar
Du får inte bifoga filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är i GMT +1. Klockan är nu 16:05.


Powered by: vBulletin Version 3.8.6
Copyright © webForum