Autor Tema: Duda generador de JavaScript concatenar texto en varias líneas  (Leído 5321 veces)

paula10

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Hola, estoy intentando hacer un generador de fichas de libros, me explico, en la pantalla te sale titulo, autor,... tú lo rellenas y das a generar código html, entonces te genera el código.

El problema que tengo es que ya he hecho el código html y JavaScript, pero al darle a generar no pasa nada, ¿me podríais decir que es lo que pasa? Gracias de todas maneras :)

JavaScript
Código: [Seleccionar]
function generateCode(form){

//Datos del libro
portada = document.inputForm.portada.value;
title = document.inputForm.title.value;
serie = document.inputForm.serie.value;
autor = document.inputForm.autor.value;
sinopsis = document.inputForm.sinopsis.value;


output =
 
  '<div class="block">\n'
'<a href="' + portada + '" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="' + portada + '" height="320" width="212" /></a></div>\n\n'

'<span style="font-weight: bold;">Título:</span> ' + title + '\n'
'<span style="font-weight: bold;">Serie:</span> ' + serie + '\n'
'<span style="font-weight: bold;">Autor:</span> ' + autor + '\n\n'
'<blockquote class="tr_bq">\n'
' + sinopsis + ''</blockquote>\n'
'<div style="font-family: georgia; font-size: 30px; font-weight: bold; letter-spacing: 3px; margin-bottom: -10px; text-align: center; text-shadow: 2px 2px 0px #BBB;">\n'
'OPINIÓN</div>\n\'
'ESCRIBE AQUÍ TU RESEÑA ÑAJSDALSDJF\n';

document.inputForm.source.value = output;

return output;
}

function preview() {
var htmlCode;
htmlCode = generateCode();
targetURL = "/preview/preview.cfm?htmlCode=" + htmlCode;
window.open(targetURL, "newWindow", "width=500,height=400,top=100,left=100,toolbar=no,menubar=no,location=no,scrollbars=yes");
}

HTML
Código: [Seleccionar]
<div class="code-generator">
<form name="inputForm" id="inputForm">

<fieldset>
        <legend>Datos del libro</legend>
<div>
<label for="portada" title="Enlace Portada">Enlace de la portada:</label><br />
        <input name="portada" id="portada" type="input" size="30" value="http://" />
        </div>
        <div>
        <label for="title" title="Título del libro">Título del libro:</label><br />
<input name="title" id="title" type="input" maxlength="100" size="30" value="Escribe aquí..." />
</div>
<div>
<label for="serie" title="Nombre de la serie si la hay">Nombre de la serie si tiene:</label><br />
<textarea name="serie" id="serie" cols="30" rows="3">Si es libro único no pongas nada aquí...</textarea>
</div>
<div>
        <label for="autor" title="Nombre autor/autora">Autor/a:</label><br />
<textarea name="autor" id="autor" cols="30" rows="3">....</textarea>
</div>
       
        <div>
        <label for="sinopsis" title="sinopsis">Sinopsis:</label><br />
<textarea name="sinopsis" id="sinopsis" cols="70" rows="4">....</textarea>
</div>
       
</fieldset>

<fieldset>
<legend>Generated HTML Code</legend>
<div>
<input type="button" value="Generate HTML Code!" onClick="javascript:generateCode();"> &nbsp;OR&nbsp; <input type="button" value="Generate HTML Code and Preview!" onClick="javascript:preview();">
</div>
<div>
<p>Copy and paste the following code into a text file and save with a .html or .htm extension.</p>
<textarea name="source" rows="7" cols="40" onclick="this.focus();this.select()"></textarea>
</div>
</fieldset>
</form>
</div>
« Última modificación: 26 de Enero 2015, 08:56 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Duda generador de JavaScript
« Respuesta #1 en: 25 de Enero 2015, 21:57 »
Hola, tienes errores de sintaxis.

Por ejemplo aquí la concatenación no está bien generada.

Código: [Seleccionar]
output =
 
  '<div class="block">\n'
'<a href="' + portada + '" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="' + portada + '" height="320" width="212" /></a></div>\n\n'

'<span style="font-weight: bold;">Título:</span> ' + title + '\n'
'<span style="font-weight: bold;">Serie:</span> ' + serie + '\n'
'<span style="font-weight: bold;">Autor:</span> ' + autor + '\n\n'
'<blockquote class="tr_bq">\n'
' + sinopsis + ''</blockquote>\n'
'<div style="font-family: georgia; font-size: 30px; font-weight: bold; letter-spacing: 3px; margin-bottom: -10px; text-align: center; text-shadow: 2px 2px 0px #BBB;">\n'
'OPINIÓN</div>\n\'
'ESCRIBE AQUÍ TU RESEÑA ÑAJSDALSDJF\n';

Aquí puedes consultar un curso útil: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206

Y dentro del curso hay por ejemplo aquí sitios donde puedes ver cómo realizar una concatenación de texto en varias líneas: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=819:ejemplo-innerhtml-javascript-ejercicio-resuelto-modificar-campos-de-tabla-dinamica-editar-filas-cu01139e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

También para revisar el código, pega el código completo, parece que sólo has pegado fragmentos, pero no se ven las etiquetas de html, body, etc.

Saludos

paula10

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Re:Duda generador de JavaScript
« Respuesta #2 en: 25 de Enero 2015, 22:00 »
Muchas gracias, lo revisaré ;)

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".