Смена текста

На shpargalkablog.ru уже был показан скрипт меняющегося текста на jQuery. Теперь рассмотрим варианты, где смена происходит по щелчку мышки.

Самый простой вариант

<input type="button" value="Щелчок" onclick="this.value='Скрипт сработал'">

После щелчка кнопка перестаёт быть активной

<input type="button" value="Щелчок" onclick="this.disabled=1;  this.value='Скрипт сработал'; ">

Поменять ссылку

<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="Скрипт Упорядочить таблицу";
document.getElementById('myAnchor').href="http://shpargalkablog.ru/2011/07/uporyadochet-tablitsu-po-alfavitu.html";
document.getElementById('myAnchor').target="_blank";
}
</script>

<a id="myAnchor" href="http://shpargalkablog.ru/2010/11/poyavlyayushchiesya-commentarii.html">Скрипт "Показать скрыть текст"</a>
<input type="button" onclick="changeLink()" value="Change link">

Скрипт "Показать скрыть текст"

Заменить кнопку на ссылку

<script type="text/javascript">
function changeText(){
 document.getElementById('boldStuff').innerHTML = 'Текст изменился';
}
</script>

<a id='boldStuff' href="#" onclick="changeText();return false;">Нажать</a>

Нажать

Смена на текст, заполненный в окне

<script type="text/javascript">
function changeText2(){
 var userInput = document.getElementById('userInput').value;
 document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>
Поменяем текст на введённый в форму ниже <b id='boldStuff2'>а именно на</b> </p>
<input type='text' id='userInput' value=' Введите вашу фразу ' /><input type='button' onclick='changeText2()' value='Change Text'/>

Поменяем текст на введённый в форму ниже а именно на

Выбор из меню

<script language="javascript">
      var selected_state;

      function ckswapText(obj)
      {
         selected_state = obj.value;
         
         if(selected_state == "")
           return;

         if(selected_state =="AZ")
           changeText();
         else if( selected_state =="CA")
           swapText3();
         else if( selected_state == "CO")
           swapText4();
         else
           olswapText();
      }

      function changeText(){
         document.getElementById('boldStuff').innerHTML = 'порода собак';
      }

      function swapText3(){
         document.getElementById('boldStuff').innerHTML = 'порода кошек';
      }

      function swapText4(){
         document.getElementById('boldStuff').innerHTML = 'порода кроликов';
      }
      function olswapText(){
         document.getElementById('boldStuff').innerHTML = 'порода лошадей';
      }
      </script> 

<select class="apply_text" size="1" name="billto_state" id="billto_state" onchange="ckswapText(this);">
<option value="" selected>Алабай</option>
<option value="AL">Буденновская порода</option>
<option value="AK">Алтайская порода</option>
<option value="AZ">Австралийская овчарка</option>
<option value="AR">Австралийский Пони</option>
<option value="CA">Турецкая ангора</option>
<option value="CO">Огневка</option>
<option value="WY">Бурятская порода</option>
</select>
<p>
Это <b id='boldStuff'>порода собак</b> </p>

Поменять два раза туда и обратно

<script type='text/JavaScript'>
     function verocultar(cual) {
          var c=cual.nextSibling;
          if(c.innerHTML=='сказ два') {
               c.innerHTML='сказ раз';
          } else {
               c.innerHTML='сказ два';
          }
          return false;
     }
</script><a onclick="return verocultar(this);"
     href="javascript:void(0);">замена</a><div>
....... содержание .......
</div>

замена....... содержание .......

Добавить текст в textarea

<textarea id="text">строка</textarea>
<script language="javascript" type="text/javascript">
var text=document.getElementById("text");
text.value="<b>"+text.value+"</b>";
</script>

строка

Добавить текст в textarea по щелчку

<script type="text/javascript">
function changeLink()
{
var text=document.getElementById("myAnchor");
document.getElementById('myAnchor').value="<b>"+text.value+"</b>";
}
</script>

<input type="text" id="myAnchor" value="значение"/>
<input type="button" onclick="changeLink()" value="Change link">

Выделение части текста в textarea

Какой-то текст. Если его часть выделить и нажать на кнопку, то этот текст будет окружён тегами b

<textarea id="textarea">Какой-то текст. Если его часть выделить и нажать на кнопку, то этот текст будет окружён тегами b</textarea>
<br />
<button type="button" id="button">кнопка</button>

<script>
var textarea = document.getElementById("textarea");
var button = document.getElementById("button");
button.onclick = function() {
var len = textarea.value.length,
    start = textarea.selectionStart,
    end = textarea.selectionEnd,
    sel = textarea.value.substring(start, end),
    replace = '<b>' + sel + '<b>';
textarea.value = textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
}
</script>

Дополнительные ссылки: developer.mozilla.org с примером, corpocrat.com с вариантом для старых IE

Заменить символ с помощью скрипта

<script type="text/javascript">
function decode() {
 var obj = document.getElementById('dencoder');
 var encoded = obj.value;
 obj.value = decodeURIComponent(encoded.replace(/\</g,  "&#12296;"));
 var encoded1 = obj.value;
 obj.value = decodeURIComponent(encoded1.replace(/\>/g,  "&#12297;"));
}
</script><form onsubmit="return false;">
<textarea id="dencoder" rows="1" cols="50"><b>строка1</b></textarea><input type="button" value="Decode" onclick="decode()"/>
</form>

или

<script>
document.documentElement.innerHTML = document.documentElement.innerHTML.replace(/858/g,  &quot;505&quot;);
</script>

Зачем всё это

В "Приложении 5" была реализована функция смены фона. При этом кнопка чередует свой цвет и текст. Конечную реализацию можете посмотреть в комментариях к статье http://shpargalkablog.ru/2011/08/fon-dlya-saita-html.html.