Avatar billede para7 Nybegynder
11. januar 2008 - 11:32 Der er 9 kommentarer og
1 løsning

Auto indsætning af billedsti i billedtag

Jeg har en lille ellers udemærket auto udførelses funktion, hvor jeg kan skive navn i et formfelt og få vist det jeg skriver et andet sted på siden. Men hvordan får jeg en url ind i en billedtag. Her er det kogt helt ned:

<script language="javascript" type="text/javascript">
function showText(f){
  if(f.Vens_navn.value!="")document.getElementById('VensName').innerHTML = f.Vens_navn.value;
  if(f.Billede!="")document.getElementById('Picture').innerHTML = f.Billede.value;
}
</script>
<form action="xxx" method="POST">
Min vens navn: <input type="text"  name="Vens_navn" onkeyup="showText(this.form)">  - Hej <span id="VensName"></span>
<br>
<br>
Sti til mit billede: <input type="text" name="Billede" onkeyup="showText(this.form)"> - Her ser du mit billede: <img src="<span id="Picture"></span>">
<br>
<br>
Her vises stien til mit billede: <span id="Picture"></span>
<br>
<br>
<br>
<input name=submit1 type="submit"alue="Send">
</form>
Avatar billede w13 Novice
11. januar 2008 - 11:34 #1
Det er meget nemt:
if(f.Billede!="")document.getElementById('Picture').setAttribute("src",f.Billede.value);

I øvrigt er innerHTML meget invalidt JavaScript. Det var vistnok noget, som Microsoft fandt på engang - det stammer altså ikke fra w3c (www.w3c.org), som ellers står for at sætte kodestandarderne.
Avatar billede w13 Novice
11. januar 2008 - 11:35 #2
I øvrigt kan du nøjes med at tjekke:
if(f.Vens_navn.value)
og
if(f.Billede)
i stedet for f.eks.:
if(f.Vens_navn.value!="")
Avatar billede para7 Nybegynder
11. januar 2008 - 11:51 #3
Lyder godt. Jeg tager lige forenklingen først, er ikke selv en haj til js. Hvad med value for Billede, mangler det ikke forresten? eller er det her så nok:

if(f.Vens_navn)
og
if(f.Billede)
Avatar billede para7 Nybegynder
11. januar 2008 - 11:56 #4
w13:
Kan du ikke vise hele sidens kode med tingene indsat, gerne på din forbedrede måde, det er stadig russisk for mig.
Avatar billede w13 Novice
11. januar 2008 - 11:58 #5
Du har ret, jeg glemte value på billedet. Det fungerer sådan, at billedets value er "true", hvis det indeholder noget, og ellers er det "false". Og man behøver ikke skriver: =="true"
Hvis man ikke skriver .value, så tjekker den bare, om objectet findes.

Koden skal være:

<script language="javascript" type="text/javascript">
function showText(f){
  if(f.Vens_navn.value)document.getElementById('VensName').innerHTML = f.Vens_navn.value;
  if(f.Billede.value)document.getElementById('Picture').setAttribute("src",f.Billede.value);
}
</script>
Avatar billede para7 Nybegynder
11. januar 2008 - 12:47 #6
OK, så er det på plads. Men kan du så ikke lige putte løsningen ind i sammenhængen - vise hele siden kode her. Jeg kan ikke få billedet til at virke, kun navnet.
Avatar billede w13 Novice
11. januar 2008 - 13:19 #7
Jeg havde ikke lige set, at du havde brugt en span. Vi gør i stedet sådan her:

<script language="javascript" type="text/javascript">
function showText(f){
  if(f.Vens_navn.value)document.getElementById('VensName').innerHTML = f.Vens_navn.value;
  if(f.Billede.value){
    document.getElementById('Picture').firstChild.setAttribute("src",f.Billede.value);
    document.getElementById('Picture').firstChild.style.display="inline";
  }
}
</script>
<form action="xxx" method="post">
Min vens navn: <input type="text"  name="Vens_navn" onkeyup="showText(this.form)">  - Hej <span id="VensName"></span>
<br>
<br>
Sti til mit billede: <input type="text" name="Billede" onkeyup="showText(this.form)"> - Her ser du mit billede: <span id="Picture"><img style="display:none"></span>
<br>
<br>
Her vises stien til mit billede: <span id="Picture"></span>
<br>
<br>
<br>
<input name=submit1 type="submit" value="Send">
</form>
Avatar billede w13 Novice
11. januar 2008 - 13:20 #8
Men du må jo ikke have 2 elementer med samme id. Denne linje:
Her vises stien til mit billede: <span id="Picture"></span>
indeholder id="Picture" for anden gang.
Avatar billede para7 Nybegynder
11. januar 2008 - 14:31 #9
Ikke så ringe endda :)
Tak for hjælpen, det var smart, det er som det skal være.
Avatar billede w13 Novice
11. januar 2008 - 15:02 #10
Gut. Og tak for point! :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester