Multiple JavaScript functions not running - html

I'm trying to make an app that allows you a text editor. You can type anything in to a text block. You can do two things with said text block:
a) run the text as an html page in a new about:blank tab or
b) save the text as a .html
For some reason, though, when I tried to implement the save ability, neither function would load. If I go into the JS console, it shows me this error upon clicking on the save button:
"Uncaught ReferenceError: saveAsFile is not defined (temp.html,1)"
When I seperated them into two <script> blocks, I could get the save function to work. However, when I did that, the Run in New Tab function no longer worked. It was utterly confusing.
I have used multiple functions before, and I don't know why it's suddenly not working. Can someone help? This is my code:
<script>
function run() {
var codeTab = window.open("" _blank);
var codeRun = document.getElementById("code").value;
codeTab.document.write(codeRun);
}
</script>
<script>
/*i stole-i mean used-this code from someone else*/
function saveAsFile() {
var textToSave = document.getElementById("code").value;
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'save.html';
hiddenElement.click();
}
</script>

On line 3, you have window.open("" _blank);. It should be window.open("_blank");.
I also cannot see anywhere saveAs() is being called (or defined). Is it possibly being called in codeRun? See below code which worked for me.
<textarea id="code">
</textarea>
<button onclick="run();">Run</button>
<button onclick="saveAsFile();">Save</button>
<script>
function run() {
var codeTab = window.open("_blank");
var codeRun = document.getElementById("code").value;
codeTab.document.write(codeRun);
}
/*i stole-i mean used-this code from someone else*/
function saveAsFile() {
var textToSave = document.getElementById("code").value;
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'save.html';
hiddenElement.click();
}
</script>

Related

HTML <form> input blocked after WASM loads

Please could somebody help me to resolve this problem?
I have canvas, inserted in html and drawn usng WebAssembly in C, however it seems to block the HTML form input fields - I cannot type anything once the wasm module is loaded and runs...
I use emscripten_set_main_loop_arg() in C instead, of requestAnimationFrame() in JS:
const int simulate_infinite_loop = 1; // call the function repeatedly
const int fps = -1; // call the function as fast as the browser wants to render (typically 60fps)
emscripten_set_main_loop_arg(render, &cbp, fps, simulate_infinite_loop);
Later, I insert it in HTML:
<script type='text/javascript'>
var Module = {};
fetch('app/aghdr.wasm')
.then(response =>
response.arrayBuffer()
).then(buffer => {
Module.canvas = document.getElementById("canvas");
Module.wasmBinary = buffer;
var script = document.createElement('script');
script.src = "app/aghdr.js";
script.onload = function() {
console.log("Emscripten boilerplate loaded.")
}
document.body.appendChild(script);
});
</script>
Does anybody know, hot to ensure that normal HTML form processes messages while WASM module is running?
See: http://inters.cloud/test3/
Perhaps it's caused by emscripten_set_keypress_callback().
When a argument callback returns non-zero, event.preventDefault() blocks a keypress event.

HTML 5 Spell Check On Page Load

Is there a way to make the built in HTML 5 spellcheck test fields on page load? I want to add this feature to an existing intranet site so that when the user loads a form the spelling errors are displayed.
It seems that the spelling errors are displayed when the user types an invalid value. I'm trying to show invalid values that were previously saved then served to the page.
Is this possible?
Thanks ST
...
<script>
var e;
function spell()
{
var sp = document.getElementById('sp');
var sel = window.getSelection();
sel.selectAllChildren(sp);
e = sel.getRangeAt(0);
select(sp, e.startOffset);
return true;
}
function select(sp, i)
{
var sel = window.getSelection();
if (i >= e.endOffset) return true;
var r = document.createRange();
r.setStart(sp, i);
r.setEnd(sp, i);
i++;
sel.removeAllRanges();
sel.addRange(r);
setTimeout(function() {select(sp, i)}, 20);
return true;
}
</script>
</head>
<body onload="spell();" >
<div id="sp" spellcheck="true" contenteditable="true">
...
This worked for me with Chrome. It's a bit ugly, you see the cursor moving in the editable div, but it does the job.

How to pass parameter from a .properties file to an HTML page

Greetings Fellow Stackers,
I have a property file "demo.properties" which contains key - value pair:
Build=47
I also have an HTML (static) page 'demo.html'
<html>
<body>
The current build is: <!--here I want the value of build from the demo.properties -->
</body>
</html>
Is there a way to access the value the 'Build' value here? Any suggestions would be very much appreciated.Thanks!
You can use javascript to read your file and then split the text read from demo.properties file on "=" just to get the build version.
var readFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function() {
var result = reader.result;
var outputDiv = document.getElementById('output');
outputDiv.innerText = "The current build is: " + result.split("=")[1];
};
reader.readAsText(input.files[0]);
};
Working plnkr is: Plnkr

How to call html code in a function

I am developing a tab in my website and I want to have html code for different tab in different file.how do I call html code from one file to another
Four options; Ajax, dynamic JavaScript, tab already loaded with display:none;, or iframe.
I have used this to do what i think you need.
(function () {
var UI;
UI = {
main: function () {
var elems;
elems = "<div id='div1'>Div 1</div>";
elems += "<div id='div2'>Div 2</div>";
body.innerHTML = elems;
}
}
window.onload = function () {
UI.main();
}
}());
note: body.innerHTML goes to the ID, not the tag. So HTML would look just like this:
<body id='body'>--JS inception here--</body>
So if you are going to target a specific tab, it would look like this:
elems = "<div>my tab</div>";
myID.innerHTML = elems;

Google Apps Script, HTML addClickHandler ServerHandler does NOT work

Can anyone confirm that HTML widgets accept ClickHandlers on the Server side ? I can't get my below code to work.
I create a serverHandler (and for good measure I have even added a useless callback element). Subsequently, I add it to a HTML.addClickHander (for good measure I have even added it to .addMouseUpHandler as well). The function is NOT executed.
var mouseclick = app.createServerHandler("handleTrainingClick_").addCallbackElement(lstFilter);
var params = [ "fromOrg", "trainingTitle", "dueDate", "medical", "status" ];
var resultSet = blSelectActiveTrainings_();
while (resultSet.hasNext()) {
var training = resultSet.next();
var html = TRAINING_ROW;
for (var pI in params) {
html = html.replace("$"+params[pI], training[params[pI]]);
}
pnlList.add(app.createHTML(html).setId(training.id).addClickHandler(mouseclick).addMouseUpHandler(mouseclick)
.addMouseMoveHandler(mousemove).addMouseOutHandler(mouseout).addMouseOverHandler(mouseover));
}
function handleTrainingClick_(e) {
Logger.log(e.source);
var app = UiApp.getActiveApplication();
return app;
}
HTML widgets server side handlers work just fine. It was an incorrect reference in my code. Thanks all.