web-dev-qa-db-ja.com

クリック時のボタンテキストの変更

myButton1ボタンをクリックすると、値がClose CurtainからOpen Curtainに変更されます。
HTML：

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

Javascript：

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

ボタンには現在開いているカーテンが表示されていますが、カーテンを閉じるように変更したいのですが、これは正しいですか？

javascripthtmlbuttononclick
53
Anthony Do

あなたの質問を正しく理解できたら、「カーテンを開く」と「カーテンを閉じる」を切り替えます。閉じている場合は「開いているカーテン」に、またはその逆に変更します。それがあなたが必要とするものである場合、これは動作します。

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

myButton1のcontextで呼び出されるので、変更内でdocument.getElementById("myButton1")を使用する必要がないことに注意してください。文脈上、JSについての本を読んで、後で知るようになるでしょう。

UPDATE：

私は間違っていた。先ほど言ったように、thisは要素自体を参照しません。これを使用できます：

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

<button>要素（または他の要素）を使用する場合、 'value'を設定してもテキストは変更されませんが、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>

14
Baked Inhalf

単純なタイプミスだけがあるようです：

  1. Change（）の後にセミコロンを削除します。関数宣言にはセミコロンを含めないでください。
  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" />
13
Anders B

たくさんの方法があります。また、これはすべてのブラウザーで機能するはずです。また、要素自体を関数に渡すため、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>
8
user1865775

（javascriptの）htmlマークアップの外部でイベントをバインドする場合は、次のようにできます。

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>
1
PålOliver

Id =に開始引用符がありません。関数宣言の後にセミコロンがあります。また、入力タグには終了タグは必要ありません。

これは動作します：

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

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

これは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}を変更しません。

btn.onclick = ".."

しかし、私は<"span">タグを使用する方法を考え出しました：

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

自分で試して、sub function1とsub function2のコードを変更します。基本的に、jscriptで作成するために知っておく必要があるのは次の行だけです。

span.InnerHTML = "..."

残りはあなたが実行したいコードです

これが役立つことを願って：D

1
SixPackScript
<!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
Kaustubh Deokar

JQueryに反対していないか、既にjQueryを使用している場合は、目障りな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";
          }
0
alphapilgrim

この関数をスクリプトに追加します

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>
0
Krisi Suci

これは私にとってはうまくいきました。入力値のテキストを「範囲の追加」から「範囲の削除」に切り替えたい複数のボタンがありました

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

これを試して、

<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
    ref.value="Close Curtain";
}
</script>
0
premnathcs
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;
0
saiyam
<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>
0
Srikant gupta

または、要素に名前を付けずに（「ボタン」要素を使用して）よりシンプルに：

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

およびスクリプト：

var bWriteLog = true;

function toggleLog(elt) {

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