HTML/JS open new url in half the page

Question

I'm using HTML, CSS and Javascript. My page is divided into two vertical columns. On the right side, I have buttons that, when clicked, do add a sentence on the left side. What I want to do is, when I click a button, the sentence on the left side is printed AND the content on the right side changes. I tried just making a new url, but it changes de content of the whole page.

EDIT: what I want to do is like the software (point of sales) that restaurants use. One side is the receipt, the other is where the waitress clicks on the food and beverages and they appear on the receipt.

This is what I have, but none of it is about the new change in the column content:

 function artfato() { var x = document.getElementById("myDIV"); x.innerHTML = "1 Fato" }

 <div class="row"> <div class="column" style="background-color:#bbb;"> <h3>Ticket nº1</h3> <p id="myDIV"></p> </div> <div class="column"> <table id="table"> <tr> <td> <input type="button" value="Fatos" class="ixbt" onclick="artfato();"> </td> <td> <input type="button" value="Calças" class="ixbt" onclick="artfato();"> </td> </tr> </table> </div> </div>

Answer 1

It seems your code currently is changing the contents of id="myDiv" . Not sure exactly what you're looking for, but you most likely want to append something to each or one of your columns instead of overwriting it.

Answer 2

I am not sure if you looking for that, but here we go.

First of all, change the "myDiv" from paragraph to div.

<div id=myDiv></div>

After this you can change the event function (artfato) to something as below:

var x = document.getElementById("myDIV");
var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left =  "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";

x.appendChild(makeIframe);
style.position = "relative";
makediv.style.overflow = "hidden";

Do not forget to set the position attribute relative and absolute, to maintain the iframe inside div.

If you want to get content from your own origin (domain/application), try this:

<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>

font: stackoverflow answer