I am trying to create a program that generates random functions then shows them in LaTeX but I can't figure out how to edit LaTeX when a button is pressed.
This code works:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<script>
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
</script>
</body>
</html>
But this does not:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<button onclick="change();">Change the LaTeX</button>
<script>
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
}
</script>
</body>
</html>
I tried to use MathJax like this:
<html>
<body>
<button onclick='change();'>Change the LaTeX</button>
<div lang='latex' id='Latexdiv'></div>
<script type='text/javascript'>
var latexdiv = document.getElementById('Latexdiv');
function change()
{
var latex = document.createElement('script');
latex.src = 'http://latex.codecogs.com/latexit.js';
document.head.appendChild(latex);
var mathjax = document.createElement('script');
mathjax.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
document.head.appendChild(mathjax);
latexdiv.innerHTML = '\\(sin(x)\\)';
};
</script>
</body>
</html>
This, unfortunately, only works the first time you press the button. If you press it twice, it just shows "\(sin(x)\)" in regular HTML. How would you get it to work twice?
http://latex.codecogs.com/latexit.js executes at the end:
LatexIT.add('*');
That adds and onload listener that executes a render function, that's why works in the first case, the page ends loading after your first script.
You could simply add the render function in your change function.
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
LatexIT.render('*',false);
}
Related
I have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
I'm working on a basic quiz Javascript game, but when I use
document.getElementById("demo").innerHTML = "text";
I get this error message:
Uncaught TypeError: Cannot set property 'innerHTML' of null
in the Chrome Console. I have no idea why this no longer works, it has worked for me in the past. However, if I open up a new
tag, the function runs and the code works. It's only when I run the function in the same
tag.
My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); //this one does not work
</script>
</head>
<body>
<p id="qarea"><p>
<p id="demo"></p>
<script>
quiz(); //this one does work
</script>
</body>
</html>
You forgot to include id in front of your ="demo" it should look like <p id="demo"> instead of
<p="demo"></p>
Second the reason the first call to quiz does not work is that your document has not loaded yet. you want to do this on pure js
<body onload="myFunction()">
Like this should work: http://jsfiddle.net/t8jnhmhg/1/ <p="demo" is wrong
It should be the following.
Where you would have to add the id attribute to the p tag.
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); // Will not work here because there is no such
// element with ID "demo" at this point in the page load.
</script>
</head>
<body>
<p id = "qarea"><p>
<p id = "demo"></p>
<script>
document.addEventListener( "DOMContentLoaded", function(){
quiz(); // Will work here because the DOM is loaded at this point.
});
</script>
</body>
</html>
EDIT I Found the solution! credit goes entirely to the assistance I received from Mixel. For those who find themselves in the same predicament of needing to pull a div from an iframe without using onload here is the entire working code that I am using:
<html>
<head>
<title>Main page</title>
<style type="text/css">#hiddenframe {display:none;}</style>
<script type="text/javascript">
window.onload = function () {
var myUrl = "test.html"
document.frames['hiddenframe'].location.href = myUrl;
}
</script>
</head>
<body>
<div id="parent-div"></div>
<iframe id="hiddenframe"></iframe>
</body>
</html>
And the Child Page:
<html>
<head>
<title>Child Page</title>
<script type="text/javascript">
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
</script>
</head>
<body>
<div id="daughter-div">
This is the Child Div!
</div>
</body>
</html>
Thank you once again to Mixel for his help and patience in finding a solution
That's because you reload hiddenframe in onload handler. Reloading triggers onload event, then onload handler reloads hiddenframe. And this happens again and again...
Edit:
May be I do not understand what you want to do in your code, but if you want to load iframe when parent window is loaded you need this:
window.onload = function () {
document.getElementById('hiddenframe').setAttribute('src', 'test.html');
}
And there is window.onload handler of test.html page:
window.onload = function () {
parent.document.getElementById('parent-div').innerHTML = document.getElementById('daughter-div').innerHTML;
}
Edit2:
That's html of main page:
<div id="parent-div"></div>
<iframe id="hiddenframe">
</iframe>
And that's test.html:
<div id="daughter-div">
Child div!
</div>
I would like to add this code:
<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2">
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
into the call of the isOpen() method at the end of the following javascript code:
<head>
<script type="text/javascript">
var theDate = new Date();
var dayOfWeek = theDate.getUTCDay();
// Returns true if the restaurant is open
function isOpen()
{
//I'll fill this in later, for now, return true
return true;
}
</script>
</head><body>
<script type = "text/javascript">
if(isOpen())
{
//ADD CODE HERE
}
</script>
</body>
However, when I try to just copy and paste the two together it doesn't work. I think it has something to do with nested tags but I'm not sure
You can write out the script into the document dynamically.
<body>
<script type = "text/javascript">
if(isOpen())
{
document.write('<script type="text/javascript" src="http://www.formstack.com/forms/js.php?1134414-uqmj2UXxEw-v2"></script>');
}
</script>
<noscript>
<a href="http://www.formstack.com/forms/CampusEnterprises-chopped_greens_order_form__copy" title="Online Form">
Online Form - Chopped Greens Order Form - COPY
</a>
</noscript>
</body>
As #Jared Farrish noted in the comments, you might as well use the noscript tag directly on the page.
I'm working on a Chrome extension where I need to pass highlighted text into a browser_action. I found the following code in a Google Group, and at the time it was written it was still valid - but it doesn't work anymore..
Does anyone know an alternative solution?
background.html:
<html>
<head>
<script type="text/javascript">
var selection_callbacks = [];
function getSelection(callback) {
selection_callbacks.push(callback);
chrome.tabs.executeScript(null, { file: "contentscript.js" });
};
chrome.extension.onRequest.addListener(function (request) {
var callback = selection_callbacks.shift();
callback(request);
});
</script>
</head>
<body>
</body>
</html>
popup.html:
<html>
<head>
<script type="text/javascript">
function onSelection(text) {
document.getElementById("output").innerHTML = text;
}
chrome.extension.getBackgroundPage().getSelection(onSelection);
</script>
</head>
<body>
<div id="output">
This should be replaced with the selected text
</div>
</body>
</html>
contentscript.js:
chrome.extension.sendRequest(window.getSelection().toString());
You could use a real content script instead of injecting JavaScript into the page with chrome.extension.executeScript. You could then have background.html ask the content script for the selection using chrome.tabs.sendRequest.