webForumDet fria alternativet
Logga in

Miss i javascript

12 svar · 2 494 visningar · startad av PollyJuice

PollyJuiceMedlem sedan mars 2006124 inlägg
#1

Hej!

Jag håller på med en labb för en sommarkurs, och har fastnat lite. Meningen är att jag ska skapa en sida med ett formulär där man matar in vilka uppgifter man vill ha på sitt visitkort. Därefter ska ett javascript analysera uppgifterna i formuläret och skriva ut visitkortet på sidan. Jag använder mig av två olika div-taggar för detta; Inmatning och Resultat. Detta är koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/javascript; charset=iso-8859-1" />
<title>Laboration 1</title>
<script type="text/javascript">
function getElementValue()
{
var foretag = getElementById('foretag');
var efternamn = getElementById('efternamn');
var fornamn = getElementById('fornamn');
var titel = getElementById('titel');
var telefon = getElementById('telefon');
var epost = getElementById('epost');
var bgfarg = getElementById('bgfarg');
var textfarg = getElementById('textfarg');
var typsnitt = getElementById('typsnitt');
}
document.getElementById('Inmatning').style.display = 'none';
document.write("<div id=\"Resultat\"");
document.write("<div background-color:" + 'bgfarg' + "\">");
document.write("<font-family:" + 'typsnitt' + "\">");
document.write("<color:" + 'textfarg' + "\">");
document.write("<h1>" + 'foretag' + "</h1>");
document.write('fornamn' + 'efternamn' + "<br />");
document.write('titel' + "<br />");
document.write('telefon' + "<br />");
document.write('epost');
</script>

<style type="text/css">
<!--
#Inmatning {
position:absolute;
left:50px;
top:50px;
width:300px;
height:320px;
z-index:1;
background-color: #66CCFF;
}
#Resultat {
position:absolute;
left:50px;
top:50px;
width:300px;
height:320px;
z-index:2;
}
-->
</style>
</head>

<body>
<div id="Inmatning">
<h2>Beställ ditt visitkort här: </h2>
<form id="bestallning" name="bestallning" method="post" action="">
<table width="300" border="0">
<tr>
<td width="100">Företag</td>
<td width="200"><input name="foretag" type="text" id="foretag" /> </td>
</tr>
<tr>
<td>Efternamn</td>
<td><input name="efternamn" type="text" id="efternamn" /></td>
</tr>
<tr>
<td>Förnamn</td>
<td><input name="fornamn" type="text" id="fornamn" /></td>
</tr>
<tr>
<td>Titel</td>
<td><input name="titel" type="text" id="titel" /></td>
</tr>
<tr>
<td>Telefon</td>
<td><input name="telefon" type="text" id="telefon" /></td>
</tr>
<tr>
<td>E-post</td>
<td><input name="epost" type="text" id="epost" /></td>
</tr>
<tr>
<td>Bakgrundsfärg</td>
<td><select name="bgfarg" id="bgfarg">
<option selected="selected">Ljusblå</option>
<option>Ljusgul</option>
<option>Vit</option>
<option>Turkos</option>
</select>
</td>
</tr>
<tr>
<td>Textfärg</td>
<td><select name="textfarg" id="textfarg">
<option selected="selected">Svart</option>
<option>Blå</option>
<option>Röd</option>
<option>Mörkgrön</option>
</select>
</td>
</tr>
<tr>
<td>Typsnitt</td>
<td><select name="typsnitt" id="typsnitt">
<option selected="selected">Verdana</option>
<option>Arial</option>
<option>Tahoma</option>
<option>Impact</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="reset" name="Reset" value="Nollställ" />
<input type="button" name="Button" value="Skriv Ut" onclick="hej()">
</div></td>
</tr>
</table>
</form>
</div>

</body>
</html>

För att testa skrev jag en liten minifunktion;

function hej()
{
document.write(Hej!);
}

för att se om det skulle skrivas ut, eller om jag gjort något fel när jag kallade funktionen via knappen märkt Skriv Ut. När jag testade, försvann Inmatning lydigt, och ersattes av en vit sida med texten Hej! - alltså ligger felet någonstans i hur jag skrivit funktionen getElementValue.

Har jag skrivit fel på variablerna? Hittar scriptet inte elementen i formen? Skulle jag ha med .value?

