Problem displaying the result with my blogger code

Question

Yo Galera, beauty! I have a small problem. I made a code so that it was displayed on my blog page a generator of Link Me. In which the person fills in the form and at the end is generated the code for the person to copy and paste in her blog. But when you click the button and generate the code, nothing appears in the box where it should. Is it a mistake in my code? (It’s just below.) I appreciate the help!

<h2 style="text-align: center;">
<span style="color: #3d85c6;">
Formulário</span></h2>
<br />
<table border="0" cellpadding="2" cellspacing="0" style="text-align: left; width: 580px;"><tbody>
<tr>
      <td width="225">Endereço do Blog<span style="color: red;">*</span></td>
      <td width="355"><input id="urlblog" size="60" type="text" value="http://amefuriblog.blogspot.com" /></td>
    </tr>
<tr>
      <td width="225">Link da Imagem<span style="color: red;">*</span></td>
      <td width="355"><input id="urlimg" size="60" type="text" value="http://i58.tinypic.com/amefuriblog.png" /></td>
    </tr>
<tr>
      <td width="225">Título do Blog</td>
      <td width="355"><input id="titulo" size="60" type="text" value="Amefuri Blog" /></td>
    </tr>
<tr>
      <td width="225">Descrição do Blog</td>
      <td width="355"><input id="descricao" size="60" type="text" value="Seu blog favorito de Cultura Japonesa!" /></td>
    </tr>
<tr>
      <td width="225">Largura Imagem</td>
      <td width="355"><input id="larguraimg" size="3" type="text" value="120" /> pixels</td>
    </tr>
<tr>
      <td width="225">Altura Imagem</td>
      <td width="355"><input id="alturaimg" size="3" type="text" value="60" /> pixels</td>
    </tr>
<tr>
      <td width="225">Largura Caixa de Código</td>
      <td width="355"><input id="larguracaixa" size="3" type="text" value="200" /> pixels</td>
    </tr>
<tr>
      <td width="225">Altura Caixa de Código</td>
      <td width="355"><input id="alturacaixa" size="3" type="text" value="60" /> pixels</td>
    </tr>
</tbody></table>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<input class="gerarcodigo" type="button" value="Gerar Código" />
</div>
<div style="text-align: left;">
<span style="color: red;"><span style="font-weight: normal;"><br /></span></span></div>
<div style="text-align: left;">
<span style="color: red; font-size: x-small;"><span style="font-weight: normal;">*Campos Obrigatórios</span></span></div>
<h3 style="text-align: center;">
<span style="color: #3d85c6;">
Código do seu Gadget está abaixo!</span></h3>
<div style="text-align: center;">
<textarea name="resultado" onfocus="this.select()" onmouseover="this.focus()" style="height: 200px; margin: 2px; width: 580px;"></textarea>
<script type="text/javascript">
var titulo       = document.getElementById("titulo");
var descricao    = document.getElementById("descricao");
var urlblog      = document.getElementById("urlblog");
var urlimg       = document.getElementById("urlimg");
var larguraimg   = document.getElementById("larguraimg");
var alturaimg    = document.getElementById("alturaimg");
var larguracaixa = document.getElementById("larguracaixa");
var alturacaixa  = document.getElementById("alturacaixa");
var botao        = document.getElementsByClassName("gerarcodigo")[0];
var caixa        = document.getElementsByName("resultado")[0];
var inicio       = "<div align=&quot;center&quot;>
"
var fim          = "&amp;lt;/a&amp;gt;</textarea></div>
"

