onClick text change

后端 未结 4 645
暗喜
暗喜 2021-01-02 23:51

so I\'m pretty new with html and need some help.

I\'m trying to make 3 buttons and each of them will change the text next to when you click on them. I am using the f

相关标签:
4条回答
  • 2021-01-03 00:06
    <p id="peep"></p>
    
    <button onclick="myFunction('Harry Potter')">Click for Harry Potter</button>
    <button onclick="myFunction('Bob')">Click for Bob</button>
    
    <script>
    function myFunction(name)
    {
    document.getElementById("peep").innerHTML = "Welcome " + name;
    }
    </script>
    

    Use the same function on all buttons to change the text!

    Check this fiddle.

    0 讨论(0)
  • 2021-01-03 00:15
    <script>
    function changeText()
    {
     document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
    }
    </script>
    <p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
    <input type='button' onclick='changeText()' value='Change Text'/>
    </body>
    </html>
    

    Try This Code. It Works For Me. In The Above Code I Have Used [bold] tag To Focus It You Can Use Acronym Tag.

    0 讨论(0)
  • 2021-01-03 00:22

    Use this code:

    HTML:

    <h1> Welcome to the </h2><span id="future-clicked"></span>
    
    <button onclick="clicked_on()">Click for future</button>
    

    JS:

    <script>
        function clicked_on(){
            document.getElementById('future-clicked').innerHTML = 'Future World';
        }
    

    0 讨论(0)
  • 2021-01-03 00:24

    Try this to change text on click the text:

     <div id="chgtext">This is my current text</div>
        <a href="#" onclick="document.getElementById('chgtext').innerHTML='Change the text using javascript';">Change text</a> &nbsp; &nbsp;
        <a href="#" onclick="document.getElementById('chgtext').innerHTML='Text will be changed based on the other text';">Change text2</a>&nbsp;  &nbsp;
        <a href="#" onclick="document.getElementById('chgtext').innerHTML='This is another sample changed text on click the onther text';">Change text3</a>&nbsp;  &nbsp;
        </div>
    

    Here is the demo

    0 讨论(0)
提交回复
热议问题