时间戳

首页 > 解决方案 > 如何使用 glitch.com 记录输入？

javascript - 如何使用 glitch.com 记录输入？

问题描述

我一直在使用 glitch.com 中的 HTML 代码，我想知道，我如何让某人输入输入并保存该输入，以便他或其他人可以看到它，有点像一条消息，并且即使我使用的是 HTML，有没有办法使用 JavaScript 的 console.log() 来记录它？

我尝试使用 JavaScript 创建变量并使用 console.log()。

JavaScript 代码：

console.log("logging function started");
let msg = prompt('Send message', "Enter text here");

alert(`${msg} has been sent!`);
console.log(msg + "has been sent!")

HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>  
  <body>
    <h1>input test</h1>

          <form>
         Student Name:<br> <input type="text" name="name">
         <br>
         Student Subject:<br> <input type="text" name="subject">
         <br>
         Rank:<br> <input type="text" name="rank">
    </form>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

注意：当我尝试创建变量并使用 console.log() 时，日志中没有显示任何内容。

标签： javascripthtmlinputconsole.log

解决方案

将您的<script>标签移动到标签的底部<body>。

另请参阅此答案：https ://stackoverflow.com/a/5329895/1651980

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">

  </head>  
  <body>
    <h1>input test</h1>

          <form>
         Student Name:<br> <input type="text" name="name">
         <br>
         Student Subject:<br> <input type="text" name="subject">
         <br>
         Rank:<br> <input type="text" name="rank">
    </form>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </body>
</html>

推荐阅读