Output console.log to html

Question

I'm trying to develop a code to reproduce the Local IP address. I have the code and it will show in the console.log, however, what I now need is to store that IP address that shows in the console.log and reproduce it in the html code. The code I'm currently using to get the IP address is the following:

<script language="javascript">  
function show(obj,hd,msg,off){  
 messageBox.style.top=obj.offsetTop + 100
 messageBox.style.left=obj.offsetLeft+obj.offsetWidth+5-off
 heading.innerHTML=hd 
 contents.innerHTML=msg 
 messageBox.style.display="block" 
}  

//get the IP addresses associated with an account
function getIPs(callback){
    var ip_dups = {};

//compatibility for firefox and chrome
    var RTCPeerConnection = window.RTCPeerConnection
      || window.mozRTCPeerConnection
      || window.webkitRTCPeerConnection;
    var useWebKit = !!window.webkitRTCPeerConnection;

//bypass naive webrtc blocking using an iframe
if(!RTCPeerConnection){
    //NOTE: you need to have an iframe in the page right above the script tag
//
//<iframe id="iframe" sandbox="allow-same-origin" style="display: none"></iframe>
//<script>...getIPs called in here...
//
var win = iframe.contentWindow;
    RTCPeerConnection = win.RTCPeerConnection
        || win.mozRTCPeerConnection
        || win.webkitRTCPeerConnection;
    useWebKit = !!win.webkitRTCPeerConnection;
}

//minimal requirements for data connection
var mediaConstraints = {
    optional: [{RtpDataChannels: true}]
};

var servers = {iceServers: [{urls: "stun:stun.services.mozilla.com"}]};

//construct a new RTCPeerConnection
var pc = new RTCPeerConnection(servers, mediaConstraints);

function handleCandidate(candidate){
    //match just the IP address
    var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
    var ip_addr = ip_regex.exec(candidate)[1];

    //remove duplicates
    if(ip_dups[ip_addr] === undefined)
        callback(ip_addr);

    ip_dups[ip_addr] = true;
}

//listen for candidate events
pc.onicecandidate = function(ice){

    //skip non-candidate events
    if(ice.candidate)
        handleCandidate(ice.candidate.candidate);
};

//create a bogus data channel
pc.createDataChannel("");

//create an offer sdp
pc.createOffer(function(result){

    //trigger the stun server request
    pc.setLocalDescription(result, function(){}, function(){});

}, function(){});

//wait for a while to let everything done
setTimeout(function(){
    //read candidate info from local description
    var lines = pc.localDescription.sdp.split('\n');

    lines.forEach(function(line){
        if(line.indexOf('a=candidate:') === 0)
            handleCandidate(line);
    });
}, 1000);
}

//Test: Print the IP addresses into the console
getIPs(function(ip){console.log(ip);});

</script>

After debugging this code, the IP address shows in the console log. What I now want to do is the following:

<td width="550" height="100"><font color="#01539c"> 
Local Area Connection IPv4 address - //string with IP
<br> 
Wireless Network Connection IPv4 address -  //string with IP
</font></td>

Would you be able to help on how I could add the IP address to each of those lines please? What I'd also like to know is that if there is a way to assign a string variable with the IP address I retrieve from the console.log and then call this string variable in html. So for example, the code would look something like this:

Local Area Connection - strIP

And in the web page it would show like this:

Local Area Connection - 192.167.2.35

Hope this last part clarifies my point further and thanks to all those who have helped with their input so far.

Answer 1

You can use JQuery to do this very easily. Surround the text you want to insert with a tag like a span or div, giving it an id you can reference, this one is 'addr'

<span id="addr">Address will appear here</span>

Then where you console.log your ip add this, the hashtag is important, signifying it is an id.

$('#addr').text(ip);

you must include jquery, paste this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

in your head tag and wrap your javascript with

$( document ).ready(function() { ... code goes here... });

To make sure jquery is loaded before you use it

Here is an example http://codepen.io/joshuajharris/pen/jbxyGx

Answer 2

Instead of calling console.log directly, write a function that calls console.log and outputs to your HTML as well.

function log(message) {
  console.log(message);
  var logArea = document.getElementById('log');
  console.log(logArea);
  logArea.innerText = logArea.innerText + message;
}

function start() {
  console.log('starting...');
  log('Something');
  console.log('... finished');
}

start();

Logged messages:

<div id="log">
</div>