Function not declared when using btoa for a simple encryption site - javascript

I am trying to make a simple encryption site to fiddle with b64 a little more
<html>
<script language="javascript">
function encrypt() {
var texttoencrypt = document.getElementById("text").innerHTML;
var encrypted = btoa(texttoencrypt)
document.getElementById("text").innerHTML = encrypted;
}
</script>
<head></head>
<title>Base64 Encrypt</title>
<body>
<textarea id="text" rows="4" cols="50" autofocus placeholder="Put text here."></textarea>
<br>
<button onclick="encrypt()">Encrypt</button>
<button onclick="decrypt()">Decrypt</button>
</body>
</html>
The error it gives me is:
ReferenceError: encrypt is not defined
at HTMLButtonElement.onclick
when I click encrypt.

Put your script into a head section:
<html>
<head>
<script language="javascript">
function encrypt() {
var texttoencrypt = document.getElementById("text").value;
var encrypted = btoa(texttoencrypt);
document.getElementById("text").value = encrypted + ' - test';
}
function decrypt() {
// ...
}
</script>
</head>
<title>Base64 Encrypt</title>
<body>
<textarea id="text"
rows="4" cols="50"
autofocus placeholder="Put a text here">
</textarea>
<br>
<button onclick="encrypt()">Encrypt</button>
<button onclick="decrypt()">Decrypt</button>
</body>
</html>
Update: you need to use a value property document.getElementById("text").value when you want to get a text from <textarea></textarea>.

Related

Display html form values inside hyperlink in same page after submit using javaScript

This is a working script i found online
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
function showMessage(){
var message = document.getElementById("message").value;
display_message.innerHTML= message;
}
</script>
</head>
<body>
<form>
Enter message: <input type="text" id = "message">
<input type="button" onclick="showMessage()" value="submit" />
</form>
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
how can I show the output inside a hyperlink? i tried this but getting an error
</span>">Test
Not sure of the question, but here is how to put it in a link and show that it is in the link.
<body>
<body>
<form>
Enter message: <input type="text" id = "message">
<input type="button" onclick="showMessage()" value="submit" />
</form>
<p> Message is: <a id="display_message" href="https://google.com/"></span></a> </p>
<script>
function showMessage(){
const href = 'https://google.com/';
var message = document.getElementById("message").value;
display_message.innerHTML = href + message;
display_message.href = href + message
}
</script>
<script src="script.js"></script>
</body>

java script and web service- how can I know if service.useService works

