Cannot get input to replace text on page

Question

I'm trying to create a pass the message page but I'm unable to get the message the user inputs to be put on the page, with the current code I can see the text change for a split second then goes back to the original. When I try change the method of changing the text I then don't see any change at all.

const submit = document.getElementById('submitBtn');
let display = document.querySelector('.message-content');
let input = document.getElementById('message');

submit.addEventListener('click', function () { 
    let inputValue = input.value;
    display.innerHTML = inputValue;
});

:root {
    --lightBlue: #95b8d1;
    --mainwhite: #f5f5f5;
    --mainBlack: #333333;
  }
  .max-height {
    min-height: 100vh;
  }
  body {
    background: var(--lightBlue);
  }
  .message-container {
    background: var(--mainwhite);
  }
  .message-content {
    color: var(--lightBlue);
  }
  #submitBtn {
    background: var(--lightBlue);
    color: var(--mainwhite);
  }
  #submitBtn:hover {
    color: var(--lightBlue);
    color: var(--mainBlack);
  }
  
  .feedback {
    display: none;
  }
  
  .show {
    display: block;
  }

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <link rel="stylesheet" href="css/bootstrap.min.css">

 <link rel="stylesheet" href="main.css">

 <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">


 <script src="all.js"></script>
 <title>Starter Template</title>
 <style>
 </style>
</head>

<body>

 <div class="container">
  <div class="row max-height align-items-center">
   <div class="col-10 mx-auto col-md-8 message-container text-center p-3">
    <h4 class="text-capitalize">A messge you would like to pass</h4>
    <form id="message-form">
     <input type="text" name="" id="message" class="w-100 my-3 p-2">
     <input type="submit" id="submitBtn" class="btn btn-lg">
    </form>
    <h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
    <h4 class="text-capitalize my-3">last message delivered</h4>
    <h4 class="message-content text-uppercase">hello world</h4>

   </div>
  </div>
 </div>




 
 <script src="js/jquery-3.3.1.min.js"></script>

 <script src="js/bootstrap.bundle.min.js"></script>

 <script src="app.js"></script>
</body>

</html>

IT goldman · Accepted Answer · 2022-07-24 22:18:57Z

You want to cancel the default behaviour of the form when submitting.

const submit = document.getElementById('submitBtn');
let display = document.querySelector('.message-content');
let input = document.getElementById('message');
let form = document.getElementById('message-form');

form.addEventListener('submit', function(ev) {
  let inputValue = input.value;
  display.innerHTML = inputValue;
  ev.preventDefault();

});

:root {
  --lightBlue: #95b8d1;
  --mainwhite: #f5f5f5;
  --mainBlack: #333333;
}

.max-height {
  min-height: 100vh;
}

body {
  background: var(--lightBlue);
}

.message-container {
  background: var(--mainwhite);
}

.message-content {
  color: var(--lightBlue);
}

#submitBtn {
  background: var(--lightBlue);
  color: var(--mainwhite);
}

#submitBtn:hover {
  color: var(--lightBlue);
  color: var(--mainBlack);
}

.feedback {
  display: none;
}

.show {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">


  <script src="all.js"></script>
  <title>Starter Template</title>
  <style>

  </style>
</head>

<body>

  <div class="container">
    <div class="row max-height align-items-center">
      <div class="col-10 mx-auto col-md-8 message-container text-center p-3">
        <h4 class="text-capitalize">A messge you would like to pass</h4>
        <form id="message-form">
          <input type="text" name="" id="message" class="w-100 my-3 p-2">
          <input type="submit" id="submitBtn" class="btn btn-lg">
        </form>
        <h5 class="p-2 alert alert-danger my-3 text-capitalize feedback">please enter a value to pass</h5>
        <h4 class="text-capitalize my-3">last message delivered</h4>
        <h4 class="message-content text-uppercase">hello world</h4>

      </div>
    </div>
  </div>





  <script src="js/jquery-3.3.1.min.js"></script>

  <script src="js/bootstrap.bundle.min.js"></script>

  <script src="app.js"></script>
</body>

</html>

Collectives™ on Stack Overflow

Cannot get input to replace text on page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related