Changing Button Text Onclick

Changing button text onclick

If I've understood your question correctly, you want to toggle between 'Open Curtain' and 'Close Curtain' -- changing to the 'open curtain' if it's closed or vice versa. If that's what you need this will work.

function change() // no ';' here
{
if (this.value=="Close Curtain") this.value = "Open Curtain";
else this.value = "Close Curtain";
}

Note that you don't need to use document.getElementById("myButton1") inside change as it is called in the context of myButton1 -- what I mean by context you'll come to know later, on reading books about JS.

UPDATE:

I was wrong. Not as I said earlier, this won't refer to the element itself. You can use this:

function change() // no ';' here
{
var elem = document.getElementById("myButton1");
if (elem.value=="Close Curtain") elem.value = "Open Curtain";
else elem.value = "Close Curtain";
}

Javascript: Change button text change after click

This can be achieved using vanilla javascript via the following:

/*Fetch the buttom element*/const button = document.body.querySelector('[data-target="#collapseExample"]');
/*Add click event listener where we will provide logic that updates the button text*/button.addEventListener('click', function() { /* Update the text of the button to toggle beween "More" and "Less" when clicked */ if(button.innerText.toLowerCase() === 'less') { button.innerText = 'More'; } else { button.innerText = 'Less'; }});
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">More</button>
<div class="collapse" id="collapseExample"> <p>Test</p></div>

Changing text of an html button by click on it

You can follow this html and script.

use input instead of button.

 <input onclick="func()" id="accountDetails" type="button" value="click"></input>

instead of

<button onclick="func()" id="accountDetails" runat="server"</button>

Then the document.getElementById('accountDetails') need to set value instead of textContent

function func() {    document.getElementById('accountDetails').value  = 'server';}
<input onclick="func()" id="accountDetails" type="button" value="click"></input>

Changing button text onclick in javascript

function myFunction() {   var element = document.body;   var btn = document.getElementById("modeSwitcher");   element.classList.toggle("dark-mode");   if(element.classList.contains("dark-mode"))    btn.innerHTML= "Turn off dark mode";   else     btn.innerHTML= "Turn on dark mode";}
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background-color: white; color: black;}
.dark-mode { background-color: black; color: white;}
<button onclick="myFunction()" id="modeSwitcher">Turn on dark mode</button>

Change button's text and function

Here you have working code snippet for this:

$(document).ready(function() {  function startSearch() {     console.log('Here your start search procedure');  }    function stopSearch() {     console.log('Here your stop search procedure');  }    $('.search-button').click(function() {      var buttonSelector = '.search-button';            if($(buttonSelector).hasClass('searching')) {          $(buttonSelector).removeClass('searching');          $(buttonSelector).text('Start search');          stopSearch();      } else {          $(buttonSelector).addClass('searching');          $(buttonSelector).text('Stop search');          startSearch();      }    });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="uk-button uk-position-bottom search-button">Start search</button>

OnClick change button text and URL

What you are describing is a form being submitted, so it doesn't make a lot of sense to link to another page.

const submitButton = document.querySelector('form button')
const form = document.querySelector('form')

const start = 'Start'
const stop = 'Stop'

const startApiEndpoint = 'https://link_to_start_api'
const stopApiEndpoint = 'https://link_to_stop_api'

// Listen for form submit
form.addEventListener('submit', e => {
e.preventDefault()
if (submitButton.textContent.includes(start)) {
api(startApiEndpoint)
submitButton.textContent = stop
} else {
api(stopApiEndpoint)
submitButton.textContent = start
}
})

// Hit api endpoint and do something with the response
function api(endpoint) {
console.log(`Fetching ${endpoint}`)
fetch(endpoint)
.then(response => response.json())
.then(data => {
console.log(data)
// Check for success and update button text
})
.catch((error) => {
console.error(error);
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

<form class="container">
<h2>start activity</h2>
<button class="btn btn-danger">Start</button>
</form>

Change button text with onclick

Check this, hope it helps.

   function hideOnClk(id){
if(id == "save"){
document.getElementById("unsave").style.display="block";
document.getElementById(id).style.display="none";
}else{
document.getElementById("save").style.display="block";
document.getElementById(id).style.display="none";
}
}

<form id="save-form" method="" action="" novalidate="novalidate">
<button id="save" type="button" onclick="hideOnClk(this.id)">Save</button>
<button id="unsave" type="button" class="hide" onclick="hideOnClk(this.id)">Unsave</button>
</form>

How do I change my button text onclick?

Try this it will work :

change the html content of button on slideToggle().

Html :

<button id="up">↑</button>
<p>Wow!</p>

JQuery :

$(document).ready(function(){
$("button").click(function(){
var arrowId = $(this).attr('id');
if (arrowId == 'up') {
$("button").html('↓');
$(this).attr('id','down');
} else {
$("button").html('↑');
$(this).attr('id','up');
}
$("p").slideToggle();
});
});

Demo : https://jsfiddle.net/64a6fafh/1/



Related Topics



Leave a reply



Submit