How do I make it so that when the event is triggered, the document.write() will occur wherever I want it to.
What I mean is I don't want the text in document.write() to appear instead of the button, I want the button to make the document.write() to appear anywhere I want it to. If there are any other ways of doing this, do tell.
document.write simply output the content in canvas as it were regular HTML content. if you want to make it appear on a specific place you would have to use HTML to markup the printed content, either when pressing the button or when calling document.write while loading document. so for example, you pass the string to your method box and in the method you wrap the string with HTML:
document.write("<span style='here place css rules for positioning element'>", a, "</span>");
however, the truth is that the function isn't replacing the string for the button. instead, it completely clear the content in browser to print new content. so, document.write is bad for appending new content to canvas. you might want to try with innerHTML so that it don't appear that string replace the button: