Print console.log on HTML

Question

I've a javascript code that is currently working on a shared hosting.

The script gather data from a website and then show it on my website.

Fact is that the data is being showed in the console tab but not on the php page. The script itself contains that code:

<script> ... function printFollowers(followersSum) {   console.log(followersSum); // you can do print followersSum wherever you want }

... </script>

But I don't understand how to print the "followersSum" function to display it on the HTML.

Does someone can help me?

If you use the jQuery library. HTML:
JS file (instead console.log): $('#followeers-output').html( followersSum ); — Tzahi Serruya, Jul 16 '17 at 18:50
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction — UnholySheep, Jul 16 '17 at 18:50
Might want to check this: https://stackoverflow.com/questions/20256760/javascript-console-log-to-html — Mia, Jul 16 '17 at 18:50

score 1 · Accepted Answer · edited Jul 16 '17 at 18:55

1

Let's say you have a <div id="printFollower"></div> somewhere in your html.

Then do this:

function printFollowers(followersSum) {
  document.getElementById('printFollower').innerHTML = followersSum;
  console.log(followersSum); // you can do print followersSum wherever you want
}

Using this method, you can control where the list shows up better, apply CSS, etc.

edited Jul 16 '17 at 18:55

Qirel

25,449
7
45
62

answered Jul 16 '17 at 18:53

Difster

3,264
2
22
32

I got this error: network.php:17 Uncaught TypeError: Cannot set property 'innerHTML' of null at printFollowers (network.php:17) at network.php:22 Line 17: document.getElementById('printFollower').innerHTML = followersSum; Line 22: printFollowers("followersSum = " + followersSum); – Andrew Jul 16 '17 at 19:24
did you create a `
` in your html with an id of printFollowers
– Difster Jul 16 '17 at 19:27
Worked!!! Thank you so much! – Andrew Jul 16 '17 at 19:33
Glad I could help. – Difster Jul 16 '17 at 19:34
@Andrew The usage of `innerHTML` is frowned upon as it can be a source of client-side HTML-injection (DOM-XSS). That's why I used `textContent` in my [answer](https://stackoverflow.com/a/45132266/2314737). – user2314737 Jul 17 '17 at 11:31

score 0 · Answer 2 · 2017-07-16T19:21:12.963

0

You can do document.write() it will just print it onto the page.

    function printFollowers(followersSum) {
      followersSum = document.getElementById('printFollower').innerHTML
      console.log(followersSum); // you can do print followersSum wherever you want
      document.write(followersSum);
    }

    printFollowers();

<div id="printFollower">1</div>

edited Jul 16 '17 at 19:21

answered Jul 16 '17 at 18:49

Cannot find a way to make it works. how I print it? @noah64 – Andrew Jul 16 '17 at 19:12
@Andrew if there is an error in the dev console, can you tell it to me? – Jul 16 '17 at 19:14
If I add printFollowers("5") it'll show 5, obviously. my code is: – Andrew Jul 16 '17 at 19:20
@Andrew have a look at the code now. – Jul 16 '17 at 19:22
Fact is that the value is update d by the script every X seconds. Your code show me in the browser the value 1. – Andrew Jul 16 '17 at 19:29
@Andrew could you show me your code in a jsfiddle or codepen? – Jul 16 '17 at 19:32

score 0 · Answer 3 · answered Jul 16 '17 at 18:50

I suggest you use 'document.write'

function printFollowers(followersSum) {
  document.write(followersSum);
}
printFollowers(prompt("Write some text"));

This will print the text straight into the DOM rather than the console. For more information on document, check out the docs

score 0 · Answer 4 · answered Jul 16 '17 at 18:56

Change the text content of some element in your document

function printFollowers(followersSum) {
  document.getElementById('myId').textContent = followersSum;
  console.log(followersSum); // you can do print followersSum wherever you want
}

var followersSum = 0;
printFollowers("followersSum = " + followersSum);

<div id="myId" />

Print console.log on HTML

4 Answers4

Linked