En puff i rätt riktning skulle uppkattas mycket... :)

voigtann1Medlem sedan juni 20019 519 inlägg
#2

hej! är fel namn på en variabel:

function hej()
{
document.write("Hej!"); //Kommer att skriva ut Hej! på sidan
}

Exempelvis också på:

document.write("<div background-color:" + 'bgfarg' + "\">");

Skall vara:

document.write("<div background-color:" + bgfarg + "\">");
PollyJuiceMedlem sedan mars 2006124 inlägg
#3

Ändrade till

<script type="text/javascript">
function getElementValue()
{
var foretag = getElementById('foretag');
var efternamn = getElementById('efternamn');
var fornamn = getElementById('fornamn');
var titel = getElementById('titel');
var telefon = getElementById('telefon');
var epost = getElementById('epost');
var bgfarg = getElementById('bgfarg');
var textfarg = getElementById('textfarg');
var typsnitt = getElementById('typsnitt');
}
document.getElementById(Inmatning).style.display = 'none';
document.write("<div id=\"Resultat\"");
document.write("<div background-color:" + bgfarg + "\">");
document.write("<font-family:" + typsnitt + "\">");
document.write("<color:" + textfarg + "\">");
document.write("<h1>" + foretag + "</h1>");
document.write(fornamn + efternamn + "<br />");
document.write(titel + "<br />");
document.write(telefon + "<br />");
document.write(epost);
</script>

men det händer fortfarande nada när jag trycker på knappen. :q

voigtann1Medlem sedan juni 20019 519 inlägg
#4

Du anropar ju inte funktionen samt din funktion innehåller egentligen inget:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/javascript; charset=iso-8859-1" />
<title>Laboration 1</title>
<script type="text/javascript">
function getElementValue()
{
	var d = document;
	var foretag = d.getElementById('foretag');
	var efternamn = d.getElementById('efternamn');
	var fornamn = d.getElementById('fornamn');
	var titel = d.getElementById('titel');
	var telefon = d.getElementById('telefon');
	var epost = d.getElementById('epost');
	var bgfarg = d.getElementById('bgfarg');
	var textfarg = d.getElementById('textfarg');
	var typsnitt = d.getElementById('typsnitt');
	var el = d.getElementById('Inmatning');
	
	
	el.style.display = 'none';
	
	var str = "<div style='background-color:" + bgfarg.value + ";font-family:" + typsnitt.value  + ";color:" + textfarg.value + "'>";
	str = str + "<h1>" + foretag.value + "</h1>";
	str = str + "fornamn " + efternamn.value + "<br />";
	str = str + "titel " + titel.value + "<br />";
	str = str + "telefon " + telefon.value + "<br />";
	str = str + "epost: " + epost.value;
	str = str + "</div>";
	
	var result = d.getElementById("result");
	result.innerHTML = str;
	return false;
}

</script>

<style type="text/css">
<!--
#Inmatning {
	position:absolute;
	left:50px;
	top:50px;
	width:300px;
	height:320px;
	z-index:1;
	background-color: #66CCFF;
}
#Resultat {
	position:absolute;
	left:50px;
	top:50px;
	width:300px;
	height:320px;
	z-index:2;
}
-->
</style>
</head>

