Changing button text onclick - javascript

When I click on myButton1 button, I want the value to change to Close Curtain from Open Curtain.HTML:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>
Javascript:
function change();
{
document.getElementById("myButton1").value="Close Curtain";
}
The button is displaying open curtain right now and I want it to change to close curtain, is this correct?

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";
}

When using the <button> element (or maybe others?) setting 'value' will not change the text, but innerHTML will.
var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
When printed to the console:
<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>

It seems like there is just a simple typo error:
Remove the semicolon after change(), there should not be any in the
function declaration.
Add a quote in front of the myButton1 declaration.
Corrected code:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
A faster and simpler solution would be to include the code in your button and use the keyword this to access the button.
<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />

There are lots of ways. And this should work too in all browsers and you don't have to use document.getElementById anymore since you're passing the element itself to the function.
<input type="button" value="Open Curtain" onclick="return change(this);" />
<script type="text/javascript">
function change( el )
{
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}
</script>

this code work for me
var btn = document.getElementById("your_btn_id");
if(btn.innerText=="show"){
btn.innerText="hide";
}
else{
btn.innerText="show";
}
using value is not work in my case

Add this function to the script
function myFunction() {
var btn = document.getElementById("myButton");
if (btn.value == "Open Curtain") {
btn.value = "Close Curtain";
btn.innerHTML = "Close Curtain";
}
else {
btn.value = "Open Curtain";
btn.innerHTML = "Open Curtain";
}
}
and edit the button
<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>

If you prefer binding your events outside the html-markup (in the javascript) you could do it like this:
document.getElementById("curtainInput").addEventListener(
"click",
function(event) {
if (event.target.value === "Open Curtain") {
event.target.value = "Close Curtain";
} else {
event.target.value = "Open Curtain";
}
},
false
);
<!doctype html>
<html>
<body>
<input
id="curtainInput"
type="button"
value="Open Curtain" />
</body>
</html>

i know this is an old post but there is an option to sent the elemd id with the function call:
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
function f1(objButton)
{
if (objButton.innerHTML=="EXPAND") objButton.innerHTML = "MINIMIZE";
else objButton.innerHTML = "EXPAND";
}

You are missing an opening quote on the id= and you have a semi-colon after the function declaration. Also, the input tag does not need a closing tag.
This works:
<input onclick="change()" type="button" value="Open Curtain" id="myButton1">
<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>

Try this,
<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
ref.value="Close Curtain";
}
</script>

