Javascript - change paragraph Text on Each Button Click

javascript html function text onclick

82,536

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

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

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

82,536

Author by

GDesigns

Updated on July 09, 2022

Comments

GDesigns almost 2 years

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>

GDesigns about 9 years

I'm also trying to change the color of the text to GREEN if button 3 is pressed - forgot to mention above
shadoweye14 about 9 years

That is okay. You can edit your function by ammending it to include an IF Statement. if(value == 'Buttom 3'){/* Code for changing color goes here */} you can do that by adding the style attribute to pText element and inserting your CSS Code in there. style='color: green'etc hope this helps :D