Printing console messages in a output window on HTML using javascript

Question

I am currently working on a graph application using d3.js. Following is the link to the d3-forced directed graph: https://bl.ocks.org/mbostock/4062045 If i create an on-click event for a node like:

node.on("click", function(d){
           console.log(d.id);
                         });

This even will print the names of nodes in the console of the developers tools of the browser. However I need to create a window in the html page(a widget) which will take this value and print it on clicking the node.

Is there any way to print the console output on html window widget(just another div)?

P.S. there is a similar question asked: how to make a output console using TextArea? But the answer is for determining the thresholding and not how to create it.

Help appreciated.

$('#somediv').append('<p>' + d.id + '</p>'); instead of console.log(), basically. — Marc B
– Marc B, Commented Mar 28, 2016 at 21:05

student1234 · Accepted Answer · 2016-03-28 21:11:39Z

1

If you want to modify the page directly, in javascript you can use :

document.getElementById();

and there are a lot of different selectors you can see on here

Then to modify the HTML you only have to do like this :

document.getElementById("example").innerHTML = "test";

PS : if you use jquery you can use the $ function like this for example to do the same :

$("#example").html("test");

It uses the css selector so # means id.

answered Mar 28, 2016 at 21:11

student1234

236 bronze badges

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

1 Comment

Omkar Over a year ago

Thanks Colas, this helped me!

koolhuman · Accepted Answer · 2016-03-28 21:16:22Z

1

Try opening a new window via javascript.

var myWindow = window.open("", "MsgWindow", "width=200, height=100");
myWindow.document.write(d.id);

edited Mar 28, 2016 at 21:16

answered Mar 28, 2016 at 21:09

koolhuman

1,64918 silver badges25 bronze badges

2 Comments

Omkar Over a year ago

I got it what you are trying to say. However, i want to create a console like application, similar to regular consoles which will print the events in the d3 graph. I tried using dialogue in HTML, but the dimensions and appearance is too bad, maybe i can change it later, however, is there a better way to do it?

koolhuman Over a year ago

@Omkar -- you can try using some js plugins like this one - dynamicdrive.com/dynamicindex8/dhtmlwindow

score 1 · Accepted Answer · 2016-03-28 22:27:05Z

1

Like lynko said you can override console.log:

console.log = function (message) {
    //prettify message here
    $("#console_out_div").append("<p>" + message + "</p>");
};

console.log("test123");
console.log([1,3,4]);
console.log({a:"test", b: 2});

You just have to check the instanceof and typeof variable message and prettify the output. Something like this fiddle.

edited Mar 28, 2016 at 22:27

answered Mar 28, 2016 at 21:32

user1626594

Comments

Evelyn Kokemoor · Accepted Answer · 2016-03-28 21:05:33Z

0

It's kludgey, but you could write console.log = customLogFunc; at the top of your script.

answered Mar 28, 2016 at 21:05

Evelyn Kokemoor

3261 silver badge9 bronze badges

Collectives™ on Stack Overflow

Printing console messages in a output window on HTML using javascript

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related