We Keep Coding

Find then execute a dynamically loaded JavaScript method

I have a piece of HTML that contains some JavaScript
<div id=’abc’> Hello World</div><script> myfunction() { alert (“hi”);}</script>
This is loaded/injected into a target div that is in an iFrame, via an Ajax call that gets the above html.
<iframe id=’myiFrame’><div id=’targetDiv’></div></iframe>
So I’d have something like
<iframe id=’myiFrame’><div id=’targetDiv’><div id=’abc’> Hello World</div><script> function myfunction() { alert (“hi”);}</script></div></iframe>
This all works
My question is. How do I execute myfunction() at some later point in time. How do I find/reference the embedded JavaScript.
I know there are a lot of ifs and buts in this question. Please assume the DOM is ready etc.
I will try to execute myfunction() from an already loaded piece of JavaScript
(function(myframework, undefined ) {
myframework.ButtonClickMethod = function()
{
//this is the call to the dynamically loaded method
//but how do I find / reference this method
myfunction();
}
}(document.myframework = document.myframework || {} ));
Note: myframework.ButtonClickMethod is called from a button click at a time well after all HTML and script has been loaded.
The problem is also complicated by the fact that I cannot control where the piece of injected HTML/Javascript is placed. It has to go into the target div.
I can use JQuery, but prefer vanilla JavaScript.
Also, please ignore any typos in the question, I typed it in Word, it's put ' in etc. It's the mechanism of how to do it I'm interested in.

A less than appealing solution would be to use jQuery to select the script tag html contents. Then use something likethis answer to make it into its own function.

How to put a file input anywhere in the DOM with p5.js

I am using createFileInput() from the P5.js library. More info on that here.
function setup() {
noCanvas();
var fileInput = createFileInput(addedFile);
}
When I use this in my setup function it simply adds the element to the end of the HTML page. I cannot figure out how to place the input anywhere within my page, like between some span tags.
I've tried .html(), .value() and even tried placing it directly inline in the HTML file but I cannot get it to appear where I want it. Usually it just disappears or I get an error.
I've tried using this tutorial and looking at the js to figure out how he placed it in the middle of the page but I can't even find that!
Any help on this would be much appreciated!

Your first stop should be the reference.
Specifically, it looks like the parent() function does what you want: it takes an element you created in your P5.js code (in your case, your fileInput variable) and moves it into a parent element in the HTML webpage.
So your first step would be to create an html webpage that contains an element (probably a <div>) in the middle of the page. Then you'd write P5.js code that calls the parent() function and passes in the id of that <div> element.

Javascript, HTML and onClick - Function is not defined

I'm trying to make an "Insert link" button to a Rich Text Editor in Javascript. Basically, what it'll do is adding the following code to its content:
textGoesHere
The catch is, someJSFunction() must fire when the user clicks on the button inside the editor itself. I wrote a Javascript function which adds that code when the Insert Link button is clicked on, like this:
editor.setContent(previousContent + theHtmlCode);
However, when I click on the link someJSFunction() doesn't fire, and instead I get a "Function is not defined" error. I tried to define someJSFunction() in the global scope, but it still won't see it. The weird thing is, even if I do something ugly like adding
<script type="text/javascript"> *(I define someJSFunction() here)* </script> textGoesHere
to the editor's content it'll still throw the same error. I've seen a few people in SO with the same problem, but they somehow managed to solve it by defining their functions in the global scope.
Notice that I can't edit the HTML code directly, which is why I have to resort to using a piece of Javscript which will insert a piece of HTML which in turn will call another piece of Javascript.
And before you ask, no, I won't use JQuery.

Avoid event declare in HTML
Avoid constant
The code below should works.
HTML
<textarea id="editor"></textarea>
<a id="link" href="#">Link</a>
Javascript
var link = document.getElementById('link');
link.addEventListener('click', editContent);
function editContent() {
var editor = document.getElementById('editor');
editor.value += "text";
}
The jsfiddle for the example above https://jsfiddle.net/ar54w16L/
Enjoy !

Try onclick instead onClick in html.

why do we need javascript: while making inline javascript calls

We have lot of legacy inline javascript code for img onclick , href clicks ets and those clicks starts with javascript:
javascript:showpopup();
why do we need javascript: before calling the javascript functions.
any explanation will be appreciated.

The javascript: scheme indicates to the browser that it's JavaScript code and not a relative path from the current page's base URL.

For inline event handlers like onclick or onmouseover you don't need the javascript: part.
Link
Without javascript: in the href, clicking that link would try to take you to somewhere like this:
http://www.example.com/something/you_need_it_here();
See #Ignacio's answer for the reason.

How does the Javascript print function work? Can I create a document using javascript and print it off?

I know you can use window.print() to print the current page... but what I want to know is can I build a document using javascript in order to populate it with data and print it off?
Just like you can have html/xml as a javascript object, can you do something similar to this:
var name = "Matt";
var htmlDocumentToPrint = "<html><body><div style='width:300px; height:20px; background-color:#000; text-align:center;'>My name is " + name + "</div></body></html>";
htmlDocumentToPrint.print();
I don't really care about adding colors all that much-- just want to format a document, populate it with data, and print it off. Is this possible?

Print() is a method on the window object. If you create a document in a window using javascript, then call print on that window object, it should work.
<script type="text/javascript">
var myWindow = window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.print();
</script>
Example modified from w3schools.com window open example.

My first thought:
You could create an iframe programmatically, assign the HTML to be printed, call the print() function on the context of the iframe.contentWindow, and then remove the iframe from the DOM:
function printHTML(input){
var iframe = document.createElement("iframe"); // create the element
document.body.appendChild(iframe); // insert the element to the DOM
iframe.contentWindow.document.write(input); // write the HTML to be printed
iframe.contentWindow.print(); // print it
document.body.removeChild(iframe); // remove the iframe from the DOM
}
printHTML('<h1>Test!</h1>');
You can test the above snippet here.

print() essentially just calls up the native print dialog for a given window.
But as you're are thinking, it will work on any window or (i)frame.
thus if you write content to a frame, you can then call this to print it.
window.frameName.print();
note the only drawback (and its a big one), is that this calls up the print dialog... not the print preview window... thus the user doesn't really get a chance to see what they are printing and/or scale it to fit their printer/paper.
I personally wish that all browsers would implement the following to handle the above issue. ;-)
window.printPreview();

Why not just make everything invisible for media=print and then make visible only some blocks with your special code?

If you are doing this while the document is being loaded, you can use document.write to write the current document, then print it.
If the page has finished loading, you can use functions to manipulate the DOM, or preferably use a library such as jQuery or Prototype, then print the current document.

Jack, have you tried window.print() inside the iframe after loading the document?

There is a simple solution available no need to write a function and that is - window.print()
whereever you want to use it just put - onClick="window.print();"
Example
Print
I testes it every browser and it works like a charm !

There are three approaches to printing two of which will work.
Print the entire window: window.print(); will work.
Print only a specific frame: window.parent._frame_id_.print(); will work.
Print a documentFragment will not work (at least in Firefox):
document.createDocumentFragment().print();//undefined