botao.onclick = function() {
  if (larguracaixa == "")
    {larguracaixa = 200}
  if (alturacaixa == "")
    {alturacaixa = 60}
  if (larguraimg == "")
    {codlagura = "";
     codlaguraparse = ""}
  else
    {codlargura = "width=&quot;" + larguraimg.value + "&quot;";
     codlarguraparse = "width=&amp;quot;" + larguraimg.value + "&amp;quot;"}
  if (alturaimg == "")
    {codaltura = "";
     codalturaparse = ""}
  else
    {codaltura = "height=&quot;" + alturaimg.value + "&quot;";
     codalturaparse = "height=&amp;quot;" + alturaimg.value + "&amp;quot;"}
  imagem       = "<img alt=&quot;" + titulo.value + " - " + descricao.value + "&quot; title=&quot;" + titulo.value + " - " + descricao.value + "&quot; src=&quot;" + urlimg.value + "&quot; border=&quot;0&quot; " + codlargura + " " + codaltura + "/>"
  caixacod     = "<br/><textarea onfocus=&quot;this.select()&quot; style=&quot;margin: 2px; width: " + larguracaixa.value + "px; height: " + alturacaixa.value + "px&quot; onmouseover=&quot;this.focus()&quot; name=&quot;textarea&quot;>"
  linkparse    = "&amp;lt;a href=&amp;quot;" + urlblog.value + "&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;"
  imagemparse  = "&amp;lt;img alt=&amp;quot;" + titulo.value + " - " + descricao.value + "&amp;quot; title=&amp;quot;" + titulo.value + " - " + descricao.value + "&amp;quot; src=&amp;quot;" + urlimg.value + "&amp;quot; border=&amp;quot;0&amp;quot; " + codlarguraparse + " " + codalturaparse + "/&amp;gt;"
  caixa.innerHTML = inicio + imagem + caixacod + linkparse + imagemparse + fim;
}
</script>
<br />
<div style="clear: both;">
</div>

Answer 1

The problem is punctuation. Missing semicolons in some places. Always use semicolons when finishing an instruction. Now it works:

<span style="color: #3d85c6;">
Código do seu Gadget está abaixo!</span></h3>
<div style="text-align: center;">
<textarea name="resultado" onfocus="this.select()" onmouseover="this.focus()" style="height: 200px; margin: 2px; width: 580px;"></textarea>
<script type="text/javascript">
var titulo       = document.getElementById("titulo");
var descricao    = document.getElementById("descricao");
var urlblog      = document.getElementById("urlblog");
var urlimg       = document.getElementById("urlimg");
var larguraimg   = document.getElementById("larguraimg");
var alturaimg    = document.getElementById("alturaimg");
var larguracaixa = document.getElementById("larguracaixa");
var alturacaixa  = document.getElementById("alturacaixa");
var botao        = document.getElementsByClassName("gerarcodigo")[0];
var caixa        = document.getElementsByName("resultado")[0];
var inicio       = "<div align=&quot;center&quot;>";
var fim          = "&amp;lt;/a&amp;gt;</textarea></div>";

botao.onclick = function() {
  if (larguracaixa == "")
    {larguracaixa = 200};
  if (alturacaixa == "")
    {alturacaixa = 60};
  if (larguraimg == "")
    {codlagura = "";
     codlaguraparse = "";}
  else
    {codlargura = "width=&quot;" + larguraimg.value + "&quot;";
     codlarguraparse = "width=&amp;quot;" + larguraimg.value + "&amp;quot;";}
  if (alturaimg == "")
    {codaltura = "";
     codalturaparse = "";}
  else
    {codaltura = "height=&quot;" + alturaimg.value + "&quot;";
     codalturaparse = "height=&amp;quot;" + alturaimg.value + "&amp;quot;"}
  imagem = "<img alt=&quot;" + titulo.value + " - " + descricao.value + "&quot; title=&quot;" + titulo.value + " - " + descricao.value + "&quot; src=&quot;" + 

urlimg.value + "&quot; border=&quot;0&quot; " + codlargura + " " + codaltura + "/>";
  caixacod     = "<br/><textarea onfocus=&quot;this.select()&quot; style=&quot;margin: 2px; width: " + larguracaixa.value + "px; height: " + alturacaixa.value + 

"px&quot; onmouseover=&quot;this.focus()&quot; name=&quot;textarea&quot;>";
  linkparse    = "&amp;lt;a href=&amp;quot;" + urlblog.value + "&amp;quot; target=&amp;quot;_blank&amp;quot;&amp;gt;";
  imagemparse  = "&amp;lt;img alt=&amp;quot;" + titulo.value + " - " + descricao.value + "&amp;quot; title=&amp;quot;" + titulo.value + " - " + descricao.value + 

"&amp;quot; src=&amp;quot;" + urlimg.value + "&amp;quot; border=&amp;quot;0&amp;quot; " + codlarguraparse + " " + codalturaparse + "/&amp;gt;";
  caixa.innerHTML = inicio + imagem + caixacod + linkparse + imagemparse + fim;
}
</script>
<br />
<div style="clear: both;">
</div>