[Thủ Thuật] javascript: Thay đổi văn bản

- Với 1 chút từ khóa theo phong cách chơi blog, mình tìm được blogger có bài đăng những mã javascript khá hay. Nhưng mình chỉ đăng code, còn việc thực thi và áp dụng thủ thuật tuỳ thuộc ở người ứng dụng. Các bạn có thể tự tìm hiểu theo link nguồn ở cuối bài đăng:
- Các bạn có thể xem demo bằng cách copy code vào Notepad.exe và lưu lại với tên.html !

1.Changing text with javascript after clicking a link

<script language="javascript">
function changeTextToAAA()
{
document.getElementById("divA").innerHTML = 'Text changed to AAA';
}

function changeTextToBBB()
{
document.getElementById("divA").innerHTML = 'Text changed to BBB';
}
</script>

<a href="javascript:changeTextToAAA();">Change text to AAA</a>
<a href="javascript:changeTextToBBB();">Change text to BBB</a>

<div id="divA"><h4>This text will be changed</h4></div>

2.Changing text with only one jscript function called from two links

<script language="javascript">
function changeText(newText)
{
document.getElementById("divB").innerHTML = newText;
}
</script>

<a href="javascript:changeText('First');">Change text to First</a>
<a href="javascript:changeText('Second');">Change text to Second</a>

<div id="divB"><h4>This text will be changed</h4></div>

3.One link changing text to pressed or unpressed

<script language="javascript">
function changeTextOfLink()
{
var link = document.getElementById("linkClick");

if (link.innerHTML == "Unpressed")
{
link.innerHTML = 'Pressed';
}
else
{
link.innerHTML = 'Unpressed';
}
}
</script>

<a href="javascript:changeTextOfLink();" id="linkClick">Unpressed</a>

4.Hide or show text in div and changing link text to "Hide" or "Show"

<script language="javascript">
function divToHide(divToHideOrShow) {
var link = document.getElementById("linkId1");
var div = document.getElementById(divToHideOrShow);

if (div.style.display == "block")
{
div.style.display = "none";
link.innerHTML = 'Show'
}
else
{
div.style.display = "block";
link.innerHTML = 'Hide';
}
}
</script>

<a href="javascript:divToHide('divShowHide');" id="linkId1">Hide</a>
<div id="divShowHide" style="position:absolute; display: block"><h4>This div will be hidden</h4></div>