this can be done easily with a vbs code (as i'm not so familiar with js )
<input type="button" id="btn" Value="Close" onclick="check">
<script Language="VBScript">
sub check
if btn.Value="Close" then btn.Value="Open"
end sub
</script>
and you're done , however this changes the Name to display only and does not change the function {onclick} , i did some researches on how to do the second one and seem there isnt' something like
btn.onclick = ".."
but i figured out a way using <"span"> tag it goes like this :
<script Language="VBScript">
Sub function1
MsgBox "function1"
span.InnerHTML= "<Input type=""button"" Value=""button2"" onclick=""function2"">"
End Sub
Sub function2
MsgBox "function2"
span.InnerHTML = "<Input type=""button"" Value=""button1"" onclick=""function1"">"
End Sub
</script>
<body>
<span id="span" name="span" >
<input type="button" Value="button1" onclick="function1">
</span>
</body>
try it yourself , change the codes in sub function1 and sub function2, basically all you need to know to make it in jscript is the line
span.InnerHTML = "..."
the rest is your code you wanna execute
hope this helps :D

This worked fine for me. I had multiple buttons which I wanted to toggle the input value text from 'Add Range' to 'Remove Range'
<input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />

var count=0;
document.getElementById("play").onclick = function(){
if(count%2 =="1"){
document.getElementById("video").pause();
document.getElementById("play").innerHTML ="Pause";
}else {
document.getElementById("video").play();
document.getElementById("play").innerHTML ="Play";
}
++count;

This is simple way to change Submit to loading state
<button id="custSub" type="submit" class="button left tiny" data-text-swap="Processing.. ">Submit <i class="fa fa-angle-double-right"></i></button>
<script>
jQuery(document).ready(function ($) {
$("button").on("click", function() {
var el = $(this);
if (el.html() == el.data("text-swap")) {
el.html(el.data("text-original"));
} else {
el.data("text-original", el.html());
el.html(el.data("text-swap"));
}
setTimeout(function () {
el.html(el.data("text-original"));
}, 500);
});
});
</script>

<input type="button" class="btn btn-default" value="click me changtext" id="myButton1" onClick="changetext()" >
<script>
function changetext() {
var elem = document.getElementById("myButton1");
if (elem.value=="click me change text")
{
elem.value = "changed text here";
}
else
{
elem.value = "click me change text";
}
}
</script>

If not opposed to or may already be using jQuery, you could do this without the approach of having to use obtrusive js. Hope it helps. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript Also like to reference, https://stackoverflow.com/a/3910750/4812515 for a discussion on this.
HTML:
<input type="button" value="Open Curtain" id=myButton1"></input>
Javascript:
$('#myButton1').click(function() {
var self = this;
change(self);
});
function change( el ) {
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
}

<!DOCTYPE html>
<html>
<head>
<title>events2</title>
</head>
<body>
<script>
function fun() {
document.getElementById("but").value = "onclickIChange";
}
</script>
<form>
<input type="button" value="Button" onclick="fun()" id="but" name="but">
</form>
</body>
</html>

Or more simple without having to name the element (with 'button' element):
<button onclick="toggleLog(this)">Stop logs</button>
and script :
var bWriteLog = true;
function toggleLog(elt) {
bWriteLog = !bWriteLog;
elt.innerHTML = bWriteLog ? 'Stop logs' : 'Watch logs';
}

function change() {
myButton1.value=="Open Curtain" ? myButton1.value="Close Curtain" : myButton1.value="Open Curtain";
}

Related

Change button text in jQuery

I have a table which I want to hide or show on the click of a button. Also, when the button is clicked, its text should be changed appropriately. I have the following code, but the button's text is not being changed:
<script>
$(document).ready(function () {
$("#myButton").click(function () {
$(".myTable").toggle(1000, "linear", function changeButtonText() {
$("#myButton").text = ($("#myButton").text === "Hide table" ? "Show table" : "Hide table");
});
});
});
</script>
...
<input type="button" id="myButton" value="Hide table" />
<table class="myTable">
...
</table>
Try this:
$("#myButton").val($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");
You didn't use the function in the right way:
If the element is button:
Error:
$("#myButton").text = ("new text");
Work:
$("#myButton").text("new text");
Working example:
$("#myButton").text("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="myButton">Old text</button>
If the element is input type="button":
Error:
$("#myButton").text = ("new text");
Work:
$("#myButton").val("new text");
Working example:
$("#myButton").val("New text");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="myButton" value="Hide table" />
use this to change the text of your button
$("#myButton").attr('value', 'newText');
I have to tweak your code and worked for me.You have to pass the vale like $("#myButton").val(Buttontext);
$(document).ready(function() {
$("#myButton").click(function() {
$(".myTable").toggle(1000, "linear", function changeButtonText() {
var text= ($("#myButton").val() === "Hide table" ? "Show table" : "Hide table");
$("#myButton").val(text);
});
});
});
fiddle work for me
you can use if statement to check the value of your button but first you must get the attribute which is value.
$("#myButton").click(function () {
$(".myTable").toggle(1000, "linear", function changeButtonText() {
var text = $("#myButton").attr("value");
if(text == "Hide table") {
$("#myButton").attr("value","Show table");
}
else {
$("#myButton").attr("value","Hide table");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...
<button id="myButton">Hide table</button>
<table class="myTable">
<tr><td>works</td></tr>
</table>
<script>
$("#myButton").click(function () {
if($("#myButton").text() == "Hide table") {
$(".myTable").hide();
$("#myButton").text("Show table");
}
else {
$(".myTable").show();
$("#myButton").text("Hide table");
}
});
</script>
Put the javascript at the bottom of your body delete the ready function this works for me

Make a div invisible in JavaScript after confirmation

I want to make a div visible when clicking on a button. Button should ask Yes/No confirmation. Div should be visible only when user clicks on 'Yes'.
My code is here
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show Div" onclick="confirm_hide(this)"/>
JavaScript
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else return false;
}
function clicked() {
var name = document.getElementById('name').value;
if(confirm('Hello ' + name + ', great to see you!'))
{
document.getElementById('nameDiv').innerHTML = 'Hello ' + name + ', great to see you!';
document.getElementById('mainDiv').style.display = "none";
}
}
<div id="mainDiv">
<input type="text" class="form" name="name" placeholder="Your name here!" id="name"/>
<input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<br>
<div id="nameDiv"></div>
According to a similar question posted before there is no way to
change the confirm dialogs button.
I would suggest you can use bootstrap modal or jQueryUI.
There is even a workaround in the jQueryUI for this.
Or you can use bootstrap Modal. Here is the link for it
I hope my suggestions help with your problem.
You can do this
function confirm_hide(ele){
if (confirm('Do you wish to hide?')) {
ele.style.display = 'none';
document.getElementById('Mydiv').style.display = 'block';
return true;
} else {
document.getElementById('Mydiv').style.display = 'none';
return false;
}
}
You can do like this also:
function confirm_hide(ele){
if(confirm('Do you wish to hide?')){
document.getElementById('Mydiv').style.display = 'block';
document.getElementById('mainDiv').style.display = 'none';
}
}
<div id="Mydiv" style="display:none;" >Haiii</div>
<div id="mainDiv">
<input type="button" name="answer" value="Show Div" onclick="confirm_hide()"/>
</div>
HTML
<div id="Mydiv" style="display:none;" >Haiii</div>
<input type="button" name="answer" value="Show" class="confirm">
JS
var div = document.getElementById("mydiv");
var button = document.getElementsByClassName("confirm");
button.addEventListener('click',confirm_hide());
function confirm_hide(){
var hide = confirm('Do you wish to hide?');
if(hide == true){
button.style.display = 'none';
div.style.display = 'block';
}
else{
button.style.display = 'block';
div.style.display = 'none';
}
}

Javascript - Onchange Event for checkbox works only in Firefox and Opera?

Here are two buttons which I want to change the css display property, depending on the state of a checkbox.
<input type="submit" id="unchecked" class="button red" value="Start My PPI Claim" style="display:block" onclick="location.href = 'https://www.gladstonebrookes.co.uk/extended-form';" />
<input type="submit" id="checked" class="button yellow" name="submit" value="Start My PPI Claim" style="display:none" onClick="javascript:return fncValidateForm(this)" />
Here is the code for the checkbox
<input type="checkbox" name="checkbox" id="checkbox" onchange="toggleCheckbox(this)" />
And finally the Javascript function
function toggleCheckbox (element) {
if(element.checked) {
document.getElementById("checked").style = "display:block";
document.getElementById("unchecked").style = "display:none";
}
else if(!element.checked) {
document.getElementById("checked").style = "display:none";
document.getElementById("unchecked").style = "display:block";
}
}
This works fine in Firefox and Opera but nothing happens Onchange in Chrome, Safari and IE. Any suggestions? Thanks in advance.
Can you try this
function toggleCheckbox (element) {
if(element.checked) {
document.getElementById("checked").style.display = "block";
document.getElementById("unchecked").style.display = "none";
}
else if(!element.checked) {
document.getElementById("checked").style.display = "none";
document.getElementById("unchecked").style.display = "block";
}
}
Tidy version if you like:
function toggleCheckbox (element) {
var b1 = !element.checked ? "none" : "block";
var b2 = !element.checked ? "block" : "none";
document.getElementById("checked").style.display = b1;
document.getElementById("unchecked").style.display = b2;
}
Super quick JQuery fix, :)
$(document).ready(function() {
$("#checkbox").click(function (){
$('#unchecked, #checked').toggle();
});
});
DEMO

alert box not working in jsp

I added a stylish alert box to my page, resource is here . But problem is after clicking ok, confirmsubmit.jsp is not opening. Also in that alert cancel button is not appearing why?
javascript
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
<!--
function confirmation() {
var answer = csscody.alert("Confirm submit?")// added csscody here for alert but after clicking ok nothing happens
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;// here cancel button is not coming
}
}
//-->
</script>
</form>
html
<input type="text" name="textboxname"/>
<input type="submit" onclick="return confirmation()"/>
</form>
UPDATE
View below code ,it uses button instead of link
<form action="confirmsubmit.jsp" method="POST">
<script type="text/javascript">
$().ready(function() {
$('#btn_submit').click(function(e) {
e.preventDefault();
var that = this;
var text = "si o no compa?";
csscody.confirm(text, {
onComplete: function(e) {
if (e) {
window.location = "confirmsubmit.jsp";
}
else {
return false;
}
}
})
});
});
</script>
<input type="text" name="textboxname"/>
<input type="submit" id="btn_submit" onclick="return confirmation()"/>
</form>
You willl have to use confirm instead of alert which will giv eyou both ok and cancel buttons which return true and false respectively. And also take off return from onclick
HTML
<form action = "confirmsubmit.jsp" method = "POST">
<input type = "text" name = "textboxname" />
<input type = "submit" onclick = "confirmation();" />
</form>
Javascript
function confirmation() {
var answer = confirm("Confirm submit?");
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;
}
}

How to add Javascript "Stop" and "Reset" Button to the following:

I need help with adding a stop and reset button for the following count up, so that it doesnt start till you press start, and it doesnt reset unless you press reset, also a stop button would be good! Thanks! cause as you see the buttons i have dont work. Thanks
<html>
<head>
<title>Untitled Document</title>
</head>
<script>
var timer;
function startCount()
{
timer = setInterval(count,1);
}
function count()
{
var el = document.getElementById('counter');
var currentNumber = parseFloat(el.innerHTML);
el.innerHTML = currentNumber+0.00000003831417624521;
}
</script>
<body onload="startCount();">
<div id="counter">0</div>
<input type="button" value="reset" id="reset" />
<input type="button" value="start" id="start" />
</body>
</html>
function stopCount() {
clearInterval(timer);
}
function resetCount() {
document.getElementById('counter').innerHtml = 0;
}
And use jQuery to attach event listeners to some html element, or if you are never going to get complicated enough to need it, just stick them in the onclick properties as recommended by SimonMayer.
How about this?
<script>
var timer;
var stop;
function startCount()
{
stop = false;
timer = setInterval(count,1);
}
function stopCount()
{
stop = true;
}
function count()
{
if(stop == false)
{
var el = document.getElementById('counter');
var currentNumber = parseFloat(el.innerHTML);
el.innerHTML = currentNumber+0.00000003831417624521;
}
}
</script>
</head>
<body>
<div id="counter">0</div>
<input type="button" value="reset" id="reset" onclick="document.getElementById('counter').innerHTML = 0;" />
<input type="button" value="start" id="start" onclick="startCount();" />
<input type="button" value="stop" id="stop" onclick="stopCount();" />
</body>
</html>
EDIT - now includes stop functionality
NOTE - I have moved the <script> into the <head> - All content should either be inside the head or the body.

Categories

Resources