I did a script that help me to make a web page in realtime, I can put html and css and everything work well, but I can't execute javascript because I am using a editor based in string, can you help me to find a way to execute javascript in this editor?
Pay attention, with this simple script you can put a whole page's code with CSS and HTML without escape and you'll see a formated page, but JAVASCRIPT don't work in this script.
function html() {
var str = document.getElementById("go").value;
document.getElementById("show").innerHTML = str;
}
<p id="show"></p>
<textarea id="go" onKeyUp="html()" width="100%" cols="50" rows="10">
</textarea>
UPDATE, at last, I got, this editor execute javascript too! Now I can build a whole page with javascript inside, thank you for the answers!!!
$(document).ready(function(){
$('#editor').keyup(function(){
$('#page').html($(this).val());
});
});
<p id="page"></p>
<textarea id="editor" width="100%" cols="50" rows="10" placeholder="you can use html, css and javascript here..."></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You are adding everything in a paragraph tag. That is why nothing in script tags are working. You might want to append everything in the body tag:
function html() {
var str = document.getElementById("go").value;
document.getElementsByTagName("body")[0].innerHTML = str;
}
Can you clarify what you mean by "find a way to execute javascript in this editor?" What are you desired results?
Javascript won't run automatically like that, u need eval() to run it, I would suggest something like this:
Although it increases the security risk but it is one of the only ways to do it.
function html1() {
var str1 = document.getElementById("go1").value;
document.getElementById("show1").innerHTML = str1;
}
function html2() {
var str2 = document.getElementById("go2").value;
document.getElementById("show2").innerHTML = eval(str2);
}
<p id="show1"></p>
<p id="show2"></p>
<textarea id="go1" onKeyUp="html1()" width="100%" cols="50" rows="10"> </textarea>
<textarea id="go2" width="100%" cols="50" rows="10"> </textarea>
<br><button onclick="html2()">Try it</button>
Related
I have made a textbox and an iframe in the same html. I want to load the 'html' rendered from textbox into html. I am using javascript button click event, but nothing is getting rendered. Pls help, I cant find where I am making mistake!
HTML:
<button onClick="convert()">Run</button>
<textarea id="mycode">
Hello World!
</textarea>
<iframe id="display"></iframe>
Javascript:
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').innerHTML = x;
}
Can someone help, what's wrong ?
Try setting src of iframe to data URI representation of textarea value x
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').src = "data:text/plain," + x;
}
<button onClick="convert()">Run</button>
<textarea id="mycode">
Hello World!
</textarea>
<iframe id="display"></iframe>
Just replace
document.getElementById('display').innerHTML = x;
with
document.getElementById('display').contentWindow.document.body.innerHTML = x
You can't manipulate an iframe with Javascript (or jQuery) because the iframe is essentially a separate webpage. This is for security purposes, to prevent one website from embedding a malicious script into an iframe that can target the host page. There is no way around it, as far as I know. Generally it's not good practice to use iframes.
I was browsing the answers for the same task. Well the accepted answer does help a little but the main task is to render "HTML". It works using the srcdoc attribute of the iframe tag.
function convert()
{
var x = document.getElementById('mycode').value;
document.getElementById('display').srcdoc = x;
}
<button onClick="convert()">Run</button>
<textarea id="mycode">
<!-- Comment is not rendered -->
Hello World!
</textarea>
<iframe id="display"></iframe>
I have a textarea on my site where I want to paste URLs.
Is this possible to create line break every time I paste URL? If not, can it create line break when I enter space?
I've searched for the solution but all i found is the solution to create line breaks after form submit which didn't help me.
Fiddle here: https://jsfiddle.net/3sj2644z/
this.value = this.value + "\n";
You listen for the paste event on the textarea and you grab the text that is currently in it and append a linebreak with the escape character \n to it and then place that new string value back into the textarea.
You don't use html in the textarea so the br tag doesn't work if you think so.
function ConvertToLinks() {
str = document.getElementById("S1").value;
str = str.replace(/\r\n|\n/g,'<br>');
document.getElementById('txtLinks').innerHTML = str;
}
<html>
<head>
<title>Text area redirect</title>
</head>
<body>
<textarea rows="5" id="S1" name="S1" cols="40">
Yahoo
Google
Web Developer
from Web
</textarea>
<br><button onclick="ConvertToLinks()">Convert to Links</button>
<div id="txtLinks" style="width:350px;min-height:100px;border:1px solid red"></div>
</body>
</html>
By http://www.codingforums.com/javascript-programming/195565-place-links-textarea.html
I have got a variable in javascript called 'signature'
var signature;
//(Data is here)
document.write(signature)
In HTML, I have the following:
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
What i want is when i click generate button the variable signature appers in text area. Can anyone help?
I think you need like:
var signature = "Hello";
function addVal(){
document.getElementById('content').value = signature
}
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
<button id="btnClick" onclick="addVal()">Click</button>
You can use JQuery :
$("#content").val(signature)
See val-vs-text-for-textarea
Your question is not quite clear but I assume you want to do something like this.
First in your html add a textarea and a button with these properties. Use disabled only if you want to make the text area disabled.
<textarea disabled id="displaytext"></textarea>
<button onclick="buttonFunction()">Click !</button>
Now in your javascript file, write the buttonFunction() to display the value in signature variable in the text area.
var signature = "This is the content to display";
function buttonFunction() {
document.getElementById("displaytext").innerHTML = signature;
}
This is the result. The text will be displayed when you click the button.
I was making an HTML code editor, I tested all of the HTML tags I know and they all work, except for script tags.
When I type <script>something</script> into the text area and click a button, the script doesn't execute.
Please help! Here is the code:
<span id="finishedProduct">
<p>When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!</p>
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea></br>
<button type="button">Run Code!</button>
</form>
<script>
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here is the working code:
<span id="finishedProduct">When you enter code, your finished product will be here! Don't worry, if you make a mistake you can fix it later!
</span>
<form name="userCode">
<textarea name="userCode" cols="90" rows="20" placeholder="Type your code here"></textarea>
<br/>
<button type="button" onClick="makeCode()">Run Code!</button>
</form>
<script type="text/javascript">
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
</script>
Here's a link to the JSFiddle: http://jsfiddle.net/Q2qLF/. I've removed some broken HTML, such as; a button shouldn't be contained in a anchor tag, I've added a 'onclick' in your button that will call the 'makeCode()' function and I've added the 'type="text/javascript"' into your script tag as this maximises compatibility.
Please let me know if you need any more help
I've updated my JSFiddle http://jsfiddle.net/Xanco/Q2qLF/1/
Now there are 2 textareas, one for the HTML and one for the Javascript. i've also created a new function called 'makejs', this takes the value of the Javascript textarea and runs it through a 'eval' - this executes the Javascript passed to it.
I've put the answer in a Fiddle here: http://jsfiddle.net/joshnicholson/P8eh9/
I'm not sure why you're wrapping the button element inside an anchor, but I would do it a slightly different way.
Here is the revised javascript:
var myButton = document.getElementById("btnRunCode");
myButton.addEventListener("click", makeCode);
function makeCode() {
var userCode=document.forms["userCode"]["userCode"].value;
document.getElementById('finishedProduct').innerHTML = userCode;
}
I added an id of "btnRunCode" to your button element, just to make things easier for me. See the Fiddle.
Is it possible to have a pure Javascript text remaining counter that outputs the value in a <span> or <p> tag rather than an input field? I can only find Jquery solutions or ones that output in input fields.
Have seen over the net that a lot of people are wanting a remaining characters counter that is pure Javascript and doesn't preview the number in an input box. I was messing around with JSFiddle lastnight and did a little work around and was able to get the remaining characters to show in other tags such as <span>. So I would just like to share this with everyone and hope it might come in handy.
HTML:
<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>
Javascript:
<script>
function textCounter(textarea, countdown, maxlimit) {
var textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
}
</script>
<script type="text/javascript">
textCounter('message','messagecount',100);
</script>
Here is also a working JSFiddle
Note: Should anyone want to contribute to the script to make it better, please feel free to do so. I am not an expert in Javascript so it most likely a more user friendly solution.
Kind Regards
something like the following should also work if you put jQuery on the page (and why wouldn't you :)):
$('#text-input-area').keyup(function(){
$('#target-div').text(max_length-$(this).val().length + " characters remaining");
})
Lodder's answer is perfect - except that I could not re-use it on the same page. I have tweaked the code to pass the name of the span, so it can be re-used on the same page.
<script>
function textCounter(textarea, countdown, maxlimit, nameofspan) {
var textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById(nameofspan).innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
}
</script>
<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100,'messagespan');" onKeyUp="textCounter('message','messagecount',100,'messagespan');"></textarea>
<span id="messagespan"></span>
<script type="text/javascript">
textCounter('message','messagecount',100,'messagespan');
</script>