webForumDet fria alternativet
Logga in / Bli medlem

Miss i javascript

JavaScript

12 svar · 2 494 visningar · startad av PollyJuice

PollyJuices avatarPollyJuiceMedlem sedan mars 2006124 inlägg
Frågan#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... :)

voigtann1s avatarvoigtann1Medlem 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 + "\">");
PollyJuices avatarPollyJuiceMedlem 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

voigtann1s avatarvoigtann1Medlem 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.

PollyJuices avatarPollyJuiceMedlem 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.

voigtann1s avatarvoigtann1Medlem 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.

@nderss avatar@ndersMedlem sedan juni 200032 967 inlägg
#7

edit: Nattmössa! :)

PollyJuices avatarPollyJuiceMedlem 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...

voigtann1s avatarvoigtann1Medlem 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.

PollyJuices avatarPollyJuiceMedlem 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..?

voigtann1s avatarvoigtann1Medlem 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.

PollyJuices avatarPollyJuiceMedlem sedan mars 2006124 inlägg
#12

*pussar i massor*

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

voigtann1s avatarvoigtann1Medlem 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.

271 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
129 ms — deklarationer (db)
0 ms — hämta statistik (cache)
140 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)