如何让我的代码不会暂时出现在输出区域？答案

【问题标题】：How to get my code to not momentarily appear in the output area?如何让我的代码不会暂时出现在输出区域？
【发布时间】：2022-10-07 13:37:58
【问题描述】：

如何让我的代码不会暂时出现在输出部分？任何投入将不胜感激。看来它可能需要对提交部分做一些事情。

<html lang=\"en\">

<head>
 <meta charset=\"UTF-8\">
 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
 <meta http-e*emphasized text*quiv=\"X-UA-Compatible\" content=\"ie=edge\">
 <!-- bootstrap css -->
 <link rel=\"stylesheet\" href=\"css/bootstrap.min.css\">
 <!-- main css -->
 <link rel=\"stylesheet\" href=\"message.css\">
 <!-- google fonts -->
 <link href=\"https://fonts.googleapis.com/css?family=Courgette\" rel=\"stylesheet\">

 <!-- font awesome -->
 <script src=\"js/all.js\"></script>
 <title>Message</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=\"z 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\" id=\"output\">hello world</h4>
    </div>
  </div>
 </div>




 <!-- jquery -->
 <script src=\"js/jquery-3.3.1.min.js\"></script>
 <!-- bootstrap js -->
 <script src=\"js/bootstrap.bundle.min.js\"></script>
 <!-- script js -->
 <script src=\"message.js\"></script>
</body>

</html>

`let form = document.getElementById(\"message-form\")
let getInput = document.getElementById(\"message\")
let submit = document.getElementById(\"submitBtn\")
let output = document.getElementById(\"output\")

submit.addEventListener(\"click\", function(){
    output.textContent = getInput.value


})`

请在询问时添加更多详细信息，不要用猪拉丁语填写您的帖子。显示了什么代码，具体在哪里？显示代码时你会做什么？
写在 html 结束标记下方的代码是否存在于外部脚本中？
是的。我希望它输出到 hello world 部分

标签： javascript html jquery css

【解决方案1】：

我假设你正在尝试做这样的事情。请在外部 js 文件中添加 Javascript 代码。

let form = document.getElementById("message-form")
let getInput = document.getElementById("message")
let submit = document.getElementById("submitBtn")
let output = document.getElementById("output")

submit.addEventListener("click", function(e){
  e.preventDefault();
    output.textContent = getInput.value


})

<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-e*emphasized text*quiv="X-UA-Compatible" content="ie=edge">
 <!-- bootstrap css -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <!-- main css -->
 <link rel="stylesheet" href="message.css">
 <!-- google fonts -->
 <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

 <!-- font awesome -->
 <script src="js/all.js"></script>
 <title>Message</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="z 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" id="output">hello world</h4>
    </div>
  </div>
 </div>




 <!-- jquery -->
 <script src="js/jquery-3.3.1.min.js"></script>
 <!-- bootstrap js -->
 <script src="js/bootstrap.bundle.min.js"></script>
 <!-- script js -->
 <script src="message.js"></script>
</body>

</html>

【讨论】：