webForumDet fria alternativet
Logga in / Bli medlem

Klickbara smileys, HUR?

JavaScript

6 svar · 578 visningar · startad av aasah

aasahMedlem sedan mars 20034 471 inlägg
Frågan#1

Jag håller på att skriva om min gästbok och skulle gärna vilja ha klickbara smileys till den. Trodde inte det skulle vara så svårt, men någonting är uppenbart fel. Min för ändamålet framtagna testfil ser ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta name="robots" content="noindex">
<!-- ... -->
</head>
<body>
<!-- ... --> 
<div id="content">  <script type="text/javascript">

function addCode(code) {
   var ta = document.getElementByName('newest'); //Rad 33
   ta.innerHTML = ta.innerHTML + ' ' + code;
}
</script>

<p>Clickable? <table>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/smile.gif" alt=":)" onclick="addCode(':)');"></td><td>:)</td>
    <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/biggrin.gif" alt=":D" onclick="addCode(':D');"></td><td>:D</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/supergrin.gif" alt=":e" onclick="addCode(':e');"></td><td>:e</td>
    <td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/wink.gif" alt=";)" onclick="addCode(';)');"></td><td>;)</td>
    </tr>
<!-- ... -->
<p><form method="POST" name="newPost" action="tst.php" ><br>
<table class="karm">
<tr><td>Subject(Optional): </td><td><input type="text" name="subject" value=""></td></tr>
<tr><td colspan=2>Write your comment (below)</td></tr>
<tr><td colspan=2><textarea name="newest" rows=15 cols=60></textarea></td></tr>
</table>
<input type="submit" name="submitPost" value="Post it!" ><br><br>
</form>

Sidan laddar snällt, men om man klickar på en smiley så... Resultat i IE JS-fel, resultat i FF inget fel, men inga klickbara smileys heller... :(

IE's JS-fel skrev:

Rad: 33
Tecken: 4
Objektet stöder inte egenskapen eller metoden
Kod: 0

Vad är det som inte stöds? Och hur borde det stå?

zcorpanMedlem sedan dec. 20042 245 inlägg
#2

getElementsByName...

Eller getElementById.

aasahMedlem sedan mars 20034 471 inlägg
#3

zcorpan skrev:

getElementsByName...

Eller getElementById.

Åh! Tackar! :birp Det plockade bort felmeddelandet i IE, så nu är FF och IE lika:

Inget fel och inget händer! Fortfarande adderas inte smiley koden till textarean... Någon som ser varför?

Eller... är det så att ta blir en array om det heter get Elements...? Borde jag använda ta[0].innerHTML eller något? :q :l

colioneMedlem sedan juni 20014 421 inlägg
#4

Ja, alternativt sätta ett id på den så kan du accessa den via getElementById.

aasahMedlem sedan mars 20034 471 inlägg
#5

Tack, colione! Bestämde mig för ett id. Och då fungerar allt som smort i IE. :e

Tyvärr kan jag inte säga detsamma om FF. :( När sidan laddat kan jag trycka på smileysarna och de dyker upp i textarean. Men så fort jag börjat skriva i textarean upphör klickbarheten?!? :q :q :q Vad är fel och varför?

Aktuell kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta name="robots" content="noindex">
<!--- ... --->
</head>
<body>
<!-- meny --->
<div id="content">  <script type="text/javascript">

function addCode(code) {
   var ta = document.getElementById('newest');
   ta.innerHTML = ta.innerHTML + ' ' + code;
}
</script>

<p>Clickable? <table>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/smile.gif" alt=":)" onclick="addCode(':)');"></td><td>:)</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/biggrin.gif" alt=":D" onclick="addCode(':D');"></td><td>:D</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/supergrin.gif" alt=":e" onclick="addCode(':e');"></td><td>:e</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/wink.gif" alt=";)" onclick="addCode(';)');"></td><td>;)</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/tongue.gif" alt=":p" onclick="addCode(':p');"></td><td>:p</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/devel.gif" alt="§sly" onclick="addCode('§sly');"></td><td>§sly</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/alarmed.gif" alt=":o" onclick="addCode(':o');"></td><td>:o</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/rolleyes.gif" alt=":roll" onclick="addCode(':roll');"></td><td>:roll</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/devilgrin.gif" alt="§evil" onclick="addCode('§evil');"></td><td>§evil</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/grumpy.gif" alt=":(" onclick="addCode(':(');"></td><td>:(</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/angry.gif" alt=":mad" onclick="addCode(':mad');"></td><td>:mad</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/dead.gif" alt=":x" onclick="addCode(':x');"></td><td>:x</td>
    </tr>
</table><p><form method="POST" name="newPost" action="textAreaTst.php" ><br>
<table class="karm">
<tr><td>Subject(Optional): </td><td><input type="text" name="subject" value=""></td></tr>
<tr><td colspan=2>Write your comment (below)</td></tr>
<tr><td colspan=2><textarea id="newest" name="newest" rows=15 cols=60></textarea></td></tr>
</table>
<input class="buttonColorG" type="submit" name="submitPost" value="Post it!" ><br><br>
</form>
colioneMedlem sedan juni 20014 421 inlägg
#6

Behöver du verkligen använda innerHTML? Vad sägs om value?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta name="robots" content="noindex">
<!-- ... --->
</head>
<body>
<!-- meny -->
  <script type="text/javascript">

function addCode(code) {
   var ta = document.getElementById('newest');
   ta.value +=' ' + code;
}
</script>

<p>Clickable? <table>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/smile.gif" alt=":)" onclick="addCode(':)');"></td><td>:)</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/biggrin.gif" alt=":D" onclick="addCode(':D');"></td><td>:D</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/supergrin.gif" alt=":e" onclick="addCode(':e');"></td><td>:e</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/wink.gif" alt=";)" onclick="addCode(';)');"></td><td>;)</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/tongue.gif" alt=":p" onclick="addCode(':p');"></td><td>:p</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/devel.gif" alt="§sly" onclick="addCode('§sly');"></td><td>§sly</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/alarmed.gif" alt=":o" onclick="addCode(':o');"></td><td>:o</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/rolleyes.gif" alt=":roll" onclick="addCode(':roll');"></td><td>:roll</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/devilgrin.gif" alt="§evil" onclick="addCode('§evil');"></td><td>§evil</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/grumpy.gif" alt=":(" onclick="addCode(':(');"></td><td>:(</td>
    </tr>
<tr><td><img src="http://www.tydal.nu/aasah/img/smilies/angry.gif" alt=":mad" onclick="addCode(':mad');"></td><td>:mad</td>
    <td><img src="http://www.tydal.nu/aasah/img/smilies/dead.gif" alt=":x" onclick="addCode(':x');"></td><td>:x</td>
    </tr>
</table><p><form method="POST" name="newPost" action="textAreaTst.php" ><br>
<table class="karm">
<tr><td>Subject(Optional): </td><td><input type="text" name="subject" value=""></td></tr>
<tr><td colspan=2>Write your comment (below)</td></tr>
<tr><td colspan=2><textarea id="newest" name="newest" rows=15 cols=60></textarea></td></tr>
</table>
<input class="buttonColorG" type="submit" name="submitPost" value="Post it!" ><br><br>
</form>
aasahMedlem sedan mars 20034 471 inlägg
#7

Snyggt! Då funkar det! Tackar! :e

256 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
120 ms — deklarationer (db)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)
120 ms — ändringar (db)