Fatal编程技术网

Javascript 单击更改按钮文本

javascript html button

Javascript 单击更改按钮文本,javascript,html,button,onclick,Javascript,Html,Button,Onclick,当我单击myButton1按钮时，我希望该值从Open窗帘更改为Close窗帘HTML: <input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input> function change(); { document.getElementById("myButton1").value="Close Curtain"; } 按钮正在显示打开的帘幕，我希望它更改为

当我单击
myButton1
按钮时，我希望该值从
Open窗帘
更改为
Close窗帘

HTML:

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

function change();
{
    document.getElementById("myButton1").value="Close Curtain";
}
按钮正在显示打开的帘幕，我希望它更改为关闭帘幕，是否正确

如果我正确理解了您的问题，您希望在“打开窗帘”和“关闭窗帘”之间切换——如果关闭，则切换为“打开窗帘”，反之亦然。如果这是你所需要的，这会有用的

function change() // no ';' here
{
    if (this.value=="Close Curtain") this.value = "Open Curtain";
    else this.value = "Close Curtain";
}
请注意，您不需要使用
document.getElementById（“myButton1”）
在
myButton1
的上下文中调用的内部更改——我所说的上下文是指您稍后在阅读有关JS的书籍时了解的上下文

更新：

我错了。正如我前面所说，
这个
不会引用元素本身。您可以使用以下选项：

function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Close Curtain") elem.value = "Open Curtain";
    else elem.value = "Close Curtain";
}
id=上缺少开头引号，函数声明后有分号。此外，输入标记不需要结束标记

这项工作：

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

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


函数更改（）
{
document.getElementById（“myButton1”）.value=“关闭窗帘”；
}
似乎只有一个简单的打字错误：

  • 删除change（）之后的分号，在 函数声明
  • 在myButton1声明前面添加一个引号
    • 更正代码：

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

    
...
函数更改（）
{
document.getElementById（“myButton1”）.value=“关闭窗帘”；
}
    一个更快更简单的解决方案是在按钮中包含代码，并使用关键字this访问按钮

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

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

    
功能更改（ref）{
ref.value=“关闭窗帘”；
}
    有很多方法。这也适用于所有浏览器，并且您不必再使用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>

    
功能改变（el）
{
如果（标高值==“打开窗帘”）
el.value=“关闭窗帘”；
其他的
el.value=“打开窗帘”；
}

    这是将提交状态更改为加载状态的简单方法
提交
jQuery（文档）.ready（函数（$）{
$（“按钮”）。在（“单击”，函数（）{
var el=$（本）；
如果（el.html（）==el.data（“文本交换”））{
html（el.data（“文本原件”）；
}否则{
el.data（“文本原件”，el.html（））；
html（el.data（“文本交换”）；
}
setTimeout（函数（）{
html（el.data（“文本原件”）；
}, 500);
});
});

    
函数changetext（）{
var elem=document.getElementById（“myButton1”）；
如果（元素值==“单击我更改文本”）
{ 
elem.value=“此处已更改文本”；
}
其他的
{
elem.value=“单击我更改文本”；
}
}
    这可以通过vbs代码轻松完成（因为我不太熟悉js）

    但我找到了一种使用标签的方法，它是这样的：

    <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>
    剩下的就是你想要执行的代码

    希望这对您有所帮助：如果您不反对或可能已经在使用jQuery，那么您可以不用使用突兀的js。希望能有帮助。还想参考一下，就此进行讨论

    HTML:

    
事件2
函数fun（）{
document.getElementById（“but”）.value=“onClickChange”；
}
    使用
    元素（或其他？）时，设置“value”不会更改文本，但
    innerHTML
    会更改文本

    var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
    打印到控制台时：

    my text

    如果您喜欢在html标记之外（在javascript中）绑定事件，您可以这样做：

    document.getElementById（“curtainInput”）.addEventListener(
“点击”，
功能（事件）{
如果（event.target.value==“打开窗帘”）{
event.target.value=“关闭窗帘”；
}否则{
event.target.value=“打开窗帘”；
}
},
假的
);

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

    <input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />

    

    将此函数添加到脚本中
    

    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>

    

    打开窗帘

    或更简单，无需命名元素（带有“button”元素）：
    
这个代码对我有用
    

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

    

    在我的情况下，使用value不起作用
    我知道这是一篇旧文章，但有一个选项可以通过函数调用发送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";
    }

    

    展开
扩大
扩大
扩大
功能f1（对象按钮）
{
如果（objButton.innerHTML==“展开”）objButton.innerHTML=“最小化”；
else objButton.innerHTML=“展开”；
}

    不带“onClick”，第h部分。您必须传递对对象的引用：onClick=“change（this）”，然后在JS:function change（button）{print button.value；}哦，是的……正确。我原以为它会奏效，但当我看到你的评论时，我把它弄了出来，结果它失败了……我要做一个总结edit@ParthThakkar在Chrome
    上，此
    确实设置为按钮。太可怕了！我只是试了一下chrome，没有。在我自己遇到一些问题（并且意识到我只是有一个语法错误）之后，它引用了domWindow，这就是我发现的有效方法：
    this.innerHTML=
    。在FirefoxV28中使用
    这个.value
    对我来说不起作用。这是一个实际的按钮元素，而不是一个输入按钮。。。。任何能让你在里面写代码的标签，这对我都有帮助。效果很好。在我看来，这是所有答案中最简单、最直截了当的一个<代码

              $('#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>

    

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

    

    <input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />

    

    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>

    

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

    

    var bWriteLog = true;

function toggleLog(elt) {

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

    

    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;

    

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

    

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

    

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