[英]I want to insert text using JavaScript when I click on button. But ```.value()``` doesn't seems to work
[英]I want text to change with a button. Can't put images or anything in it
我想使用2個按鈕更改某個文本。 這就是我現在所擁有的,效果很好。 (不要介意語言,我是荷蘭人)
<button onclick="document.getElementById('chgtext').innerHTML='NU WORDT HET ENGELS';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Nu terug nederlands';">Nederlands</button> <div id="chgtext">Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)</div>
我想做的是將圖像和<字體樣式,....放入變化的文本中。 但是我不能。 我已經嘗試使用\\'來做到這一點,但是它也不起作用。 這是我擁有的另一個代碼,在代碼段中工作正常,但在我的博客上不起作用:
<button onclick="document.getElementById('chgtext').innerHTML='This is the default text. <img src=\\'http://lorempixel.com/output/nightlife-qc-50-50-6.jpg\\'> with image <span style=\\'color :red;\\'>and color</span>';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Text changed into Another <span style=\\'color :red;\\'>language</span>';">Nederlands</button> <div id="chgtext">This is the default text. </div>
這就是我得到的-> http://oihanevalbuenaredondo.be/2017/02/03/test-2/
我需要的最終結果是:
<button onclick="document.getElementById('chgtext').innerHTML='NU WORDT HET ENGELS';">English</button>   <button onclick="document.getElementById('chgtext').innerHTML='Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info@rosalea.be (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)';">Nederlands</button> <div id="chgtext">Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info@rosalea.be (Of klik in de sidebar op het<font color="white">-</font><i class="fa fa-envelope"></i><font color="white">-</font>icoontje onder <em>social </em>)</div>
但是,當然那是不可能的,我該如何實現呢? (我沒有2個用於HTML和CSS的文本插入框,在創建wordpress博客文章時,只有1個框可用於插入代碼
您可能在Escaping
報價時遇到了問題
例如,當在javascript中設置值時,您可以使用單引號或雙引號
someVar = "a value"; // this works fine
someVar = 'a value';// this works too
someVar = "a value that's an issue";// will work
someVar = 'a value that's an issue';// but this one breaks
要解決該問題,您可以使用\\
來像這樣轉義它
someVar = 'a value that\'s an issue';// now it works
我將您的語言添加為data-
attribute,但是如果您願意,可以將它作為一個類來完成,甚至可以讀取按鈕文本本身。
我還將您的javascript分成了一個文檔就緒塊,它將使您的所有腳本邏輯與顯示區分開,並使以后的編輯更加輕松(最佳實踐)。
您會發現難以置信的有用的一種資源是jQuery API
有時,所見即所得的編輯器會刪除腳本並重新格式化某些行情。 您可能需要在WP中更改一些設置以將您的腳本元素容納在帖子中
<script>
$(document).ready(function() {
$('.btn').on('click', function(e) {
output = '';
switch ($(this).data('lang')) {
case 'English':
output = 'This is the default text.'+
'<img src=\'http://lorempixel.com/output/nightlife-q-c-50-50-6.jpg\'> with image <span class=\'red\'>and color</span><p>Do you have a question, an idea for a post you\'d like to see on my blog, or any other reason you want to contact me. please send me email at info@rosalea.be (Or, in the sidebar on the - icon under social)</p>';
break;
case 'Nederlands':
output = 'Heb je een vraag, een idee voor een post die je graag op mijn blog zou willen zien, of een andere reden waarom je mij wilt contacteren. Stuur me dan e-mail op info@rosalea.be (Of klik in de sidebar op het<span class="white">-</span><i class="fa fa-envelope"></i><span class="white">-</span>icoontje onder <em>social </em>)';
break;
default:
output = 'This is the default text.';
}
$('#chgtext').html(output);
})
})
</script>
<div>
<button class="btn" data-lang="English">English</button>
<button class="btn" data-lang="Nederlands">Nederlands</button></div>
<div id="chgtext">This is the default text.</div>
/* add these lines to your css file if you want */
.white{
color:white;
}
.red{
color:red;
}
/*these should be in your framework already */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.