Я хочу изменить текст кнопкой

Question

Я хочу предоставить все мои посты в своем блоге на двух языках. Я нашел способ изменить текст на другой язык с помощью кнопок. Но я не могу поместить в текст какие-либо изображения или другие стили CSS. Затем кнопки больше не работают.

<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. I can't put any css or html in here';">English</button> &#160; <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another language';">Other language</button> 
 

 
<div id="chgtext">This is the default text. I can't put any css or html in here</div>

Есть ли способ, что я могу сделать что-то подобное, но с кодом, где я могу поместить изображения, стили шрифтов, ... в коде ?.

Возможно, есть способ изменить текст. И оставить изображения с несколькими div?

TEXT (изменения)

IMAGE

TEXT (изменения)

http://oihanevalbuenaredondo.be/2017/01/17/current-favorites-voorbeeld/ -> это пример поста я хочу на 2-х языках. Мне нужно несколько изображений, а текст в сообщении должен быть изменен с одного языка на другой, с кнопками

Answer 1

Вы можете создать свой собственный, используя этот простой код, он просто получает запись и заменяет ее на ее значение в массив. Пример:

var lang = { 
    "helloWorld": { 
     en: "Hello World", 
     fr: "Bonjour monde" 
    }, 
    "mynameis": { 
     en: "My name is", 
     fr: "Mon nom est" 
    } 
} 

$(document).ready(function(){ 
    $(body).find('.trn').each(function($elem){ 
     var currentLang = 'en'; 
     $($elem).html(lang[$($elem).data('trn')][currentLang]); 
    }); 
}); 

Для каждого текста вашей потребности добавить данные с помощью ключа и класса trn, так же, как это.

<span class="trn" data-trn="mynameis"></span> Nicolas 

this link Проверить для получения дополнительной информации

надеется, что это поможет!

• Nic

Answer 2

Вы апостроф в тексте первого OnClick «не может», которая является причиной Javascript думать, что это конец строки. Вы должны добавить обратную косую черту «может \ 'т»

<button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>This is the default text. I can\'t put any css or html in here';">English</button>&#160; <button onclick="document.getElementById('chgtext').innerHTML='<p>Blue</p>Text changed into Another language';">Other language</button> 
 

 
<div id="chgtext"><p>Blue</p>This is the default text. I can't put any css or html in here</div> 
 

 
<style> 
 
p {color:blue;} 
 
</style>

Answer 3

Вы должны перебрать все дети вашего элемента. Использование JQuery, и предполагая только один уровень потомков, вы могли бы использовать что-то вроде этого ...

$('#chgtxt').children().each(function() { 
    var oldtext = $(this).text(); 
    if (oldtext) { 
    var newtext = oldtext+" CHANGED. "; 
    $(this).text(newtext); 
    } 
}); 

Answer 4

Вам нужно бежать все кавычки внутри вставленного содержимого. Посмотрите фрагмент и попробуйте нажать на кнопки

<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> NOW I can put any css or <span style=\'color :red;\'>html</span> in here';">English</button> &#160; 
 
<button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style=\'color :red;\'>language</span>';">Other language</button> 
 

 
<div id="chgtext">This is the default text. I can't put any css or html in here</div>

<p> 
 
<style> 
 
#eng_lang { 
 
    display: block; 
 
} 
 
#nl_lang { 
 
    display: none; 
 
} 
 
</style> 
 
<button onclick=" document.getElementById('eng_lang').style.display='block'; document.getElementById('nl_lang').style.display='none'">English</button> &#160; <button onclick="document.getElementById('eng_lang').style.display='none';document.getElementById('nl_lang').style.display='block'">Nederlands</button></p> 
 
<div id="eng_lang"> 
 
    <h2>Here is some text 
 
    <span style="color: green;">english</span> 
 
    </h2> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRo2yKPonCY-BZrk9s69oH_-gal_yxDRgHxdyXhqP79D0YESVuB" width="120px" height="120px"> 
 
    Now you can place here any text, tags and images. 
 
</div> 
 
<div id="nl_lang"> 
 
    <h2>Here is another text 
 
    <span style="color: blue;">Netherlands</span> 
 
    </h2> 
 
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQcE1c0chXugmq_V5qwp51ffAuP7ecGMsWmshnntwAXVGUgVptH" width="100px" height="100px"> 
 
    Put here whatever you want. 
 
    <p>This is paragraph</p> 
 
</div>