Changing button text onclick

后端未结

关注

 18  2408

野性不改

When I click on myButton1 button, I want the value to change to Close Curtain from Open Curtain.
HTML:

相关标签:

18条回答

攒了一身酷

2020-11-27 03:45
It seems like there is just a simple typo error:
1. Remove the semicolon after change(), there should not be any in the function declaration.
2. 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" />
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

不知归路

2020-11-27 03:46

<!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>

0 讨论(0)

执笔经年

2020-11-27 03:48

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>

0 讨论(0)

孤街浪徒

2020-11-27 03:48
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'; }" />
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

你的背包

2020-11-27 03:50

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

0 讨论(0)

栀梦

2020-11-27 03:52

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

0 讨论(0)

1 2 3 下一页