Question

当我点击此按钮时，我想要更改值。 HTML：

<input onclick="change()" type="button" value="Open Curtain" id=myButton1"></input>

使用Javascript：

function change();
{
document.getElementById("myButton1").value="Close Curtain";
}

按钮正在显示打开的窗帘，我希望它更改为关闭窗帘，这是正确的吗？

Answer 1

如果我正确地理解了你的问题，你想要在'Open Curtain'和'Close Curtain'之间切换 - 如果它关闭则改为'open curtain'，反之亦然。如果那就是你需要的，那就行了。

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

请注意，您不需要在document.getElementById("myButton1")的上下文中调用内部更改myButton1 - 我的意思是你会来的语境稍后要了解有关JS的书籍。

<强>更新：

我错了。不像我之前所说，this不会引用元素本身。你可以用这个：

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

Answer 2

似乎只有一个简单的拼写错误：

更改后删除分号（），不应该有任何分号功能声明。
在myButton1声明前添加引号。

更正后的代码：

<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
    document.getElementById("myButton1").value="Close Curtain"; 
}

更快更简单的解决方案是将代码包含在按钮中，并使用关键字this来访问按钮。

<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />

Answer 3

使用<button>元素（或其他人？）时，设置'值'不会更改文字，但会innerHTML。

var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';

打印到控制台时：

<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>

Answer 4

有很多方法。这应该适用于所有浏览器，并且您不必再使用document.getElementById，因为您将元素本身传递给函数。

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

Answer 5

您缺少id =的开头引号，并且在函数声明后面有一个分号。此外，输入标记不需要结束标记。

这有效：

<input onclick="change()" type="button" value="Open Curtain" id="myButton1">

<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>

Answer 6

这可以通过vbs代码轻松完成（因为我不熟悉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>

并且你已经完成了，但是这会改变名称只显示并且不会改变函数{onclick}，我做了一些关于如何做第二个的研究，似乎没有＆＃39;

之类的东西

btn.onclick = ".."

但我找到了一种方法，使用＆lt;＆＃34; span＆＃34;＆gt;标记它是这样的：

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

自己尝试一下，更改子函数1和子函数2中的代码，基本上你需要知道的就是在jscript中创建它就行了

span.InnerHTML = "..."

其余的是你想要执行的代码

希望这会有所帮助：D

Answer 7

如果您希望将事件绑定到html标记之外（在javascript中），则可以这样操作：

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>

Answer 8

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

Answer 9

我知道这是一篇旧文章，但是可以选择通过函数调用发送elemd id：

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

Answer 10

此代码对我有用

  var btn = document.getElementById("your_btn_id");
    if(btn.innerText=="show"){
       btn.innerText="hide";
      }
    else{
      btn.innerText="show";
      }

在我的情况下，使用价值无效

Answer 11

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;

Answer 12

或更简单，而无需命名元素（带有'button'元素）：

<button onclick="toggleLog(this)">Stop logs</button>

和脚本：

var bWriteLog = true;

function toggleLog(elt) {

  bWriteLog = !bWriteLog;
  elt.innerHTML = bWriteLog ? 'Stop logs' : 'Watch logs';
}

Answer 13

将此功能添加到脚本中

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

            }

并编辑按钮

<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>

Answer 14

这对我来说很好。我有多个按钮，希望将输入值文本从“添加范围”切换为“删除范围”

import random from "lodash/random";
import React, { Component } from "react";
import Sample from "./Sample";

export default class Parent extends Component {
  state = {
    loadC1: false
  };

  shouldComponentUpdate = (nextProps, nextState) =>
    this.state.loadC1 !== nextState.loadC1;

  handleClick = () =>
    this.setState(prevState => ({ loadC1: !this.state.loadC1 }));

  render = () => {
    const randomIndex = random(0, 999);
    const { loadC1 } = this.state;

    return (
      <div style={{ textAlign: "center" }}>
        <button
          className="uk-button uk-button-primary"
          onClick={this.handleClick}
        >
          {!loadC1 ? "Show" : "Hide"} Component
        </button>
        <div style={{ marginBottom: 40 }}>
          {loadC1 && <Sample />}
        </div>
        <img src={`https://loremflickr.com/600/100?lock=${randomIndex}`} />
      </div>
    );
  };
}

Answer 15

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

Answer 16

如果不反对或者可能已经在使用jQuery，那么你可以在不使用obtrusive js的情况下做到这一点。希望能帮助到你。 https://en.wikipedia.org/wiki/Unobtrusive_JavaScript也想参考https://stackoverflow.com/a/3910750/4812515进行讨论。

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

Answer 17

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

Answer 18

试试这个，

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

Answer 19

This is simple way to change Submit to loading state   

 <button id="custSub" type="submit" class="button left tiny" data-text-swap="Processing.. &nbsp;">Submit &nbsp;<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>

更改按钮文本onclick

19 个答案: