如何将 javascript 控制台输出显示为 alert()

Question

每天我的老师都会在互联网上为我们寻找随机事实，然后她在黑板上写下，我们每天都会看到它 class。我正在尝试制作一个超级简单的网站，一旦单击一个按钮，就会在页面顶部出现一个警报。每当我不知道如何让控制台进入警报状态时。我看过另一个不同的 Stack 问题，但我并没有真正理解它。这是我的完整代码。很抱歉，我刚开始 javascript 并且对它实在是再陌生不过了。提前致谢！

const express = require("express");
const app = express();
app.use(express.static("public"));
app.get("/", (request, response) => {
  response.sendFile(__dirname + "/facts.html");
});
const listener = app.listen(process.env.PORT, () => {
  console.log("Your app is listening on port " + listener.address().port);
});

var fact = require('random-fact');
fact();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Generate Random Facts</title>
</head>
<body>
<h1>Fact Generator</h1>
<br><br><br><br>
<script>

function test() {
    alert('fact');
}

</script>
<input type="button" onclick="test()" value="Generate Random Fact!">
</body>
</html>

Answer 1

就像其他人所说的那样，JavaScript 你上面的是服务器端 NodeJS。

相反，只需使用您的 HTML 并将其静态托管在 GitHub 或其他设备上。

这是一个事实列表中的随机事实示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Generate Random Facts</title>
    </head>
    <body>
        <h1>Fact Generator</h1>
        <p id="fact"> </p>
        <script>
            // populate with multiple facts
            var facts = ["fact one", "fact two", "fact three", "fact four"];

            function alertFact() {
                const fact = returnFact()
                
                document.getElementById('fact').innerText = fact
                alert(fact);
            }

            function returnFact() {
                var fact = facts[Math.floor(Math.random() * facts.length)];

                return fact;
            }
        </script>
        <input type="button" onclick="alertFact()" value="Generate Random Fact!" />
    </body>
</html>

或者您可以在这里查看：https://jsfiddle.net/utdoLbj2/

Answer 2

如果我没有正确理解您的代码，我很抱歉，但根据我对第一个代码块的理解，NodeJS 正在根 url 上发送文件。那个根文件就是你想要提醒这个“随机事实”的东西

然而，随机事实数据存储在var fact = require("random-fact")

NodeJS 是一个 JavaScript 运行时环境。意思是在浏览器之外和服务器中执行 JavaScript 代码的地方。 NodeJS 不像 vanilla JS，你可以访问 BOM 和 DOM.

但是，使用 express，您可以设置所谓的端点。该端点会将每个请求的数据发送到您可以在前端设置的每个路由。

首先，我假设 fact() 函数 returns 一些数据。我们将设置一个端点：

app.get('/random-facts', (req, res) => res.send(fact()));

每当我们向 /random-facts 发送 get 请求时，它都会执行该函数并希望得到你想要的东西

在前端，我们需要执行所谓的 AJAX 请求。您向 API 发送请求的地方。就像您在浏览器中键入 www.google.com 时所做的那样，您会发送一个获取请求。 AJAX 请求可以通过 GET 请求变得更加复杂，但那是为了其他事情。

我们将使用 JS 使用 fetch API

在你的html上你可以

<script>
fetch('http://localhost:3000/random-facts')
  .then(response => response.json())
  .then(data => alert(data));
</script>

这可能比您所知道的要高级一些，但我希望这对您有所帮助

如何将 javascript 控制台输出显示为 alert()

How to show javascript console output into an alert()

html

javascript

random

console