I have seen many questions like this one, but my question is slightly different.
I wrote an HTML code that can execute another HTML code inside a <div>. The page looks like this:
The code of this page is this:
<html>
<meta name="viewport" content="width=device-width"/>
<style>
html, body{margin: 0; padding: 0;}
textarea {width:100%; height: 28%;}
div {display: block; width: 100%;}
</style>
<body onload="loadData()" onbeforeunload="storeData()" onunload="this.onbeforeunload()">
<div style="overflow: auto;">
<textarea id="code"></textarea>
</div>
<div>
<button onclick="run()" style="float: left;">Run</button>
<button onclick="setSize()" style="float: right;">Set size</button>
<input type="number" id="size" style="float: right; text-align: right;"/>
</div>
<div id="result" style="overflow: auto; height: 70%; border-top: 2px solid black;"></div>
</body>
<script>
const editor=document.getElementById('code');
function run()
{
var res=document.getElementById('result');
var input=editor.value;
res.innerHTML=input;
}
function setSize()
{
editor.style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
function storeData()
{
var data=document.getElementById("code").value;
var txtSize=document.getElementById("size").value;
localStorage.setItem("stored", data);
localStorage.setItem("size", txtSize);
}
function loadData()
{
var data=localStorage.getItem("stored");
var txtSize=localStorage.getItem("size");
document.getElementById("code").value=data;
document.getElementById("size").value=txtSize;
editor.style.fontSize=txtSize;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
</script>
</html>
It is working absolutely correct, except one thing. The problem is that, if a <button> is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared. See these screenshots:
So, can you tell any way by which I can ensure that no changes can be done to the original page?
Please help a class 10 student.
Instead of having 'result' as a regular div element, which is meant to represent a section of the actual page, what you want here is to embed a whole separate page/context, which is something that iframe is used for.
I managed to accomplish what you wanted by replacing the div with an iframe, and the first line in the 'run' method with this:
var res=document.getElementById('result').contentDocument.body;
See this fiddle for an example.
The problem is that, if a is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared.
That is exactly what is supposed to happen when document.write() is called. That function always replaces the entire page with whatever is in the quotes.
The solution is to simply never call that method. If there is some reason why you want to call document.write, you need to explain what that is in your question so we can suggest an appropriate alternative.
Related
In HTML structure we have
<html lang="tr">
It is very useful when you need to transform text to upper/lowercase with different languages.
<div style="text-transform: uppercase;" id="asd">iğüşçıâ</div>
I'm working on a single page application, so I can't refresh the page.
But web application is multilingual so I need to change "lang" attribute of html tag without refreshing page.
I tried:
document.documentElement.lang = "en"
It doesn't affect text-transform: uppercase;.
If I manually change the html lang attribute in HTML file and reload the page, it works fine.
How can I done this? Is there a way?
Thanks advance.
update:
Some Stackoverflow users marked this is about ajax, php things. I'm sure sure this question never asked before. This question NOT about ajax and php.
You can use Angularjs to change the language without reloading the page.
For changing the language, you can use the angularjs $scope and change the language of HTML without reloading.
You can use setAttribute for changing or adding new attributes from elements;
document.documentElement.setAttribute("lang","tr")
function changeLangTr() {
document.documentElement.setAttribute("lang","tr")
getText()
}
function changeLangEn() {
document.documentElement.setAttribute("lang","en")
getText()
}
function getText() {
var node = document.getElementById('text')
}
p {
margin-top: 30px;
font-size: 20px;
text-transform: uppercase;
}
p.upper {
text-transform: uppercase;
}
p#info {
font-size: 12px;
color: red;
margin-top: 0;
}
<html name="html" lang="tr">
<body>
<div id="home">
<button onclick='changeLangTr()'>
Change Language TR
</button>
<button onclick='changeLangEn()'>
Change Language EN
</button>
<p id="text">
Türkçe Karakterlerin Kullanımı (iğüşçıâ)
</p>
<strong>Now:</strong>
<p id="info">
Turkish Lowercase
</p>
</div>
</body>
</html>
I'm honestly just confused on what I should code for this project.
This is for a project I'm working on. Countless attempts I've tried just made me land back to the ground floor.
<!DOCTYPE html>
<html>
<head>
<title>Equation Solver</title>
<style>
/* CSS styles goes here */
form {
margin: auto; /* Centers the Form */
position: center;
text-align: center;
border: 4px solid black;
background:rgb(153, 102, 255);
color: black;
width: 300px;
height: 100%;
padding: 20px 68px;
border-radius: 32px
}
</style>
<script>
//JavaScript code goes here
</script>
</head>
<body>
<h1 align="center"> Solve the Equation </h1>
<form align="center">
<b>Click Me For a Mathematic Equation.</b><br>
<button onclick="ClickMe();">Click Me</button>
</form>
<form align="center">
<b>Submit Your Answer</b><br>
<button onclick="Submit();">Submit</button>
</form>
<form align="center">
<b>Reset</b><br>
<button onclick="Reset();">Reset</button>
</form>
<br><br>
</body>
</html>
One Form should have a button that once clicking it, it will generate a random equation out of 3 saved equations (I'm going to try to write code for a quadratic equation
The Other Form should be where you submit your answer to the random equation that was generated from above. If your answer is correct to the random equation then the background turns green otherwise it turns red. (The second part, I can do on my own)
The Last Form basically reloads your website in the tab.
You just need to write your functions inside the script block (between <script> and </script>, replacing //JavaScript code goes herewith your code.
You have to define the three functions used in the onclick events of the buttons.
ClickMe(), Submit() and Reset()
Defining functions in Javascript
https://www.w3schools.com/js/js_functions.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
Clickme should get a random element from an array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Getting a random value from a JavaScript array
Maybe you'll need also some dom manipulation function to add the content of the equation somewhere
https://www.w3schools.com/js/js_htmldom_methods.asp
How to add content to html body using JS?
Submit() needs to get some input and compare it to the expected result, so you'll need some input fields on your submit form
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms
https://www.w3schools.com/html/html_forms.asp
Or you should prompt the user to input the answer
https://www.w3schools.com/jsref/met_win_prompt.asp
https://www.webnots.com/create-alert-prompt-confirm-dialog-boxes-using-javascript/
As you are checking the answer to be valid. You'll need to check evaluating the equation exposed and maybe you need eval but remember
eval is evil
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
https://javascriptweblog.wordpress.com/2010/04/19/how-evil-is-eval/
Your Reset() function just needs to reload the page
- How to reload a page using JavaScript
I'm trying to create a copy to clipboard IE javascript function but my code isn't working. How should I format my parameters and pass the argument?
/*invisible storage*/
<textarea id="storageBox" STYLE="display:none;">
</textarea>
<p id="abc">I WANT TO COPY THIS TEXT</p>
<button onClick="Copy(abc);">Copy</button><br />
<script type="text/javascript">
function Copy(txt) {
storageBox.innerText = txt.innerText;
Copied = storageBox.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
}
</script>
Major karma for anyone who can write this using zclip or show me a similar example as well!!
The following changes should help:
... onclick="Copy('abc');"...
storageBox.value = document.getElementById(txt).innerText
I think. You weren't very specific in saying what doesn't work or even for what reason you're trying to hijack the clipboard (what if the user has important stuff in there?)
First, you need to pass the parameter as a string:
<button onClick="Copy('abc');">Copy</button><br />
In your function, you need to get the element from the DOM based on this ID (as a string):
function Copy(txt) {
storageBox.innerText = document.getElementById(txt).innerText;
...
Though I commented your script working fine, there is something to fix in the HTML. If you set display: none, execCommand() can't copy the content. So you'll need to do this:
<textarea id="storageBox" style="width: 0px; height: 0px; border: 0px;"></textarea>
I have a div with id="div_register". I want to set its width dynamically in JavaScript.
I am using this following code:
getElementById('div_register').style.width=500;
but this line of code isn't working.
I also tried using the units px like the following, still no luck:
getElementById('div_register').style.width='500px';
and
getElementById('div_register').style.width='500';
and
getElementById('div_register').style.width=500px;
but none of this code is working for me.
I don't know what's going wrong.
I am using Mozilla Firefox.
EDIT
<html>
<head>
<title>Untitled</title>
<script>
function show_update_profile() {
document.getElementById('black_fade').style.display='block';
//document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= '500px';
//alert('kutta');
document.getElementById('div_register').style.display='block';
document.getElementById('register_flag').value= 1;
document.getElementById('physical_flag').value= 0;
document.getElementById('cultural_flag').value= 0;
document.getElementById('professional_flag').value= 0;
document.getElementById('lifestyle_flag').value= 0;
document.getElementById('hobby_flag').value= 0;
//alert(window.innerWidth);
}
</script>
<style>
.white_content {
display:none;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
</div>
<div id="div_register">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
The properties you're using may not work in Firefox, Chrome, and other non-IE browsers. To make this work in all browsers, I also suggest adding the following:
document.getElementById('div_register').setAttribute("style","width:500px");
For cross-compatibility, you will still need to use the property. Order may also matter. For instance, in my code, when setting style properties with JavaScript, I set the style attribute first, then I set the properties:
document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";
Thus, the most cross-browser compatible example for you would be:
document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';
I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files. Not only will your code be much more maintainable, but you'll actually make friends with your Web designers!
document.getElementById("div_register").setAttribute("class","wide");
.wide {
display:block;
width:500px;
}
.hide {
display:none;
}
.narrow {
display:block;
width:100px;
}
Now, I can easily just add and remove a class attribute, one single property, instead of calling multiple properties. In addition, when your Web designer wants to change the definition of what it means to be wide, he or she does not need to go poking around in your beautifully maintained JavaScript code. Your JavaScript code remains untouched, yet the theme of your application can be easily customized.
This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).
These are several ways to apply style to an element. Try any one of the examples below:
1. document.getElementById('div_register').className = 'wide';
/* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';
Fix the typos in your code (document is spelled wrong on lines 3 & 4 of your function, and change the onclick event handler to read: onclick="show_update_profile()" and you'll be fine. #jmort's advice is good - simply set up 2 css classes that you switch between in javascript - it'll make things easier.
You might also check out element.addEventListener for assigning event handlers to your elements.
The onclick attribute of a button takes a string of JavaScript, not an href like you provided. Just remove the "javascript:" part.
If you remove the javascript: prefix and remove the parts for the unknown ids like 'black_fade' from your javascript code, this should work in firefox
Condensed example:
<html>
<head>
<script type="text/javascript">
function show_update_profile() {
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= "500px";
document.getElementById('div_register').style.display='block';
return true;
}
</script>
<style>
/* just to show dimensions of div */
#div_register
{
background-color: #cfc;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="show_update_profile();" value="show"/>
</div>
<div id="div_register">
<table>
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
Be careful of span!
myspan.styles.width='100px' doesn't want to work.
Change the span to a div.
You have to use document. The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content,
know more
document.getElementById('div_register').style.width='500px';
Please take a look at the following html.
EDIT: UPDATED THE HTML PART
<div id="html_editor">
<head>
<style type="text/css" >
.blog
{
border:2px solid grey;
width:auto;
}
<style>{customcss}</style>
</style>
</head>
</html>
</div>
Please take a look at the Css Class 'blog',i want to add some other values to that class through js/jQuery.
Actually it is a HTML editor ,on the body tag user selecting a the 'blog' element,so that time i want to give the user to set CSS for the blog,user changing the CSS on a text area,after that i want to append/rewrite the data to that 'blog' class.
Ex : user setting the class like the following
width:250px;
background:red;
key:value..etc..
so after that i want to change that 'blog' css class to
.blog
{
width:250px;
background:red;
key:value..etc..
}
How can i achieve this ? is there any way by using jQuery ??
UPDATE : Please check this image.
Thank you.
For an HTML like this:
<style id="mycss" type="text/css" >
.blog
{
border:2px solid grey;
color:black;
}
</style>
<div class="blog">This is a blog</div>
Try this js:
var style = document.getElementById("mycss");
newrule = document.createTextNode('.blog { color:red;}');
style.appendChild(newrule);
This isn't very efficient as it overrides the previous rule, but you can get the general method.
JSFiddle here
I went ahead and did the following test because I haven't done JavaScript in a while and I wanted to give it a go. The first method uses String.split to parse the textarea input and the second some basic regex. The regex will fail if there's more than one statement per line. They both put a syntax burden on the user greater than native CSS, so:
I think you should do what nikan suggested.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", '1.6.4');
console.debug('loading');
google.setOnLoadCallback(function() {
var input = $('#userinput').val();
var statements = input.split(';');
for (var statement in statements){
var style = statements[statement].split(':');
var name = $.trim(style[0]);
var value = $.trim(style[1]);
$('#target').css(name, value);
}
var very_basic_css_matching = /^ *([^:]+): *([^;]+);/gm;
while (matches = very_basic_css_matching.exec(input)){
$('#target').css(matches[1], matches[2]);
}
});
</script>
</head>
<body>
<textarea id="userinput">
width:250px;
height:10px;
background:red;
</textarea>
<div id="target">
</div>
</body>
</html>
With jquery is easy to access the current style and modify it:
http://jsfiddle.net/jedSP/7/
Try writing "color:white" or "background:green" in the text area, works in all browsers. When the user is done just use $("#style").html() to get the current CSS.
EDITED: Updated link... like this?
if you want this to happen in real time, its as easy as taking the value of the textarea and parsing it in javascript, and then applying the values with jquery like so
$('.blog').css({'property1':'value1','property2':'value2'});
now if you want to save these changes permanently, you will need to send the new css values to your server and store them in a database or something.
EDIT: to save it on the database...
You can get the value from the textfield like so.
var cssVal = $('#textfieldid').val();
And then use the jQuery ajax function to send the new value to your server.
http://api.jquery.com/jQuery.ajax/
I'm not going to go into all of the details of this, you can find database tutorials everywhere online, but then you want to take the value of that textfield that you sent to your server using jQuery, and save it in your database table that stores the css rule properties.
Then when you regenerate the page, you will just retrieve the new css value from your database.