How to show javascript console output into an alert()

Question

Everyday my teacher looks across the internet to find random facts for us then she writes on the board and we get to see it each day we go in her class. I'm trying to make a super simple website that once a button is clicked an alert at the top of the page appears. Whenever the fact I cant figure out how to make the console go to the alert. I've looked at a different other Stack question but i didn't really understand it. Here is my complete code. I'm sorry i just started javascript and literally couldn't be more new to it. Thanks in advance!

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>

The JavaScript in your top box is node.js code that runs on the server. It can't alert in the browser. — Barmar
– Barmar, Commented Feb 9, 2021 at 2:20
Ohhh :(. Well it is possible to display in a box on the page? — Benjamin-0-Dover
– Benjamin-0-Dover, Commented Feb 9, 2021 at 2:23

destroyer22719 · Accepted Answer · 2021-02-09 04:05:24Z

2

I'm sorry if I'm not understanding your code properly but from my understanding the first code block, the NodeJS is sending a file on the root url. That root file is what you want to alert this "random fact"

However, the random fact data is stored in var fact = require("random-fact")

NodeJS is a JavaScript runtime environment. Meaning a place to execute JavaScript code, OUTSIDE the browser and in the server. NodeJS isn't like vanilla JS where you have access to the BOM and DOM.

However, with express you can set up what's called an endpoint. That endpoint will send the data on each request to each route which you can set up on the front end.

First off, I'm assuming the fact() function returns some data. We'll set up an endpoint:

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

whenever we send a get request to /random-facts it'll execute the function and hopefully get what you want

On the frontend we need to do what's called an AJAX request. Where you send a request to the API. Like you do in your browser when you type www.google.com you send a get request. AJAX request can get more sophisticated with just GET requests but that's for something else.

We'll do that with JS using the fetch API

On your html you can do

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

This is probably a bit more advanced than what you know but I hope this helps

answered Feb 9, 2021 at 4:05

destroyer22719

4143 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benjamin-0-Dover Over a year ago

"This is probably a bit more advanced than what you know but I hope this helps" yes, yes it is. Honestly i just started javascript yesterday so its gonna take me a minute for this. Thanks though!

alec wilson · Accepted Answer · 2021-02-09 03:59:26Z

1

Like someone else said, the JavaScript you have up there is server side NodeJS.

Instead, just use your HTML and statically host it on GitHub or something.

Here is an example of a random fact from a list of facts:

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

or you can view it here: https://jsfiddle.net/utdoLbj2/

answered Feb 9, 2021 at 3:59

alec wilson

1761 gold badge3 silver badges13 bronze badges

10 Comments

Benjamin-0-Dover Over a year ago

Thanks much man! This works great. The only issue is i have to input each one my self but that's just because i'm a little lazy :D Right now i have 30 facts but soon i will have 3090 facts. LOL

alec wilson Over a year ago

What format are the facts in? You could pretty easily write a script to format them into the needed array.

Benjamin-0-Dover Over a year ago

That would be amazing! this is the github with all the facts.

alec wilson Over a year ago

@moneymike here is the facts sorted into an array: github.com/mr-winson/so-helper/blob/master/facts/… It also includes the JavaScript file to reformat any new facts. If you dont mind, give me a follow on github too!

alec wilson Over a year ago

That’s awesome! Glad I could help!

|

Collectives™ on Stack Overflow

How to show javascript console output into an alert()

2 Answers 2

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related