<body>
<div id="result"></div>
<div id="Inmatning">
	<h2>Best&auml;ll ditt visitkort h&auml;r: </h2>
	<form id="bestallning" name="bestallning" method="post" action="">
		<table width="300" border="0">
			<tr>
				<td width="100">Företag</td>
				<td width="200"><input name="foretag" type="text" id="foretag" /> </td>
			</tr>
			<tr>
				<td>Efternamn</td>
				<td><input name="efternamn" type="text" id="efternamn" /></td>
			</tr>
			<tr>
				<td>F&ouml;rnamn</td>
				<td><input name="fornamn" type="text" id="fornamn" /></td>
			</tr>
			<tr>
				<td>Titel</td>
				<td><input name="titel" type="text" id="titel" /></td>
			</tr>
			<tr>
				<td>Telefon</td>
				<td><input name="telefon" type="text" id="telefon" /></td>
			</tr>
			<tr>
				<td>E-post</td>
				<td><input name="epost" type="text" id="epost" /></td>
			</tr>
			<tr>
				<td>Bakgrundsf&auml;rg</td>
				<td>
					<select name="bgfarg" id="bgfarg">
						<option selected="selected" value="#66CCFF">Ljusbl&aring;</option>
						<option value="yellow">Ljusgul</option>
						<option value="white">Vit</option>
						<option value="teal">Turkos</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Textf&auml;rg</td>
				<td>
					<select name="textfarg" id="textfarg">
						<option selected="selected" value="#000">Svart</option>
						<option value="blue">Bl&aring;</option>
						<option value="red">R&ouml;d</option>
						<option value="green">M&ouml;rkgr&ouml;n</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Typsnitt</td>
				<td>
					<select name="typsnitt" id="typsnitt">
						<option selected="selected">Verdana</option>
						<option>Arial</option>
						<option>Tahoma</option>
						<option>Impact</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<div align="center">
						<input type="reset" name="Reset" value="Nollst&auml;ll" />
						<input type="button" name="Button" value="Skriv Ut" onclick="getElementValue(); return false;">
					</div>
				</td>
			</tr>
		</table>
	</form>
</div>

</body>
</html>

Så skall det nog vara.

PollyJuiceMedlem sedan mars 2006124 inlägg
#5

Nu funkar funktionen, men istället för att skriva ut de inmatade värdena skriver den [object HTMLInputElement] för varje värde.

voigtann1Medlem sedan juni 20019 519 inlägg
#6

Kontrollera din kod, mitt exempel testade jag i:
Firefox 2 (PC och Mac)
Firefox 3
Internet Explorer 7
Internet Explorer 6
Opera 9.51
Netscape 9.0b1

Och det ser ut att fungera bra.

edit:
din kod om du inte har ändrat den ser ut:
titel

Den retunera bara vad det är för html objekt:
titel.value <- titlel är av typen input och har "value" som kommer skriva ut innehållet.

@ndersMedlem sedan juni 200032 969 inlägg
#7

edit: Nattmössa! :)

PollyJuiceMedlem sedan mars 2006124 inlägg
#8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/javascript; charset=iso-8859-1" />
<title>Laboration 1</title>
<script type="text/javascript">
function getElementValue()
{
var d = document;
var foretag = d.getElementById('foretag');
var efternamn = d.getElementById('efternamn');
var fornamn = d.getElementById('fornamn');
var titeln = d.getElementById('titeln');
var telefon = d.getElementById('telefon');
var epost = d.getElementById('epost');
var bgfarg = d.getElementById('bgfarg');
var textfarg = d.getElementById('textfarg');
var typsnitt = d.getElementById('typsnitt');
var el = d.getElementById('Inmatning');

el.style.display = 'none';

var str = "<div style='background-color:" + bgfarg.value + ";font-family:" + typsnitt.value  + ";color:" + textfarg.value + "'>";
	str = str + "<h1>" + foretag.value + "</h1>";
	str = str + "fornamn " + fornamn.value + "efternamn " + efternamn.value + "<br />";
	str = str + "titel " + titeln.value + "<br />";
	str = str + "telefon " + telefon.value + "<br />";
	str = str + "epost: " + epost.value;
	str = str + "</div>";

var result = d.getElementById("result");
	result.innerHTML = str;
	return false;

}

</script>

<style type="text/css">
<!--
#Inmatning {
	position:absolute;
	left:50px;
	top:50px;
	width:300px;
	height:320px;
	z-index:1;
	background-color: #66CCFF;
}
#Resultat {
	position:absolute;
	left:50px;
	top:50px;
	width:300px;
	height:320px;
	z-index:2;
}
-->
</style>
</head>

<body>
<div id="Inmatning">
  <h2>Best&auml;ll ditt visitkort h&auml;r: </h2>
