web-dev-qa-db-ja.com

Javascript-各ボタンクリックで段落テキストを変更

私は3つのボタンを作成しようとし、javascriptを使用しています。ボタン1をクリックすると、「ボタンをクリック」テキストが「ボタン1を押しました」に変更されます

ボタン2と3でも同じです！ ボタン3が押されると、テキストの色が緑に変わります

しかし、私はそれを動作させることができないようです！助けていただければ幸いです

ここに私の現在のコードがあります：

<!DOCTYPE html>

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText() {

                var b1 = document.getElementById('b1');
                var b2 = document.getElementById('b2');
                var b3 = document.getElementById('b3');

                if(b1.onclick="changeText();") {
                    document.getElementById('pText').innerHTML = "You pressed button 1";
                }

                if(b2.onlick="changeText();") {
                    document.getElementById('pText').innerHTML = "You pressed Button 2";
                }

            }


        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText();"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText();"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText();"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>
javascripthtmlfunctiontextonclick
10
GDesigns

これを試すことができます：

_<!DOCTYPE html>

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText(value) {
                document.getElementById('pText').innerHTML = "You pressed " + value;
            }
        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>
_

ここでは、ボタンをクリックするたびに、クリックしたボタン要素の値を含むonlick();関数が呼び出されます。今やるべきchangeText();関数は、編集したい要素のinnerHTMLを編集するだけです。直接。

お役に立てれば。

更新コード：（更新されたパラメーターを反映するため）

_<!DOCTYPE html>

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText(value) {
                document.getElementById('pText').innerHTML = "You pressed " + value;
                if(value == "Button 3")
                {
                    document.getElementById('pText').setAttribute('style', 'color: green');}
                }
        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>
_
13
shadoweye14

これを試して：

<html>
    <head>
        <title>Button</title>
    </head>
    <body>

        <script type="text/javascript">
            function changeText(text) {
                document.getElementById('pText').innerHTML=text;

            }


        </script>

        <input type="button" value="Button 1" id="b1" onclick="changeText('You pressed Button 1');"/>
        <input type="button" value="Button 2" id="b2" onclick="changeText('You pressed Button 2');"/>
        <input type="button" value="Button 3" id="b3" onclick="changeText('You pressed Button 3');"/>

        <p id="pText">Click on a Button</p>
    </body>
</html>
1
Vijay

あなたのコードは完璧です。しかし問題は、両方のifループが連続して非常に高速に実行されているため、最初のテキストが2番目のテキストに変換されるタイミングを確認できないことです。 2つの呼び出しの間にアラートを挿入してみてください。

1
Saurabh

あなたは近くにいますが、葉巻はありません。

クリックしているボタンを適切に識別するには、関数呼び出しでthisを送信して、クリックされたオブジェクトへの参照を取得する必要があります。 ifステートメントでonclickを比較すると、文字列ではなく関数ポインターであるため、うまく機能しません。

次のようなものを試してください：

_<input type="button" value="Button 1" id="b1" onclick="changeText(this);"/>
_

これで、changeText()は次のようになります。この例を使用できますが、残りの部分を自分で把握する必要があります。ただし、これは正しい方向を示しているはずです。

_function changeText(elementClicked) {
  var button1 = document.getElementById('b1');
  if (elementClicked == button1) {
    // button 1 was clicked
  }
}
_
0
jlindenbaum