0

Amigos estoy haciendo un website personal para que sea multi lenguaje. Para ello estoy usando un select que me sirve para seleccionar el idioma y mediante javascript hago las validaciones mediante id, y con respecto al contenido lo hago a través de un archivo .json

Entonces, tengo por ejemplo, el contenido en .json de esta forma:

{
    "en": {
        "langdesc": "English",
        "sO__ch1--ch1": "<strong>Full Name: </strong> Manuel Perez",
        "sO__ch1--ch2": "<strong>Location: </strong> Bogota, Colombia",
    },
    "es": {
        "langdesc": "Spanish",
        "sO__ch1--ch1": "<strong>Nombre y Apellidos: </strong> Manuel Perez",
        "sO__ch1--ch2": "<strong>Direccion: </strong> Bogota, Colombia",
    }
}

Tiene otros campos pero no viene al caso, por ello lo omito... Ahora en el index tengo:

    <table>
        <tr>
            <td id="sO__ch1--ch1"></td>
            <td id="sO__ch1--ch2"></td> 
        </tr>
    </table>

Entonces cuando corro el programa me muestra las etiquetas <strong> y mi intención es que solo se vea resaltada los títulos de cada campo.

Es decir, me esta mostrando esto:

<strong> Nombres y Apellidos: </strong> Manuel Pérez
<strong> Direccion: </strong> Bogotá, Colombia

Y yo quiero que se muestre:

Nombres y Apellidos: Manuel Perez

Direccion: Bogotá, Colombia

Cómo puedo arreglarlo?

1 respuesta 1

0

Cuando vas a editar el contenido de un elemento, ten presente que puedes editar el contenido del texto interno o del HTML interno, mira este ejemplo:

const elemento = document.getElementById("elemento");

const miJSON = {
  contenido: "<strong> Hola mundo! </strong>"
}

function porTexto() {
  elemento.innerText = miJSON.contenido
}

function porHtml() {
  elemento.innerHTML = miJSON.contenido
}
<div id="elemento">

</div>
<button onClick='porTexto()'>Cambiar el texto</button>
<button onClick='porHtml()'>Cambiar el HTML</button>

Lo que quieres hacer es cambiar el HTML en tu caso, por lo tanto asegúrate de no estar cambiando el texto.

UPDATE

Te presento una idea con fines didácticos de como podrías transformar los textos por idioma a través de JS por medio de objetos, yo no recomendaría esto en producción y si investigas vas a encontrar métodos/librerías estándar para este tipo de cosas

const elemento = document.getElementById("elemento");

let idioma = "es";

//Esto podría leerse de un archivo
const miTexto = {
  boton1: {
    es: "Cambiar el texto",
    en: "Change text"
  },
  boton2: {
    es: "Cambiar el HTML",
    en: "Change HTML"
  },
  boton3: {
    es: "Inglés",
    en: "Spanish"
  },
  elemento: {
    es: "<strong> Hola mundo! </strong>",
    en: "<strong> Hello World! </strong>"
  }
}

const miJSON = {
  contenido: "<strong> Hola mundo! </strong>"
}

function porTexto() {
  elemento.innerText = miJSON.contenido
}

function porHtml() {
  elemento.innerHTML = miJSON.contenido
}

function cambiarIdioma() {

  idioma = (idioma === "es") ? "en" : "es";
  for (const [elemId, lang] of Object.entries(miTexto)) {
    document.getElementById(elemId).innerText = lang[idioma];
  }


}
<div id="elemento">

</div>
<button id='boton1' onClick='porTexto()'>Cambiar el texto</button>
<button id='boton2' onClick='porHtml()'>Cambiar el HTML</button>
<br>
<button id='boton3' onClick='cambiarIdioma()'>Ingles</button>

2
  • FranAcuna!!!! muchas gracias por tu respuesta, que me recomendarias tu para el caso de que la pagina sea multi lenguaje, es decir cuando un usuario seleccione el idioma ingles, todo el contenido de la pagina se muestra en ingles, pero cuando el usuario seleccione en español, todo el contenido se muestra en español..... y por su puesto al elegir el idioma que sea la pagina debe mantener el mismo estilo, solo varia el idioma del contenido...... entonces que forma me recomiendas? manejarlo mediante javascript o hacerlo aparte?
    – Gerarca
    Commented el 14 ene. 2021 a las 13:06
  • Te actualicé la respuesta con base a lo que me has preguntado, yo lo haría con JS, sin embargo sé de muchos websites que lo que tienen son diferentes documentos de HTML en distintos idiomas y redireccionan al usuario al idioma que necesitan. Si esta respuesta responde al problema original te agradecería que la marques como respuesta para ayudar a otros usuarios de la comunidad que enfrenten tu mismo problema.
    – FranAcuna
    Commented el 14 ene. 2021 a las 18:12

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.