<form id="bestallning" name="bestallning" method="post" action="">
      <table width="300" border="0">
  <tr>
    <td width="100">Företag</td>
    <td width="200"><input type="text" id="foretag" />       </td>
  </tr>
  <tr>
    <td>Efternamn</td>
    <td><input type="text" id="efternamn" /></td>
  </tr>
  <tr>
    <td>F&ouml;rnamn</td>
    <td><input type="text" id="fornamn" /></td>
  </tr>
  <tr>
    <td>Titel</td>
    <td><input type="text" id="titeln" /></td>
  </tr>
  <tr>
    <td>Telefon</td>
    <td><input type="text" id="telefon" /></td>
  </tr>
  <tr>
    <td>E-post</td>
    <td><input type="text" id="epost" /></td>
  </tr>
  <tr>
    <td>Bakgrundsf&auml;rg</td>
    <td><select id="bgfarg">
      <option selected="selected">Ljusbl&aring;</option>
      <option>Ljusgul</option>
      <option>Vit</option>
      <option>Turkos</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Textf&auml;rg</td>
    <td><select id="textfarg">
      <option selected="selected">Svart</option>
      <option>Bl&aring;</option>
      <option>R&ouml;d</option>
      <option>M&ouml;rkgr&ouml;n</option>
    </select>
    </td>
  </tr>
  <tr>
    <td>Typsnitt</td>
    <td><select id="typsnitt">
      <option selected="selected">Verdana</option>
      <option>Arial</option>
      <option>Tahoma</option>
      <option>Impact</option>
    </select>
    </td>
  </tr>
  <tr>
    <td colspan="2"><div align="center">
      <input type="reset" value="Nollst&auml;ll" />
      <input type="button" value="Skriv Ut" onclick="getElementValue()">
    </div></td>
    </tr>
</table>
 </form>
 </div>
 
</body>
</html>

Nu blir hela sidan vit, inget alls dyker upp. Förut stod det åtminstone null eller 0 överallt...

voigtann1Medlem sedan juni 20019 519 inlägg
#9

För du har inte ett element med ID "result". Både IE och Firefox skriver ut detta fel om du går till javascript konsollen och se rapport.

PollyJuiceMedlem sedan mars 2006124 inlägg
#10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/javascript; charset=iso-8859-1" />
<title>Laboration 1</title>
<script type="text/javascript">
function getElementValue()
{
var d = document;
var foretag = d.getElementById('foretag');
var efternamn = d.getElementById('efternamn');
var fornamn = d.getElementById('fornamn');
var titeln = d.getElementById('titeln');
var telefon = d.getElementById('telefon');
var epost = d.getElementById('epost');
var bgfarg = d.getElementById('bgfarg');
var textfarg = d.getElementById('textfarg');
var typsnitt = d.getElementById('typsnitt');
var el = d.getElementById('Inmatning');

el.style.display = 'none';

var str = "<div style='background-color:" + bgfarg.value + ";font-family:" + typsnitt.value  + ";color:" + textfarg.value + "'>";
	str = str + "<h1>" + foretag.value + "</h1>";
	str = str + "fornamn " + fornamn.value + "efternamn " + efternamn.value + "<br />";
	str = str + "titel " + titeln.value + "<br />";
	str = str + "telefon " + telefon.value + "<br />";
	str = str + "epost: " + epost.value;
	str = str + "</div>";

var result = d.getElementById("Resultat");
	result.innerHTML = str;
	return false;

}

</script>

<style type="text/css">
<!--
#Inmatning {
	position:absolute;
	left:50px;
	top:50px;
	width:300px;
	height:320px;
	z-index:1;
	background-color: #66CCFF;
}
#result {
	z-index:2;
}
-->
</style>
</head>

<body>
<div id="Inmatning">

* klippt för att inte posten ska bli så lång *

</div>
 <div id="Resultat"></div>
</body>
</html>

Jag har en div med id=Resultat. Jag har var result = d.getElementById('Resultat');. Om det inte räcker, var ska jag placera något element med id=result? Vad för sorts element? Jag trodde att det räckte med att lägga in Resultat i result..?

voigtann1Medlem sedan juni 20019 519 inlägg
#11

Ditt senaste inlägg har du en div element med id "Resultat", nu fungera det ju. Det hade du inte tidigare, och med result i mitt förra inlägg så menar jag Resultat.

PollyJuiceMedlem sedan mars 2006124 inlägg
#12

*pussar i massor*

Tack, snälla du!!!!! :bire

voigtann1Medlem sedan juni 20019 519 inlägg
#13

Kanon!

Sätt gärna tråden som löst så att andra medlemmar på webForum med liknande problem kan enklare hitta svaret på problemet.

139 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
135 ms — hämta tråd, inlägg och bilagor (db)