Add IpRange value to input dynamically - javascript

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" >

Related

How to take a variable from a function in a javascript file, and display it with html in a seperate file

I'm pretty sure this is a very basic question, yet dispite looking through the internet I cannot understand how to do it. Please note that today is my first time ever using javascript and I have very little idea in what I am doing.
Anyway, I have a HTML file and a Javascript file. The javascript file's purpose is to generate a random interger between 1 and 10. I have achieved this with a function which I will display with the rest of my code below. The idea is that with a button press, the function will activate and put it into a "div" tag. Then, the output should display underneath. The problem is I'm recieving no output. Here's a few chunks of my HTML code:
<head>
<script src="japanese.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="japanese.css">
</head>
<button onclick="random()">Random integer</button>
<br>
<div id="result"> </div>
And also my javascript code, in a seperate file:
function random() {
var integer = (Math.floor(Math.random() * (10))) + 1;
document.getElementById('result').value = integer;
}
Please just give me a straight up answer rather then redirecting me to a link.
Thank you for your time.
You missed out the closing bracket ) right before +. And also to display the result in div, you should set the value in innerText or innerHTML property, value property is for inputs.
function random() {
var integer = (Math.floor(Math.random() * (10))) + 1;
document.getElementById('result').innerText = integer;
}
<button onclick="random()">Random integer</button>
<br>
<div id="result"> </div>

Replacing the · symbol

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("·","-");

HTML input into Javascript

I want to create a website which can tell the circumference of a circle when the user inputs the radius. I've done the code, but its not working. Can you tell me why?
<html>
<head>
</head>
<body>
<form id="ty">
Give radius: <input type="number" input id="radius">
</form>
<p id="sum"> htht </p>
<button type="button" onclick="my()"> Click on me</button>
<script>
Function my() {
var r= document.getElementById("radius");
var a= r*2;
document.getElementById("sum").innerHTML=a;
}
</script>
</body>
</html>
I am getting an error "NaN" when I click on the button
Working HTML demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Language" content="en">
<meta charset="UTF-8">
<title>Radius to Circumference</title>
</head>
<body>
<form name="ty">
<ol>
<li>Give radius: <input type="number" name="radius"></input></li>
<li><input type="button" onClick="my();" value="convert"></input></li>
<li>Get circumference: <input type="number" name="sum"></input></li>
</ol>
</form>
<script LANGUAGE="Javascript">
function my() {
var r = document.ty.radius.value*1;
var a = r*2;
document.ty.sum.value = a;
}
</script>
</body>
</html>
when writing HTML, you should be certain to use proper semantics.
Specify a doctype, character set and language!
avoid using buttons that say things like "Click on me!" This is
redundant because the user has to read what they're going to do
before they do it. Instead, write what the button will do
on the button itself (in this case, "Convert" is what I used).
you did not include a title in your head.
and are two different elements with different
purposes. In this case, you want .
"function" should not be capitalized.
your r variable did not contain the number the user put in, but
rather, contained all the properties of the input element. You never
specified you wanted the number it contained, so instead, the
variable r contained all the information it could obtain about the
"radius" element including it's colour, it's size, and other useless
things you don't need. You are looking for it's value, hence why I
added .value on the end of that line.
I also added *1 to the end of r's line, so that if the user by
any chance did not enter a valid number, Javascript will correct that
issue (multiplying by one gives the same result but parsed into a number).
you were using the p element for the sum, but that wouldn't be a
paragraph now, would it?
I used an ordered list to add 1, 2, and 3 to the beginning of each
step.
I think you mean:
var r = document.getElementById("radius").value;
getElementByID returns the element, not its value. element*2 = NaN.
You want.
var r = document.getElementById("radius").value;
Also, you might want to parse the integer just in case:
var r = parseInt(document.getElementById("radius").value);
Very simple, from HERE you can find you need to change:
var r= document.getElementById("radius");
to
var r= document.getElementById("radius").value;
You have written whith uppercase F the function, note that the
javascript is case sensitive.
the value of the input element can get using the .value property.
in the input form element does not need twice using the input
keyword, only once on begin.
Here is a nicer way to write that, with some minor improvements.
it's preferred to write the javascript in the head.
by defining the various elements onload later you have faster&easier access to them.
also inline javascript is not suggested, don't write js inside html attributes.
Then talking about your errors:
function is not Function
document.getElementById('radius') should be document.getElementById('radius').value
<html>
<head>
<script>
var radiusBox,sumBox,button;
function my(){
sumBox.innerHTML=radiusBox.value*2
// the use of textContent is more appropiate but works only on newer browsers
}
window.onload=function(){
radiusBox=document.getElementById('radius');
sumBox=document.getElementById('sum');
button=document.getElementById('button');
button.onclick=my
}
</script>
</head>
<body>
<form id="ty">
Give radius:<input type="number" id="radius">
</form>
<p id="sum">Enter a number</p>
<button id="button">Click on me</button>
</body>
</html>
writing it this way it is compatible with every browser that supports javascript, a newer proper way would be using addEventListener to add the load and the click handler thus also allowing you to add multiple event handlers, but old ie's wouldn'ty work.also textContent could have prblems...
DEMO
http://jsfiddle.net/frma0zup/
if you have any questions just ask.

