How to display a res.write() in html

Question

My aim is to display the res.write() value from the post function from my Javascript file to the html file. Currently when I press the submit button the page reloads and sends me the data. But I want the response displayed on the same website(the two

Current time and Bitcoin-price).

My idea was to write a DOM and replace the

Current Time Bitcoin-price

with the values of the Javascript files. Is it possible? How can I refer to Javascriptfiles in html.

app.post("/", function(req, res){

var crypto = req.body.cryptocoins; //example: BTC
var currencyCoins = req.body.currencycoins; //example: Euro
var amount = req.body.amount; //example: 3 BTC
//https://www.npmjs.com/package/request | section request(options, callback) | qs from the 
var  options = {
    url: "https://apiv2.bitcoinaverage.com/convert/global",
    methods: "GET",
    qs: {
        from: crypto,
        to: currencyCoins,
        amount: amount
        }
    }
   request(options, function(error, response, body){
        var data = JSON.parse(body);
        var price = data.price;
        
    var currentTime = data.time;
    var currentdate = res.write("<p>Current date: " + currentTime + ".</p>");

    var currentprice = res.write("<h1>The current of " + crypto + " is " + price + " " + currencyCoins + ".</h1>")

   });

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    
    background-image: radial-gradient( circle farthest-corner at 12.3% 19.3%,
    rgba(85,88,218,1) 0%, rgba(95,209,249,1) 100.2% );
    font-family: "Courier New", sans-serif;
    color: white;
}

div.jackson {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    
}

div.answer {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 10vw;
    position: static;
    border: 1px solid white;
    float: left;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Coins</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="jackson">
        <div class="header">
            <h1>Crypto Coins</h1>
        </div>
        <div class="Form">
            <form action="/" method="post">
                <div class="input">
                    <label>
                        <input type="text" name="amount" placeholder="Quantity">
                    </label>
                </div>
                <div class="coins">
                    <label>
                        <select name="cryptocoins">
                            <option value="BTC">Bitcoin</option>
                            <option value="LTC">Litecoins</option>
                            <option value="ETH">Ethereum</option>
                        </select>
                    </label>
                </div>
                <div class="currency">
                    <label>
                        <select name="currencycoins">
                            <option value="EUR">Euro</option>
                            <option value="USD">US Dollar</option>
                        </select>
                    </label>
                </div>
                <div class="button-submit">
                    <button type="submit" name="btn">
                        Click
                    </button>
                </div>
            </form>
        </div>
        <div class="answer">
            <p id="time">Current Time</p>
            <p id="price" value="index.currentprice">Bitcoin-price</p>
        </div>
    </div>
<script src="index.js" charset="utf-8"></script>
<script>document.getElementById("time").innerHTML</script>
</body>
</html>

Use AJAX instead; this will send the form data in the background and you can then do anything you want with the reply, for instance display it somewhere in the page. Here's the basic idea if you use jQuery: https://stackoverflow.com/a/6960586/5734311 — Chris G, Dec 06 '19 at 13:27

score 0 · Answer 1 · answered Dec 06 '19 at 13:24

Use an XMLHttpRequest for querying information. This will make everything a lot easier. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Once created and sent (let me know if you need help with this), attach a listener to the onreadystatechange EventListener.

YourXMLHttpRequestVariable.onreadystatechange = () => {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        // use .response and edit HTML here
    }
}

.response documentation: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response

How to display a res.write() in html

1 Answers1