How do I log inputs using glitch.com?

Question

I have been messing around with HTML code in glitch.com, and I'm wondering, how do I make someone enter an input and make that input be saved so it can be seen by him or other people, kinda like a message, and is there a way to log it using JavaScript's console.log() even though I'm using HTML?

I tried creating variables and using console.log() using JavaScript.

JavaScript code:

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 code:

<!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>

Note: When I tried creating variables and using console.log(), nothing showed up in logs.

You're running your JS before the page has been rendered – j08691 Oct 03 '19 at 13:47 — j08691, Oct 03 '19 at 13:47

score 1 · Answer 1 · answered Oct 03 '19 at 13:52

Move your <script> tag to the bottom of your <body> tag.

See also this answer: 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>

I'm not familiar with glitch.com but your js code console logs and alerts back what you have entered into the prompt. — niko, Oct 04 '19 at 08:44

How do I log inputs using glitch.com?

1 Answers1