After call to setAnchor(), div element still takes up space (IE only)

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>

JavaScript encryption

the script has to search a string inside the webpage. but that script should not display what string that it is searching. I mean the search string should be in encrypted format or any other format.
but without that search string the webpage should not be displayed or it should display an error on page.
I am going to develop a plugin. If anybody using that plugin in their webpage they must and should place my name or my website name in that page.
is it possible, if so how to encrypt my text (srikanth) inside the script and how to search that string inside the page.
how many possibilities are there to place my name in a webpage with javascript or jquery but it should not visible as it is when anybody check it in source code
There is no way of hiding your name. If the browser can see it, then so can any user.
You can encrypt your name anyway you like. But of course it needs to be decrypted client-side to actually do the search. So anyone with a javascript debugger could uncover your name in moments.
Or slightly more obscurity you could hash your name server-side, in javascript hash the page contents, and then do your search. Given a decent hash the chance of collisions will be small. However, with a debugger you could still figure out the search string no problem. And to be honest this just sounds absurd.
Whatever you're trying to achieve needs to be re-thought.
Anyone can view Javascript source code, therefore it's not really possible to encrypt something using Javascript in a way that is secure. You can obfuscate it, often in horrible ways, but it's always possible to reverse.
If you can, do anything requiring a modicum of security on the server.
As you cant really encrypt a piece of text you can obfuscate the search and do a check.
<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html>
<head>
<!-- some simple styling so the div element does not appear,
you could equally use a hidden form field and not require the styling -->
<style>#h3llo{display:none;}</style>
</head>
<body>
<div>Hello Some simple text
<form action="#" method="post" onSubmit="dosearch();return false;">
<input type="text" id="searchfield" />
<input type="button" name="submit" value="search" onClick="dosearch();return false;" />
</form>
</div>
<div id="h3llo"></div>
<script>
function d2h(d) {return d.toString(16);}
function h2d(h) {return parseInt(h,16);}
// converts the input string into hex vals
function Str2Hex(inputvars) {
var tmp = inputvars;
var str = '';
for (var i=0; i<tmp.length; i++) {
c = tmp.charCodeAt(i);
str += '\\x' + d2h(c);
}
return str;
}
// converts the input field h3llo back to a string
function Hex2Str() {
var tmp = document.getElementById('h3llo').innerHTML;
var arr = tmp.split('\x');
var str = '';
for (var i=1; i<arr.length; i++) {
c = String.fromCharCode(h2d(arr[i]));
str += c;
}
return str.trim();
}
// fills the h3llo field with the encoded string
function populate(inputvars){document.getElementById('h3llo').innerHTML = Str2Hex(inputvars);}
// checks that the submitted search string matches the encoded string
function check(inputval){if(Hex2Str().toString() != inputval.toString()){ alert("Warning: '" + Hex2Str().toString() + "' != '" + inputval.toString() + "'");}else{alert("success");}}
// the action that fills the hidden field and checks the encoded value is the same
function dosearch(){var sval = String(document.getElementById('searchfield').value);populate(sval); check(sval);}
</script>
</body>
</html>
If someone viewed the source they wouldn't at first glance be able to see the search string, though as it has mentioned before this would be easy to reverse it would obfuscate from the casual viewer. Also If the encoded data was hidden by css as in this example or a hidden form field it would never appear on the page or source un-encoded.
I am developing a library to simplify my daily tasks, and one of which is encryption.
I am using caesar encryption for element encryptions.
you may download the minified file and include it in your html.
The usage is like:
<!DOCTYPE HTML>
<html>
<head>
<title>
Element Encryption
</title>
<script type="text/javascript" src="https://raw.githubusercontent.com/Amin-Matola/domjs/master/dom-v1.0.0/dom.min.js"></script>
</head>
<body>
<h1>Let's encrypt the element data</h1>
<p>You may encrypt this paragraph data</p>
<p>This is another paragraph you may encrypt too</p>
<footer>
<!--------- You may include your js here ------------->
<script type="text/javascript">
d("p").encrypt(text = "", depth = 10);
</script>
</footer>
</body>
</html>

Categories