Changing text on a web page with buttons using Javascript

Question

So i'm trying to create a web page function, where you can type in text and it changes something on the page. I can use buttons that has pre-arranged text and it changes it, but when I use a form it changes the text for less than a second then reverts back to the original text. Would appreciate some help. Below is my html and js file.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="CS_Site_Index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<p id="demo"> hi</p>

<button id="ButtonText"> Click Here To Change The Text</button>
<button id="ButtonText2"> Click Here To Change The Text Back</button>

<br>

<form>
  Change The Text<br>
  <input id="text1" type="text"><br>
  <br>
  <input id="ButtonTextSubmit" type="submit" value="Submit">
</form>

<script type="text/javascript" src="changetext.js"></script>
</body>
</html>

this is my js file

document.getElementById("ButtonText").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hello World";});

document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

document.getElementById("ButtonTextSubmit").addEventListener("click", function(){document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

Would appreciate the help thanks

If you don't want it to submit to the server, don't use `
`. — SLaks, Jul 24 '18 at 17:19
Try changing the js functions like this function(){document.getElementById("demo").innerHTML = "Hello World"; return "false";}. The problem is that you are doing a post back to the server and the page is redrawn so you lose the local edit of the innerHTML. Adding return false will prevent that post back. If you need to do a post back the innerHTML edit needs to occur on the server not in local js. — R.Laney, Jul 24 '18 at 17:19
don't make it a submit button and it won't submit your form. change type="submit" to type="button" — Adam H, Jul 24 '18 at 17:22
If you need that form, you may use `type="button"` instead of `type="submit"` for the button — Chaska, Jul 24 '18 at 17:22

ggorlen · Answer 1 · 2018-07-24T17:28:26.653

1

Your page is refreshing. You can prevent this by adding e.preventDefault() to your form submit handler as follows:

document.getElementById("ButtonTextSubmit").addEventListener("click", e => {
    e.preventDefault(); // prevent refresh
    document.getElementById("demo").innerHTML = document.getElementById("text1").value;
  }
);

edited Jul 24 '18 at 17:28

answered Jul 24 '18 at 17:21

ggorlen

44,755
7
76
106

thanks for help, found an easier solution by just making the button type button instead of submit. – Mohammad Ghaffar Jul 24 '18 at 17:42
Sure, that works too. – ggorlen Jul 24 '18 at 17:52

score 0 · Answer 2 · answered Jul 24 '18 at 17:21

You can use event.preventDefault() to prevent the form from submitting.

document.getElementById("ButtonText").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";});

document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

document.getElementById("ButtonTextSubmit").addEventListener("click", function(){
event.preventDefault();
document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="CS_Site_Index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<p id="demo"> hi</p>

<button id="ButtonText"> Click Here To Change The Text</button>
<button id="ButtonText2"> Click Here To Change The Text Back</button>

<br>

<form>
  Change The Text<br>
  <input id="text1" type="text"><br>
  <br>
  <input id="ButtonTextSubmit" type="submit" value="Submit">
</form>

<script type="text/javascript" src="changetext.js"></script>
</body>
</html>

Alternatively, you can change #ButtonTextSubmit to a button instead of a submit button as a submit button will automatically submit the form when pressed.

document.getElementById("ButtonText").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";});

    document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

    document.getElementById("ButtonTextSubmit").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script type="text/javascript" src="CS_Site_Index.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    <body>

    <p id="demo"> hi</p>

    <button id="ButtonText"> Click Here To Change The Text</button>
    <button id="ButtonText2"> Click Here To Change The Text Back</button>

    <br>

    <form>
      Change The Text<br>
      <input id="text1" type="text"><br>
      <br>
      <input id="ButtonTextSubmit" type="button" value="Submit">
    </form>

    <script type="text/javascript" src="changetext.js"></script>
    </body>
    </html>

If you don't want the form to submit to the server, you should not have the form at all.

document.getElementById("ButtonText").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";});

document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});

document.getElementById("ButtonTextSubmit").addEventListener("click", function(){
document.getElementById("demo").innerHTML = document.getElementById("text1").value;});

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="CS_Site_Index.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<p id="demo"> hi</p>

<button id="ButtonText"> Click Here To Change The Text</button>
<button id="ButtonText2"> Click Here To Change The Text Back</button>

<br>

<!--removed form tag-->
  Change The Text<br>
  <input id="text1" type="text"><br>
  <br>
  <input id="ButtonTextSubmit" type="button" value="Submit">


<script type="text/javascript" src="changetext.js"></script>
</body>
</html>

your second example worked perfectly fine for me thanks for the help. — Mohammad Ghaffar, Jul 24 '18 at 17:40
just one question removing the form tag, how does the submit button be linked to the text box? — Mohammad Ghaffar, Jul 24 '18 at 17:41
@MohammadGhaffar You can just add an event listener like you have already done. The submit button is supposed to be attached to an entire form, not any specific `input`. — Unmitigated, Jul 24 '18 at 17:42
oh its okay, i just confused my self. thanks for the help! :) — Mohammad Ghaffar, Jul 24 '18 at 18:08

Changing text on a web page with buttons using Javascript

2 Answers2