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;
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 have been working on this from hours and still coudn't figure it out. this is really frustrating this simple code is also not working now.
<html>
<head>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<input type="submit" >
</form>
</body>
</html>
help please or I will need psychiatrist now
The problem with your code is you are having the name field of the input tag same as the function name. Change your name tag with anything else and it should work.
Checkout this code.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="file" name="ppasd" id="pip" onchange="pp()">
</form>
<script type="text/javascript">
function pp() {
alert('hi')
}
</script>
</body>
</html>
I hope this code work for you.
<html>
<body>
<script language="JavaScript" type="text/javascript">
function inform(){
var filename = document.getElementById('myFile').value;
alert(filename);
}
</script>
<form name="form1">
Please choose a file.
<input type="file" name="uploadbox" size="35" onChange='inform()' id="myFile">
</form>
</body>
</html>
If this code work as you want please comment here it work or not. Happy Coding :)
It seems there is some kind of reference problem with pp. Use the following code and it should work
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="callback()" type="file" id="pp" >
<input type="submit" >
</form>
<script language='javascript'>
function callback(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
P.S It is a good practice to add javascript code at the end of the html.
P.S 2 it will still get an error because there is no element with id ppimg
I hope it helps
that's not working ?
that's because you use function after put element
so do this instead :
<html>
<head>
</head>
<body>
<form method="post">
<input onchange="pp()" type="file" name="pp" >
<img id="ppimg"/>
<input type="submit" >
</form>
<script language='javascript'>
function pp(){
document.getElementById("ppimg").src = document.getElementById("pp").value;
alert('burah');
}
</script>
</body>
</html>
and if it's hard !
you can change pp() to pp;
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 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>
I'm trying to set up an html web page that depends on the user entering a certain word in one text box to make another text box display a different word. Ultimately the use of this feature will become more complex but for now I just want to make that simple routine work. I've written code but it doesn't seem to follow the logic. When I click on the button no matter what is in text1 both text1 and text2 show "Dog" and "Cat" respectively. Here's my code that isn't working:
enter code here
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function myFunction() {
if (Text1.value = "Dog")
{
Text2.value = "Cat";
}
else
{
Text2.value = "Mouse";
}
}
</script>
<br><br><br><br>
<font size=6 face=arial color=#336699>
<b>TestRoutine</b>
<br><br>
</font>
<input id="Button1" type="button" value="button" onclick="myFunction()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
</body>
</html>
You never define Text1. You want var Text1 = document.getElementById('Text1');
= is an assignment. You need to use === for a comparison (or == for a comparison with type coercion)
You need to replace Text1.value and Text2.value with:
document.getElementById("Text1").value
and
document.getElementById("Text2").value
respectively.
Also, when making comparisons in your if statement, you should you === instead of = to actually compare the values.
Edit: You should actually use === instead of ==.
I fixed it thanks to the suggestions and tried not to fix the parts that i do not like.
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function myFunction() {
if (document.getElementById("Text1").value === "Dog")
{
document.getElementById("Text2").value = "Cat";
}
else
{
document.getElementById("Text2").value = "Mouse";;
}
}
</script>
<br><br><br><br>
<font size=6 face=arial color=#336699>
<b>TestRoutine</b>
<br><br>
</font>
<input id="Button1" type="button" value="button" onclick="myFunction()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
</body>
</html>