This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is It Possible to Sandbox JavaScript Running In the Browser?
I would like to give the user the ability to input JavaScript in a textarea like this:
<!DOCTYPE html>
<html>
<head>
<script>
function lapzwans()
{
var d = document.getElementById("area").value;
document.getElementById("blahblah").innerHTML = d;
}
</script>
</head>
<body>
<h1>Javascript in Javascript</h1>
<p>This experiment attempts to launch a script from another script.</p>
<p>Enter your script in the text area</p>
<textarea type="text" id="area"></textarea>
<button onclick="lapzwans()">Click here</button>
<p id="blahblah"></p>
<p id="deegroller">Make this text green</p>
</body>
</html>
I have tried this, but I get no result.
Is it impossible to do this, or am I doing things wrong?
Thanks in advance.
One possible answer:
eval(/* some JS here */);
Note though that what you are trying to do can be dangerous (in some cases) as you are allowing user-written arbitrary JS to be executed.
Related reading:
How evil is eval?
When is JavaScript's eval() not evil?
the eval method takes whatever string is passed to it and tries to run it.
eval("alert('foo')");
will alert "foo";
You don't need to use the evil eval to do this.
function lapzwans()
{
var d=document.getElementById("area").value;
document.getElementById("blahblah").innerHTML=d;
var userScript = new Function(d);
userScript();
}
Related
This question already has answers here:
Why can't I call a function named clear from an onclick attribute?
(3 answers)
Closed 9 months ago.
htmlfile:
<!DOCTYPE html>
<head>
<script src="script.js"></script>
</head>
<body>
<div class="q" id="cooki" onclick="cookie()">Accept!</div>
</body>
js:
function cookie() {
alert("hi");
}
and I even tested with console.log, I used script source in body tags , nothing worked
Hi #Z3N1X Welcome to Stackoverflow.
To fix your issue try renaming your function to something else,
since how all of the comments below the answer has said(Thanks for correcting me)
when you use the cookie name in the function or variable the onclick thinks your trying to use the document.cookie function.
that's why this is happening.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
so I'm using this Javascript (API) that has a bunch of function. How do I go about writing it to an HTML file?
so one of the function is "api.ping()" which works fine on powershell, but I cant get it to print that in an HTML file.
So in the script I wrote
document.getElementById("demo").innerHTML = api.ping();
and the HTML is
<!DOCTYPE html>
<html>
<body>
<script type="index.js"></script>
<p id="demo"></p>
</body>
</html>
I'm trying to put the value returned from the call onto the HTML file.
I think your index.js file is probably not being included. You'll want to change the tag line to read:
<script type="text/javascript" src="index.js"></script>
Assuming that index.js is in the same directory as this HTML file.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.write("Oops! The document disappeared!");
}
</script>
</body>
</html>
The above code is showing output like below
My First Web Page
Try it
After clicking Try it button I got output like below
Oops! The document disappeared!
In internet i found the reason for disappear is If I execute document.write after the document has finished loading, the entire HTML page will be overwritten.
but my doubt is when document has finished loadind...........i am not gettimg it.
Then I modified the above code like below
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<button onclick="myFunction()">Try it</button>
<script>
function myfunction()
{
document.write("My First JavaScript");
}
</script>
</body>
</html>
but the above code is showing output like below
My First Web Page
Try it
After pressing Try it button it is not giving any output.I don't know why these 2 program are working like this.help me..................
Second one is failing because you have a small f in myfunction and call it with a big F
In Chrome, if you open Developer tools ( Cntrl-Shift-J ) and go to the console it will show you the javascript error.
The problem in the second page is that you are calling a function called myFunction.
But the function that you have is called myfunction, the F is in Uppercase.
so the javascript error is:
Uncaught ReferenceError: myFunction is not defined
JavaScript is case sensitive. You define
myfunction
But call
myFunction
Note the F.
In your second function, myfunction, F should be CAPS or at onclick=myFunction() F should be small. Check your console window. No output is because of javascript errors
This question already has answers here:
when and where to put javascript in html
(7 answers)
Closed 9 years ago.
the thing is i'm unable to figure out where to embed javascript in html page whether in head section or body section.
example 1:
<html>
<head>
<title>events</title>
<script>
document.getElementById("b").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<p id="demo"></p>
<button id="b">new</button>
</body>
</html>
in the above example I placed script tags in head section but it is not working.
example: 2
<html>
<head>
<title>events</title>
<script>
function upper()
{
var x=document.getElementById("t");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body >
enter some text:<input type="text" id="t" onChange="upper()"/>
</body>
</html>
in the second example I placed the javascript in head section it is working properly.first example demonstrates that on clicking a button date will be displayed in the second example in a text box when data is entered and if we come out of the box the letters in the box will we converted to uppercase.
To have it more readable I prefer to always place JavaScript in the head section. If you need to access elements from there, use the window.onload event:
<head>
<title>events</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("b").onclick = function() {
displayDate();
};
};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
This would work just fine.
Your second example worked because you just defined a function, you didn't try to access any element.
You can put it in the head. The problem is that your examples are not the same. The first one doesn't work because the current date is retrieved by calling Date(), when it should be new Data().getDate(). The second example works because the code is valid.
The problem you're running into is that you're trying to reference an element before it is loaded into the DOM.
When you're putting the script in the HEAD tag, the dom hasn't been loaded yet and the document.getElementById won't find what you're looking for.
You have a few different options to deal with this. You can put the script at the end of the page, which will work for your small example here.
Probably a better option is to take a look at learning/using jquery or another js utility. Jquery makes it easy to solve this issue by giving you a "ready" event. This ready event will be triggered when the DOM is fully loaded. So:
$(document).ready(
function()
{
$("#demo").html((new Date()).toString());
});
Is all you really need. With this approach, it doesn't matter where the script it on the page.
This question already has answers here:
Can scripts be inserted with innerHTML?
(26 answers)
Closed 9 years ago.
i dont know a lot of javascript but one thing ive realized is doing this
function example()
{
document.getElementById("example").innerHTML="<script>document.write(example)</script>"
}
doesnt work! i understand this but is there another way of doing this same thing that does work?
This approach worked for me:
<body>
<div id="main">
</div>
<script>
// create a script element
var script = document.createElement('script');
// fill its inner html with js code
script.innerHTML = 'alert("Javascript");'
// add it inside your target div and then profit!
document.getElementById('main').appendChild(script);
</script>
</body>
Edit:
I've found more info about your problem here, I suggest you read the question, it has plenty of helpful answers and it also explains why your first approach did not work: Can scripts be inserted with innerHTML?
A simple vanilla approach of using this code to write data inside a div after the page has loaded could be done like this:
<html>
<head>
<script>
window.onload = function () {
var script = document.createElement('script');
script.innerHTML = 'alert("Javascript");'
document.getElementById('main').appendChild(script);
}
</script>
</head>
<body>
<div id="main">
</div>
</body>
</html>
There is two error on your script. This is doesn't work, because variable name and function name equal to div id and this wrong method for javascript. You write a code to your div, but you don't run it. You can try that;
<div id="mydiv"></div>
<script>
function example()
{
document.getElementById("mydiv").innerHTML = eval("document.write('lololo')");
}
example();
</script>