Как изменить текст при нажатии на кнопку html

На 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

<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,  "〈"));
 var encoded1 = obj.value;
 obj.value = decodeURIComponent(encoded1.replace(/>/g,  "〉"));
}
</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>

Зачем всё это

 Привет, друзья. Вопрос был от читателя, как сделать смену текста на
странице, когда при нажатие на кнопку один текст меняется на другой и обратно.  Вариант достаточно распространённый и, часто
встречающийся. Покажу несколько вариантов, как по клику быстро сменить текст
на другой .  

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

1.
Вариант. Использовать подготовленный текст, кнопку, с помощью которой
будет осуществляться замена, и скрипт JS.

2. Вариант. Смена текущего текст без кнопки.

3. Вариант. Как заменить содержимое блока на другое при клике, а при
повторном, обратно.

Есть ещё вариант без кнопки. Работает туда и обратно, один раз

1. JavaScript Change Button Text on Load
2. JavaScript Change Button Text on Mouseover
3. JavaScript Change Button Text on Click
4. JavaScript Change Button Text Using jQuery

We aim to learn about JavaScript change button text via example code. It shows how the button text changes on load, click, and mouseover. It also exemplifies the use of jQuery to change the button text.

JavaScript Change Button Text on Load

If you have HTML <input> Element like input[type='button'] or input[type='submit'] then you can change button text in the following way.

HTML Code:

<input id="btn" type="button" value="Update">
<input id="btnSubmit" type="submit" value="Update">

JavaScript Code:

document.querySelector('#btn').value = 'Remove';
document.querySelector('#btnSubmit').value = 'Remove';

You can also change button text of HTML <button> Element by using any of given methods below (given methods are .innerHTML, .innerText, and .textContent).

HTML Code:

<button id="btn" type="button" value="Show Result">Show Result</button>
<button id="btnSubmit" type="submit" value="Submit Result">Submit Result</button>

JavaScript Code:

//querySelector selects the element whose id's value is btn
document.querySelector('#btn').innerHTML = 'Hide Result';
document.querySelector('#btn').innerText = 'Hide Result';
document.querySelector('#btn').textContent = 'Hide Result';

//querySelector selects the element whose id's value is btnSubmit
document.querySelector('#btnSubmit').innerHTML = 'Hide Result';
document.querySelector('#btnSubmit').innerText = 'Hide Result';
document.querySelector('#btnSubmit').textContent = 'Hide Result';

Can we use .innerHTML, .innerText, and .textContent for HTML <input> element? No. The reason is <input> is an empty element while <button> is a container tag and has .innerHTML, .innerText, and .textContent properties.

Though the goal is achieved by using .innerHTML, .innerText, and .textContent, you must have certain points in your mind.

1. You may have to face cross-site security attacks due to using JavaScript .innerHTML.
2. JavaScript .innerText reduces the performance because it needs details about the layout system.
3. JavaScript .textContent does not arises any security concerns like .innerHTML. It also does not have to parse the HTML Content like .innerText which results in the best performance.

Now, you know the differences between them. So, choose any of these methods that suit your project requirements. You can read more about them here.

JavaScript Change Button Text on Mouseover

HTML Code:

<button class="button">Hide Result</button>

CSS Code:

.button {
 background-color: red;
}
.button:hover {
 background-color: green;
}

JavaScript Code:

let btn = document.querySelector(".button");

btn.addEventListener("mouseover", function() {
 	this.textContent = "Show Result!";
})
btn.addEventListener("mouseout", function() {
 	this.textContent = "Hide Result";
})

The code above should show an output where the button’s text and color change when your mouse pointer hovers the button.

The querySelector() outputs the first element that matches the defined selector. The addEventListener() attaches an event handler to the given element and sets up a method for triggering a particular event.

We use mouseover and mouseout events, and the .textContent changes the button text.

JavaScript Change Button Text on Click

HTML Code:

<input onclick="changeText()" type="button" value="Hide Result" id="btn">

JavaScript Code:

function changeText(){
 let element = document.getElementById("btn");
 if (element.value=="Hide Result") 
 	element.value = "Show Result";
 else 
 	element.value = "Hide Result";
}

changeText() runs when you click on the button. This method gets the first element that matches the specified selector using getElementById(). Then, it checks the element’s value and changes according to the if-else statement.

JavaScript Change Button Text Using jQuery

HTML Code:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<button id="button" onclick="changeText()">Hide Result</button>
 </body>
</html>

JavaScript Code:

function changeText(){
 $("#button").html('Show Result');
 $("#button").css('background-color', 'green');
}

The code above changes the button’s text from Hide Result to Show Result when you click on the button, and it also changes the button’s color to green.

The .html() sets the content of the selected element while .css() changes the background-color to green. Remember, .html() is used to for HTML <button> element.

For more detail of these functions, check this link.

You might be thinking about how can we change the text using jQuery if we have HTML <input> element? The following code is for you to understand.

HTML Code:

<!DOCTYPE>
<html>
 <head>
 	<title>Change Text</title>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </head>
 <body>
 	<input type="button" id="btnShow" value="Show" onclick="changeText()">
 </body>
</html>

JavaScript Code:

function changeText(){
 $("#btnShow").attr('value', 'Hide'); //versions older than 1.6
 $("#btnShow").prop('value', 'Hide'); //versions newer than 1.6
 $("#btnShow").css('background-color', 'yellow');
}

You can use .attr() or prop() (depending on jQuery version) to change the button text of HTML <input> element. Both, .attr() and .prop() targets the value attribute of <input> element and changes its value according to the second parameter.

In this sample code, the second parameter is Hide. The changeText() method also changes the background color to yellow using .css() function.

This post will discuss how to change the text of a button in JavaScript and jQuery.

The button element is now preferred way to create buttons over <input> element of type button. There are several ways to change the button‘s label text, which is inserted between its opening and closing tags.

1. Using jQuery

With jQuery, you can use the .text() method to replace the button‘s label text. This is demonstrated below:

Edit in JSFiddle

 
Note that the .text() method will escape the provided text as necessary to render correctly in HTML.

 
Alternatively, you can use jQuery’s .html() method to replace an element’s content with the new content completely. It uses the browser’s innerHTML property and doesn’t escape the provided text, leading to cross-site security attacks.

Edit in JSFiddle

2. Using JavaScript

In pure JavaScript, you can use either innerHTML, innerText or textContent to write text inside an element. Among them, textContent has better performance because its value is not parsed as HTML, and it also prevents XSS attacks.

Edit in JSFiddle

That’s all about changing the text of a button in JavaScript and jQuery.

Thanks for reading.

Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and help us grow. Happy coding