Javascript - change paragraph Text on Each Button Click

问题

I am trying to create 3 buttons, and using javascript, If button 1 is clicked then it changes the "Click a button" text to "You pressed Button 1"

Same for Button 2 and 3! And if Button 3 is pressed, the text colour changes to GREEN

However, I can't seem to get it to work! Any help would be appreciated

Here is my Current Code:

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

回答1:

You can try this:

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

Here what you are doing is whenever you click the button, the onlick(); function is being called containing the value of the button element you just clicked. All the changeText(); function has to do now is edit the innerHTML of the element you want to edit. Directly.

Hope this helps.

UPDATED Code: (To reflect your updated parameters)

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

回答2:

Try this:

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

回答3:

Your code is perfect. But the problem is that both the if loops are executing sequentially so fast that you can't see when the first text gets converted to second text. Try inserting an alert between two calls.

回答4:

You're close, but no cigar.

To properly identify the button you're clicking you should send in this with your function call, that way you get a reference to the object that was clicked. Comparing the onclick in an if statement won't work well, as it's a function pointer, not a string.

Try something like:

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

And your changeText() should now be something like this. You can use this example, but you'll have to figure out the rest on your own. This should point you in the right direction though.

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

来源：https://stackoverflow.com/questions/29803850/javascript-change-paragraph-text-on-each-button-click

标签

javascript

html

function

text

onclick