77

ボタンをクリックするmyButton1と、値がClose Curtainfromに変わりOpen Curtainます。
HTML:

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

Javascript:

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

現在ボタンが開幕表示になっているのを閉幕に変更したいのですが、これでよろしいですか？

4

19 に答える 19

78

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

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

コンテキストでdocument.getElementById("myButton1")呼び出されるため、内側の変更を使用する必要がないことに注意してください-コンテキストとは、後でJSに関する本を読んで知るようになることを意味します。myButton1

更新：

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

function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Close Curtain") elem.value = "Open Curtain";
    else elem.value = "Close Curtain";
}
于 2012-05-20T06:08:00.790 に答える
15

単純なタイプミスエラーがあるようです。

  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" />
于 2012-05-20T06:25:12.303 に答える
9

方法はたくさんあります。また、これはすべてのブラウザーでも機能するはずであり、要素自体を関数に渡すため、もう 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>
于 2012-05-20T07:26:58.967 に答える
2

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

これは機能します：

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

<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>
于 2012-05-20T06:08:23.323 に答える
2

これが古い投稿であることは知っていますが、関数呼び出しで 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";
    }
于 2020-11-12T12:42:11.973 に答える
1

これは、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} は変更されません。2番目の方法についていくつか調査しましたが、次のようなものはないようです

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

于 2015-04-10T11:40:44.867 に答える
0

これを試して、

<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
    ref.value="Close Curtain";
}
</script>
于 2012-05-20T06:26:22.957 に答える
0

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";
          }
于 2015-09-02T22:17:09.963 に答える
0 
<!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>
于 2017-10-19T11:41:12.497 に答える