I'm new to java script and html.
I have a web service running (I'm sure it is working).
I have this part in my html-
<html>
<body bgcolor="#E6E6FA">
<head>
<title>Blog Site</title>
<script language="JavaScript">
function InitializeService(){
alert("init");
try{
service.useService(http://localhost:7777/BlogServer.asmx?wsdl,"GetBlogServer");
} catch(e){alert(e.message);}
alert("done");
}
var mailAddress, title, body;
function CreateNewEntry(){
mailAddress = document.DemoForm.StringMAilAddress.value;
title = document.DemoForm.StringTitle.value;
body = document.DemoForm.StringBody.value; alert("send");
service.GetBlogServer.callService("enterNewInput", mailAddress, title, body);
}
function ShowServerAnswerToNewEntry(){
alert(event.result.value);
}
</script>
</head>
<body onload="InitializeService()" id="service"
style="behavior:url(webservice.htc)" onresult="ShowServerAnswerToNewEntry()">
<form name="NewInput">
Mail address :<br> <input type="text" name="StringMAilAddress"/> <br>
Title :<br> <input type="text" name="StringTitle"/><br>
Body: <p><textarea name="StringBody" cols="50" rows="10"></textarea></p>
<button onclick="CreateNewEntry()">Insert new post</button>
</form>
<p id="result"></p>
</body>
<
/html>
I can see that the service.useService(http://localhost:7777/BlogServer.asmx?wsdl,"GetBlogServer"); part is not working, but I don't know why.
any help?

Using two textareas (one input and one output) and JavaScript to make an alphabetizer

I am trying to create a simple alphabetizer using HTML's textarea and JavaScript. The user enters their words in the input textarea and when a button is pressed, the alphabetized list will show up on the output textarea. I can't seem figure out how to make it work. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" />
<title>Alphabetizier</title>
</head>
<body>
<h1>Meico's Alphabetizer</h1>
<button onclick="alphabetize()">Alphabetize!</button>
<textarea input="inputText" rows=5 cols=80 wrap=on></textarea>
<textarea output="outputText" rows=5 cols=80 wrap=on readonly></textarea>
<script>
var textarea = document.getElementById("input");
function alphabetize() {
textarea.value = textarea.value.split(" ").sort().join(" ")
}
</script>
</body>
</html>
Whenever I click on the alphabetize button, I get the message "TypeError: textarea is null". There is no output on where the output textarea.
You messed up your textareas' IDs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" />
<title>Alphabetizier</title>
</head>
<body>
<h1>Meico's Alphabetizer</h1>
<button onclick="alphabetize()">Alphabetize!</button>
<textarea id="inputText" rows=5 cols=80 wrap=on></textarea>
<textarea id="outputText" rows=5 cols=80 wrap=on readonly></textarea>
<script>
var textarea = document.getElementById("inputText");
var textarea2 = document.getElementById("outputText");
function alphabetize() {
textarea2.value = textarea.value.split(" ").sort().join(" ")
}
</script>
</body>
</html>

HTML get input from textarea and pass it to my Javascript function

I want to get user-input from text-area and pass it to my Javascript function with the following code but can't make it work. Could anybody help me with this?
<!DOCTYPE html>
<head>
<title>Testing</title>
<script type="text/javascript">
function MyFunc(UserCode.value) {
var syntax = esprima.parse(UserCode.value);
document.getElementById("demo").innerHTML = JSON.stringify(syntax);
}
</script>
<script src="esprima.js"></script>
<script src="parse.js"></script>
</head>
<body>
<label>Please enter your code:</label>
<br>
<textarea rows="4" cols="50" id="UserCode">
var answer = 6 * 7;
</textarea>
<br>
<button type="button" onclick="MyFunc(UserCode.value)">Convert</button>
<p id="demo">Result</p>
</body>
</html>
First of all, you are trying to access your textarea element incorrectly. You must use document.getElementById, like so:
<button type="button" onclick="MyFunc(document.getElementById('UserCode').value)">Convert</button>
Second, you are defining your function incorrectly. Your function should look something like this:
function MyFunc(text) {
var syntax = esprima.parse(text);
document.getElementById("demo").innerHTML = JSON.stringify(syntax);
}
UserCode is not defined in your code. Creating an element with an id does not make a javascript variable with that name magically. You've got to get a reference to the element the same way you do with the demo paragraph:
<!DOCTYPE html>
<head>
<title>Testing</title>
<script type="text/javascript">
function MyFunc(textAreaId) {
var value = document.getElementbyId(textAreaId).value;
var syntax = esprima.parse(value);
document.getElementById("demo").innerHTML = JSON.stringify(syntax);
}
</script>
<script src="esprima.js"></script>
<script src="parse.js"></script>
</head>
<body>
<label>Please enter your code:</label>
<br>
<textarea rows="4" cols="50" id="UserCode">
var answer = 6 * 7;
</textarea>
<br>
<button type="button" onclick="MyFunc('UserCode')">Convert</button>
<p id="demo">Result</p>
</body>
</html>
Example: http://jsfiddle.net/3ackg/
JS:
$("#convert").click(function() {
var code = $('#code').val();
//var code = esprima.parse(code);
var result = JSON.stringify(code);
$('#result').html(result);
});
HTML:
<textarea rows="4" cols="50" id="code">var answer = 6 * 7;</textarea>
<button type="button" id="convert">Convert</button>
<p id="result">Result</p>

Javascript array how do i do a function for each line in array

okay so here's my current script
<html>
<head>
<script type="text/javascript">
function textareaToArray(t){
return t.value.split(/[\n\r]+/);
}
function showArray(msg){
document.getElementById("message").innerHTML = msg.join("
");
}
</script>
</head>
<title>
Welcome To ....
</title>
<body>
<center>
<h1> WELCOME TO .... </h1></center>
</br>
</br>
</br>
<center>
<form>
<textarea rows="10" cols="60" name="alpha"></textarea>
<br>
<input type="button"
value="show array"
onclick="showArray(textareaToArray(this.form.alpha ))">
</form>
</center>
</br>
<center>
<textarea id="message" rows="6" cols="60" name="message"></textarea>
</center>
</body>
</html>
as you can see the javascript function basically just outputs the array into the second text area.
how can I invoke a function for each line in the array
e.g.
a function to use line in array post to php script as post data then echo the result back after this it does the same for the next line can any one help me on how I would post each line to a php script and echo the response back into the text area
I redid your entire example, also fixed some other small errors in your html.
<html><head><title>Welcome To ....</title>
<script type="text/javascript">
function textareaToArray(t){
return t.value.split(/[\n\r]+/);
}
function showArray(msg){
for(i = 0; i < msg.length; i++) {
// something per item
alert(msg[i]);
}
// the old code
document.getElementById("message").innerHTML = msg.join("
");
}
</script>
</head>
<body>
<h1> WELCOME TO .... </h1>
<form>
<textarea rows="10" cols="60" name="alpha"></textarea>
<br>
<input type="button" value="show array" onclick="showArray(textareaToArray(this.form.alpha ))">
</form>
<br>
<textarea id="message" rows="6" cols="60" name="message"></textarea>
</body></html>
Where the "alert" happens is where you could add code for each item in the array. Now for the warning, there is no input checking.. this code is brutally insecure and if you are allowing to pass things from a textarea, this is definitely a vector for XSS attacks.
Correct answer is:
for (var i = 0; i < array.length; i++)
alert(array[i])

Categories