I've currently got a genuinely bizarre issue.
Facebook uses the · symbol liberally. I'm trying to replace it with a regular hypen, but I've got a... strange error.
If I put "·" in my HTML document it displays as "·" on the page. If I put "·" in the document it displays as "·" on the page. If I put "·" in the document is displays as "·" on the page. If I put "·" in the document it displays as "·" on the page. I assume this continues happening.
I think this is the cause of my issue, but basically I'm wanting to be able to put "·" in a textbox and have Javascript change it to "-". For the sake of completeness here is my full code:
<html>
<body>
<div id="display"></div><br/>
<input type=textbox id="text_in"/>
<input type=submit onclick='replaceDots()'/>
<script>
function replaceDots() {
var text_in = document.getElementById("text_in").value;
document.getElementById("display").innerHTML = text_in.replace("·","-");
}
</script>
</body>
</html>
When I put in the · symbol is displays · in the output. Curiously though, if I set text_in in the function to be equal to '·' it displays a hyphen in the output. This is why I the · error is to blame, though honestly this has me stumped.
Any ideas?
You need to use the escaped value instead. Replace your line with this:
document.getElementById("display").innerHTML = text_in.replace("·","-");
Related
I have some text saved in my database in HTML format, This text was saved into datatbase from a email.
Sometimes emails have single or double opening inverted commas but no closing inverted commans.
Becuase of this other scripts on the page stop to work.
How can i prevent this html code which i am reading from database to not affect my page style or scripts.
You can consider my application to be simple email reading application.
Any email that i read from database even if it has improper/buggy html, i don't want it to break my code.
Please let me know how i can fix this issues
I am working on following
- Laravel
- Bootstrap
Always escape the data that you receive from the client or you will become a victim of XSS (Cross Site Scripting).
That said if you really want to do it then there are two ways so that the content of the email doesn't affect your code.
IFrame
Shadow DOM
Both of these have a separate context than the parent page so they will not interfere with your code unless the code inside them manually tries to access parent.
Following is the sample for both. Same on JSFiddle
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="iframeParent">
</div>
<div id="shadowParent">
</div>
<script>
var emailContent = "<h1>helloworld</h1>";
var iframeContainer = $("#iframeParent");
$('<iframe/>').appendTo(iframeContainer).on("load", function () {
$(this).contents().find("body").html(emailContent);//firefox
}).contents().find("body").html(emailContent);//chrome
var shadowContainer = $("#shadowParent");
alert(shadowDom);
var shadowDom = shadowContainer.get(0).createShadowRoot();
shadowDom.innerHTML = emailContent;
</script>
</body>
</html>
Note: Shadom DOM is probably not the best solution as it's not enabled by default on the firefox. See this link
I am using ghost blogging platform. I want javascript to be executed on a button click.
<button onclick='javascript:if(document.getElementById("id").value==""){alert("Please Enter ID");return;}var y=document.getElementById("id").value.split("\r").join("").split("\n");var z=new Array();for(var x=0;x<y.length;x++){if(y[x].length ==== 15){var s="";for(var i=0;i<3; i++){var f=0;for(var j=0;j<5;j++){var c=y[x].charAt(i*5+j);if(c>="A" && c<="Z")f+=1<<j;}s+="ABCDEFGHIJKLMNOPQRSTUVWXYZ012345".charAt(f);}z.push(y[x]+s);}else{alert("Error : "+y[x]+" has not a length of 15 characters"+y[x].length);return;}}document.getElementById("nid").value=z.join("\r\n");'>Convert</button>
when it is rendered the == is converted to <mark>tag.
Button code when rendered
<button onclick="javascript:if(document.getElementById('id').value<mark>''){alert('Please Enter ID');return;}var y=document.getElementById('id').value.split('\r').join(').split('\n');var z=new Array();for(var x=0;x<y.length;x++){if(y[x].length</mark>15){var s=';for(var i=0;i<3; i++){var f=0;for(var j=0;j<5;j++){var c=y[x].charAt(i*5+j);if(c>='A' && c<='Z')f+=1<<j;}s+='ABCDEFGHIJKLMNOPQRSTUVWXYZ012345'.charAt(f);}z.push(y[x]+s);}else{alert('Error : '+y[x]+' has not a length of 15 characters'+y[x].length);return;}}document.getElementById('nid').value=z.join('\r\n');">Convert</button>
I am unable to understand why this is happening. I tried pasting my code in other markdown editors and it works fine but only for my blog(using ghost) it is not rendered properly.
I ran into the same issue today.
They have an issue opened about this since 2015: https://github.com/TryGhost/Ghost/issues/5587 Turns out the formater only ignores <pre> tags but not <script> tags
The easiest workaround I've found is to add <pre> tags around your code:
<pre><script>
//javascript goes here
</script></pre>
Here is my coding.. What have I done wrong. I am on number 6 and it is not working Can someone please look at this and give me some help.?
Thanks
<html>
<head>
<title> My Homework </title>
</head>
<body>
<div style="width:400px; height:200px" id="firstdiv">
<br /> <br /><center>Well Hi there! <br/> Answer the prompt to see what happens next.</center>
</div>
<script type="text/javascript">
var moquestion = window.prompt("What is the capital of Missouri?","");
if (moquestion.length < 1) {
<div style="width:400px; height:200px" id="sorrydiv">
<br /> <br /> <h1><center>Sorry you don't feel like playing.<br />The capital of Missouri is Jefferson City</center></h1>
</div>
}
</script>
</body>
</html>
Below is the assignment
Create a webpage with all the basic HTML tags.
Inside the <body>, create a <div> tag with an element id.
Insert some text into the <div> tag.
Add your script below this <div> so that it will not attempt to run until the has loaded.
Use the window.prompt method to ask “What is the capital of Missouri?” Ensure that no default answer is displayed for the user.
Check to make sure the length property of the returned string is not less than 1. If it is empty, write something like the following into the <div> tag: “Sorry you don’t feel like playing. The capital of Missouri is Jefferson City.”
If the string is not empty, use the window.confirm method to ask the user: “Is that your final answer?”
If they confirm, write a string similar to the following into the tag: “The capital of Missouri is” + myanswer + “. So says you.”
If they cancel, ask the question again: “Well then what is the capital of Missouri?” This time, write the answer without error checking.
The main problem with your code is that you are using HTML-Code within your JavaScript code.
The <script type="text/javascript">-tag tells your browser: Execute the next block using your default JavaScript-Engine. But JavaScript Engines aren't able to render or even understand HTML Code.
Start creating a simple template:
<!DOCTYPE html>
<html>
<head>
<title>Homework No. 6</title>
</head>
<body>
<!-- place the script at the bottom to execute
AFTER the whole page has loaded. -->
<script type="text/javascript">
// create the DIV Tag and insert it
// Answers: question 2 & 3
// THIS IS WHERE THE HTML-ELEMENT KICKS INTO THE PAGE
var div= document.createElement("div");
div.innerHTML = "Lets play!";
div.id = "questionContainer";
// Insert the element into the body
document.body.appendChild(div);
var question = window.prompt("What is the capital of Missouri", "");
// check if the question is empty
if (question.length < 1 || typeof question === "undefined") {
div.innerHTML = "Sorry you don't feel like playing :(";
return;
}
// check if user is sure (and repeat the question if he's not.)
if (!window.confirm("Are you sure?"))
question = window.prompt("What is the capital of Missouri", "");
div.innerHTML = "The capital of Missouri is: " + question + " as you told me.";
</script>
<body>
</html>
This should solve the problem. Just remember: Do not mix JavaScript and HTML.
Also: Check out this jsFiddle to view it in action: http://jsfiddle.net/du4CH/
It doesn't mean write a new div tag, it means to change the contents of the tag you've already written, the one you called "firstdiv".
Point 6 is actually saying to "write it into the div tag". Assuming that it means the div that you created earlier you should be looking at locating the div on the document and then writing to its innerHTML. Something like
if (moquestion.length < 1) {
document.getElementById("firstdiv").innerHTML="Sorry you don't feel like playing";
}
should do the trick.
I want to add an input field the user can enter/modify an IP Address in the format 198.162.0.0/45 representing a range from 198.162.0.0 - 198.162.0.45
what I have almost works but its not allowing the complete correct format. If I enter any of the following it works fine.
198/45, 198.168, or 198.168.0.45
but as soon as I try to add
198.168.0/24 or 198.168.0.0/24
I wanted to be able to add 198.168.0.0/24 without having to breakup the fields but if I have to I can.
it gets a scripting error when my dynamic element is appended to the div tag containing the input fields.
basically my setup is this, empty div tag I will append the following to. The newIpRange comes in as a string such as 198.168.0.0/24
EDIT with test html that produces the issue
<html>
<head>
<title>Test IP</title>
<script type="text/javascript">
function onload(range){
var e = document.getElementById("_main");
e.innerHTML = getTag(range);
}
function getTag(range){
return "<div class='input-append' ><input type='text' value='" + range + "' ></input><div>";
}
</script>
</head>
<body onload="onload(198.168.1.0/24);">
<div id="_main" >
</div>
</body>
</html>
what would be causing this? of interest to me really is why does it give the error in some cases, not others
Here is the Error I'm getting from the script when I appent this line: SCRIPT1006: Expected ')'
After spending a little time with the sample I made I finally came to the realization, its how javascript is parsing the values.
in the case of 10.12/24 its evaluating it as a number with a division
as soon as I add the extra period in there it can no longer evaluate it as a number, to solve that putting it in a string literal cleans everything up!
to fix this I put the ipcallback into a pair of single quotes to tell javascript its a string
<script>
</head>
<body onload="onload('198.168.1.0/24');">
<div id="_main" >
i have a html of this format.
<html>
<head>
...
</head>
<body>
<label id='view' onClick="ShowMe()">show my name</label>
<img src="home.jpg" width="800px" height="600px"/>
<div id='name' style="display:none;height:200px">Your Name is DARSHAN</div>
</body>
</html>
and in javascript i have this function
ShowMe()
{
var nameDiv=Ext.get('name');
var viewDiv=Ext.get('view');
nameDiv.setStyle('display','block');
nameDiv.anchorTo(viewDiv,"tr-br?");
}
this thing works fine in all browsers but in IE,When i Click on 'Show My name' label,its displays the 'name' tag near the show my name but also a vertical space is taken up by 'name' Div tag and a scroll bar appears. How to get rid of it?
How can this work? There are lots of errors in this code:
There should be a semicolon in your style attribute value, not a comma:
<div id='name' style="display:none;height:200px">
There is a typo - display is called dispaly:
nameDiv.setStyle('display','block');
Also, what are the setStyle and anchorTo functions? What library are they from? Did you write it yourself? Please provide some more information.
EDIT: Thank you PPvG for adding tag extjs
Please provide snippets of the actual working/faulty code (copy and paste) instead of manually writing new code.
The inline style on are divided by a ","
That's invalid, CSS rules have to end with a semicolon ";"
IE is pretty picky when it comes to valid html/css
After discussing it with one of the experts at office i got to know this.
when you define Div at one place and anchorTo somewhere else this problem might come. how the anchor tag works is it will take the coordinates of the div to which we r anchoring and define the top and left of the new tag accordingly. So we need to make sure that we have defined 'poistion' attribute value to 'absolute'.
So to my problem solution was adding
<div id='name' style="display:none;height:200px;position:absolute">Your Name is DARSHAN</div>