Search code examples
cgiinnerhtml

Not able to replace div text with innerHTML

I am trying to put different data from cgi output in different DIV Did that with below code, but now when new data comes, it appends the DIV, I want to replace the DIV data and not append it.

I am new to this, As I am a hardware engg. do not know much of coding.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
</head>
<body>
  <h1>Console</h1>
  <pre>
    <div id="d1" style="width: 25%; height: 200px; ">
</div>
<div id="d2" style="width: 25%; height: 200px; ">
   </div>
  </pre>
  <script>
    var source = new EventSource('/cgi-bin/data.cgi');
    source.onmessage = function(e) {
    var o = document.getElementById("d1");
    o.innerHTML += e.data1 + '<br>';
    var x = document.getElementById("d2");
    x.innerHTML += e.data2 + '<br>';

 };
  </script>
</body>
</html>

Just want to replace existing data in D1 with new data which is coming from CGI.

Solution

  • You just need to do the following. 

     o.innerHTML = e.data1 + '<br>';

    just remove that "+" before "="