How do I make my JS console output as text in HTML-CodePudding

So I want my console output to appear as text in my HTML file but I don't know how. this is the code I have right now: console.log(generateRandom(17));"> I want what this outputs to be text in a HTML file. Can anyone help me?

CodePudding user response：

Something like this should do the trick

const text = document.createElement("p");
text.innerText = generateRandom(17);

document.body.appendChild(text);

CodePudding user response：

For this simple task, something like that should work

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="text/javascript">

    // should generating random number instead of returning 1
    function generateRandom()
    {
        // insert random logic here
        return 1;
    }

    // updating the content of the <p> - tag
    function updateText()
    {
       // getting p-tag with id "myText"
        var p = document.querySelector('#myText');
        p.innerHTML = generateRandom();
    }

</script>    
</head>
<body>
    <button id="myBtn" onclick="updateText()">Click Me</button>
    <p id="myText"></p>
</body>
</html>

By clicking a button you can update any element which has an id. Including the script into the head is enough here i think

CodePudding user response：

This is a problem with some yet-to-be defined behavior. However, if you will only be logging JSON-compatible data types, here's one way to do it:

<!-- This list element will be used to display the console messages -->
<ul id="console-output"></ul>

<!-- Style however you want -->
<style>
  #console-output { list-style: none; }
  .console-message { border-top: 1px solid; }
</style>

<script type="module">
  // The list element used to display your messages:
  const list = document.getElementById('console-output');

  // A function to append new values to the element:
  function print (...values) {
    const listItem = document.createElement('li');
    listItem.classList.add('console-message');
    for (const value of values) {
      const pre = document.createElement('pre');
      const code = document.createElement('code');
      code.textContent = JSON.stringify(value, null, 2);
      pre.appendChild(code);
      listItem.appendChild(pre);
    }
    list.appendChild(listItem);
  }

  // Create a reference to the original console.log method:
  const originalLogMethod = console.log.bind(console);

  // Overwrite it with a custom fn that also invokes the `print` fn above:
  console.log = (...values) => {
    originalLogMethod(...values);
    print(...values);
  };

  // Then just use `console.log` normally in your code:
  console.log('hello');
  console.log('hello', 'world');
  console.log(['it', 'works', 'with', 'arrays']);
  console.log({it: {also: {works: {with: 'objects'}}}});
</script>