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
How Filereader.Readastext in HTML5 File API Works
Open Ie Browser in Firefox/Chrome Page
Add/Delete Table Rows Dynamically Using JavaScript
\U200B (Zero Width Space) Characters in My Js Code. Where Did They Come From
How to Upload Image into HTML5 Canvas
Passing Variables Through Handlebars Partial
Getting Mouse Location in Canvas
How to Export HTML Table to Excel Using JavaScript
Use Functions Defined in Es6 Module Directly in HTML
Getelementsbyname() Not Working
JavaScript Function Name Cannot Set as Click
Force Browser to Trigger Reflow While Changing CSS
How to Use JavaScript to Change the Form Action
Error: Failed to Execute 'Appendchild' on 'Node': Parameter 1 Is Not of Type 'Node'
How to Change CSS :Root Color Variables in JavaScript
How to Create an Asynchronous Function in JavaScript
Play .Wav Sound File Encoded in Base64 with JavaScript
What Are the Differences Between Deferred, Promise and Future in JavaScript