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>
Related
I am trying to create a calculator that solves the Pythagoras theorem. I have created a function inside a tag in my code which takes two arguments (one for each leg length of the right-angled triangle) The function works if I just do a console.log with two numbers as arguments and the function executes properly if it is inside the script tag. But I just want to know how to take the two arguments in the text boxes and then when I press the button make the result appear on the screen.
<html>
<main>
<head>
<!--Textboxes to input lengths of legs-->
<input type = "text" required placeholder= "1st legnth">
<br> <br>
<input type = "text" required placeholder= "2nd legnth">
<br> <br>
<button type = "submit">Give me the answer.
</head>
</main>
</html>
<script>
function solveforHyp (a, b)
{
var c = a*a + b*b;
return Math.sqrt(c);
}
var final = (solveforHyp(3, 4));
console.log(final);
</script>
add a span after the button to contain the final result:
<span id="final-result"></span>
add an onclick event to your button, it might look like this:
<button type="button" onclick="onButtonSubmit()"></button>
you might also give some relevant ID's to the input like this:
<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">
and finally, write the onButtonSubmit function to access the inputs and call the solveforHyp function :
function onButtonSubmit(){
const firstValue = document.getElementById('first-length').value;
const secondValue = document.getElementById('second-length').value;
document.getElementById('final-result').innerText = solveforHyp(firstValue,secondValue); // finally, put the returned value in the created span.
}
First of all your document structure is entirely wrong, a lot of tags are not closed script is after the HTML tag, and content is written inside head tag and head is inside main, NO doctype declaration is done, and most importantly if you wanna submit something you should have a form at least with preventing its default behavior. Learn HTML before JavaScript Brother, and also its a good practice to use input type Number when you already know the input will be always a Number.
and here is the code what you are trying to make
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form id="formOne">
<input type="number" required placeholder="1st legnth" id="first">
<br> <br>
<input type="number" required placeholder="2nd legnth" id="second">
<br> <br>
<button type="submit">Give me the answer</button>
</form>
</body>
<script>
let form = document.querySelector("#formOne");
let inputOne = document.querySelector("#first");
let inputTwo = document.querySelector("#second");
form.addEventListener("submit", function(e){
e.preventDefault();
console.log(Math.sqrt(Math.pow(inputOne.value,2) + Math.pow(inputTwo.value,2)));
})
</script>
</html>
Js file function to be called
function tryMe(arg) {
document.write(arg);
}
HTML FILE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='object.js'> </script>
<title>abc</title><meta charset="utf-8"/>
</head>
<body>
<script>
tryMe('This is me vishal bhasin signing in');
</script>
</body>
</html>
You can try like this:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="form">
<input type="text" id="first_length" name="first_length" />
<input type="text" id="second_length" name="second_length" />
<input type="submit" value="Submit" />
</form>
<script>
function logSubmit(event) {
event.preventDefault();
var first_length = document.getElementById("first_length").value;
var second_length = document.getElementById("second_length").value;
var final = solveforHyp(first_length, second_length);
console.log(final);
}
const form = document.getElementById("form");
form.addEventListener("submit", logSubmit);
function solveforHyp(a, b) {
var c = a * a + b * b;
return Math.sqrt(c);
}
</script>
</body>
</html>
I'm just starting to learn Javascript and following a tutorial. I've copied this code verbatim but it's just not doing what it's supposed to be doing. The video is from 2015 so maybe something about the language has changed? I have no idea, any help will be appreciated, thanks
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function substitute() {
var myValue = document.getElementById('myTextBox').value;
if (myValue.length === 0) {
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
title.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute();" />
</body>
</html>
make it,
<input type="text" id="myTextBox">
<input type="submit" value="Click Me" onclick="substitute();">
You created a function substitute but trying to call substitut.
Variable title hasn't been defined.
You should change it to this:
myTitle.innerHTML = myValue;
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>.
I am making this program where the value in the text-box will be alerted. I know this is hardly anything, but already something isn't working. I checked the developer tools console panel and it didn't show any errors.
<!DOCYTPE html>
<html>
<head>
<script type="text/javascript">
var submit = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submit()">Submit</button>
</form>
</body>
</html>
<html>
<head>
<script type="text/javascript">
var submit1 = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submit1()">Submit</button>
</form>
</body>
</html>
That is because there's already be a function named submit(). Change it to submit1() or any other name . It'll work
submit() is a predefined method in JavaScript that is used to submit the form.
So you can't use it like that. You need to change the function name to something else.
<!DOCYTPE html>
<html>
<head>
<script type="text/javascript">
var submitForm = function() {
var name = document.getElementById('name').value;
alert(name);
}
</script>
</head>
<body>
<form>
<input type="text" id='name'>
<button type="button" onclick="submitForm()">Submit</button>
</form>
</body>
</html>
var test= function() {
var name = document.getElementById('name').value;
alert(name);
}
<input type="text" id='name'>
<button type="button" onclick="test()">Submit</button>
I'm trying to make a form where you input a number to a textbox and based upon that a text response is put in a textbox.
This is an example of what I have been trying to make work:
<html>
<head>
<script type="text/javascript">
function calculate()
{
var ph = document.test.ph.value;
if (ph > 7.45) {
var str = "Alkalosis";
}
else if (ph < 7.35) {
var str = "Acidosis";
}
else {
var str = "Normal";
}
document.test.acidalk.value = str;
}
</script>
</head>
<body>
<form name="test">
pH<input type="textbox" name="ph"><br>
<input type="submit" value="Calculate"><br>
<input type="textbox" id="acidalk" >
</form>
</body>
</html>
The idea of what I'm trying to achieve is if a number higher than 7.45 is put in the first text box, the button clicked, then the word "Alkalosis" is put in the second text box, but if the number is less than 7.35, the word is "Acidosis" instead.
Any help would be greatly appreciated
Well, you're most of the way there. Instead of having the button be a submit button, try
<input type="button" onclick="calculate();" value="Calculate" />
Base of your code This will be a way to do it:
<html>
<head>
<script type="text/javascript">
function calculate(){
var ph = document.getElementById('ph').value;
if(ph > 7.45){
var str="Alkalosis";
}else if(ph < 7.35){
var str="Acidosis";
} else{
var str="Normal";
}
document.getElementById('acidalk').value =str;
}
</script>
</head>
<body>
pH<input type="textbox" name="ph"><br>
<button onclick="calculate()">Calculate</button>
<input type="textbox" id="acidalk" >
</body>
</html>
hope helps!
You have the form, you have the function, you just need a way to tie them together. Do it by assigning calculate() as an event handler for the form's submit event. Make sure to return false else the form will be submitted and the result of calculate() will not be seen.
<form name="test" onsubmit="calculate(); return false">
jsfiddle.net/UhJG2
Binding to the form's submit event rather than button's click event has the added benefit of calling the function when enter is pressed. It also ensures the form is not ever accidentally submitted.
With jQuery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>pH
<input type="textbox" name="ph" id="ph">
<br>
<button id="calculate">Calculate Acid Level</button>
<br />
<input type="textbox" id="acidalk" value="" />
</body>
<script type="text/javascript">
$("#calculate").click(function () {
var ph = $("#ph").val();
if (ph > 7.45) str = "Alkalosis";
else if (ph < 7.35) var str = "Acidosis";
else var str = "Normal";
$("#acidalk").val(str);
});
</script>
</html>