Change text with javaScript onClick help!

1

Readers please have a look,

After clicking submit, the form title which says get in touch, i want it to say thanks. how to do it while preserving style. I tried one way but then it was not following the styles.

This code is using few lines of jquery.

2

You can try changing text of h1 in the click callback in the end in jQuery.

$('.formheading').text('Thanks');
3

Thanks for valuable reply piedcipher, i have not started jquery yet, so couldn’t figure it out. the jq section is taken from net,

The code you provided it working but its happening very quickly before the heading even starts moving down, can we make the text change to happen slowly. (transition-duration: 500ms)
Thanks for reading.

1 Like
4

yeah there is a way other than jquery …
**give an id to the h1 tag access it in the javascript file to change it. **
Try this below code

<html>
<body>
<div class="container">
  <h1 class="formheading" id="h1">Get in Touch</h1>
  <div class="form">
    <input type="text" placeholder="Your Name" name="showname" />
    <textarea name="themessage" id="" cols="30" rows="10" placeholder="Your Message"></textarea>

    <button type="submit" id="login-button" onclick="change()">Login</button>
  </div>
</div>
<script type="text/javascript" src="myJs.js"></script>
<body>
</html>

myJs.js

function change(){
  document.getElementById("h1").innerText = "Thank You" ; 
}
5

I’m glad I could help. You can execute text change code inside a setTimeOut callback.

setTimeout(function () {
    $('.formheading').text('Thanks');
}, 1500);