2

Tengo una lista vacía predefinida:

<ul id="tool_list"></ul>

Una función que crea botones (usé div para tener mayor control de estilo y funciona sin problemas):

function createButton(buttonId, buttonName) {
  return `<div class='button' id=${buttonId}>${buttonName}</div>`;
}

Y una función que añade ítems con un diseño predefinido:

function addTool(label, labelId, editorData, buttons, resultAreaName) {
    
    var i = 0;
    var result = "";
    var buttonlist = "";
    while (i < buttons.length) {
        newButton = createButton(buttons[i][0], buttons[i][1]);
        buttonlist = buttonlist + newButton;
        i++;
    }
    document.getElementById("tool_list").innerHTML = document.getElementById("tool_list").innerHTML + '<li><p id=' + labelId + '>' + label + '</p><div class="subspaces"><textarea id=' + editorData[0] + ' placeholder=' + editorData[1] + ' rows=' + editorData[2] + '></textarea><div class="buttonlist">' + buttonlist +'</div><p id=' + resultAreaName + '>Results will appear here.</p></div></li>';
}

Y este comando para agregar una cierta herramienta:

addTool("Invertir texto:", "reversetextmod", ["reversetext", "Type your text here.", 4], [["processReversingText", "Procesar"]], "resultReverseArea");

El problema es que al ejecutar mi comando, el placeholder de mi textarea se corta a medias y en el código fuente me salen cosas como esta:

<li><p id="reversetextmod">Invertir texto:</p><div class="subspaces"><textarea id="reversetext" placeholder="Type" your="" text="" here.="" rows="4"></textarea><div class="buttonlist"><div class="button" id="processReversingText">Procesar</div></div><p id="resultReverseArea">Results will appear here.</p></div></li>```

Unos signos raros donde va el placeholder de mi textarea. No he podido quitarlos. Desde ahí se trunca el funcionamiento y no me deja seguir de forma adecuada. ¿Alguien me puede ayudar?

NOTA: NO ES OPCIÓN USAR createElement, NO PUEDO PONERLE ID A LAS COSAS.

1 respuesta 1

2

PROBLEMA

Es porque tienes un error al crear los atributos. Si te das cuenta, no has colocado las dobles comillas (") que son el estándar para envolver los valores de cualquier atributo HTML:

<textarea id="valor" placeholder="valor" rows="valor"></textarea>

Tal como lo tienes ahora, no has respetado las comillas dobles, simplemente estás insertando el valor de editorData[1]:

<textarea id=' + editorData[0] + ' placeholder=' + editorData[1] + ' rows=' + editorData[2] + '></textarea>

Podemos ver el comportamiento en el siguiente snippet:

let placeholders = [
  'Esto es incorrecto',
  'Esto es correcto'
];

document.getElementById('mal').innerHTML += '<textarea placeholder=' + placeholders[0] + '></textarea>';

document.getElementById('bien').innerHTML += '<textarea placeholder="' + placeholders[1] + '"></textarea>';

document.getElementById('htmlMAL').innerText = document.getElementById('mal').innerHTML;

document.getElementById('htmlBIEN').innerText = document.getElementById('bien').innerHTML;
<div id="mal"></div>
<pre id="htmlMAL"></pre>
<div id="bien"></div>
<pre id="htmlBIEN"></pre>

SOLUCIÓN

La solución es simple, agrega las comillas dobles de apertura y cierre para que el navegador sepa que el contenido de editorData[i] que será insertado en el HTML mediante Javascript, es efectivamente el valor del atributo placeholder de tu elemento textarea. No sólo debes añadir las dobles comillas en dicho atributo, sino en todos los atributos que estás generando de esta forma.

El código debería verse así:

document.getElementById("tool_list").innerHTML += '<li><p id="' + labelId + '">' + label + '</p><div class="subspaces"><textarea id="' + editorData[0] + '" placeholder="' + editorData[1] + '" rows="' + editorData[2] + '"></textarea><div class="buttonlist">' + buttonlist +'</div><p id="' + resultAreaName + '">Results will appear here.</p></div></li>';

Otra solución es que utilices una plantilla de cadena literal para insertar los datos, por ejemplo:

document.getElementById("tool_list").innerHTML += 
  `<li>
    <p id="${labelId}">${label}</p>
    <div class="subspaces">
      <textarea id="${editorData[0]}" placeholder="${editorData[1]}" rows="${editorData[2]}"></textarea>
      <div class="buttonlist">${buttonlist}</div>
      <p id="${resultAreaName}">Results will appear here.</p>
    </div>
  </li>`;

De esta forma se entiende un poco mejor los valores y el contenido de la cadena que estás añadiendo a tu elemento. Recuerda siempre revisar al tabla de compatibilidad de las cadenas literales antes de aplicarlas.

Espero que esto aclare tu duda y te ayude a resolver este y otros problemas similares.

1
  • ¡Muchas gracias! Si, era eso 😅 y otros errores de código. Ya funciona como debe ser y le puse window.onLoad para que mis addEventListener funcionen como debe ser. ¡Ten un buen día (o noche)! Commented el 21 ago. 2021 a las 2:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.