代码之家 › 专栏 › 技术社区 › Corse

无法获取输入以替换页面上的文本

input dom html javascript

Corse · 技术社区 · 2 年前

我正在尝试创建一个传递消息页面,但我无法将用户输入的消息放在页面上,使用当前代码,我可以在一瞬间看到文本更改,然后返回到原始代码。当我尝试更改更改文本的方法时,我根本看不到任何更改。

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>

1 回复 | 直到 2 年前

IT goldman 2 年前

您希望在提交时取消表单的默认行为。

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>