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>
Related
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;
This is really strange. I am trying to get the value of a text field by id but what I am seeing in console is an empty string. Below is my complete code. All scripts are included correctly.
<html>
<head>
<meta charset="UTF-8">
<title>Awok- Scrapper</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="form">
<form>
<input type="text" name="query" id="test"/>
<input type="button" id="send" value="Submit" />
</form>
</div>
<div id="result">
</div>
<script>
$(function () {
var query = document.getElementById('test').value;
$('#send').click(function () {
console.info(query);
});
});
</script>
</body>
Since you use jQuery you can use it like this:
$('#send').click(function () {
var query = $('#test').val();
console.log(query);
});
$('#send').click(function () {
var query = $('#test').val();
console.info(query);
});
You tried to get value of query which has modified at the time of page load.
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 modify the innerHTML of a particular div, but I cannot get to erase the content of that div. I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function reset() {
document.getElementById("results").innerHTML = "";
}
function check () {
document.getElementById("results").innerHTML = "foo";
}
</script>
<form name="form1">
<input type="button" value="Check" onclick="check();">
<input type="button" value="Reset" onclick="reset();">
</form>
<div id="results"></div>
</body>
</html>
Can anyone point out where I'm doing it wrong?
Thanks in advance.
That's because there's already a reset function in the form and this function is called instead of your own. Change that name and it will work.
<script type="text/javascript">
function r2() {
document.getElementById("results").innerHTML = "";
}
function check () {
document.getElementById("results").innerHTML = "foo";
}
</script>
<form name="form1">
<input type="button" value="Check" onclick="check();">
<input type="button" value="Reset" onclick="r2();">
</form>
<div id="results"></div>
Demonstration
This kind of problem is one more reason to avoid inline function calls. A preferred way would be
<form name="form1">
<input type="button" value="Check" id=check>
<input type="button" value="Reset" id=reset>
</form>
<div id="results"></div>
<script type="text/javascript">
document.getElementById("reset").onclick = function() {
document.getElementById("results").innerHTML = "";
}
document.getElementById("check").onclick = function(){
document.getElementById("results").innerHTML = "foo";
}
</script>
Give
onclick="window.reset();"
I'm new to Javascript. Can I show direct data from an HTML form on the same page. My code is here:
<html>
<head>
<title></title>
</head>
<script>
document.getElementById("btn").onclick = avc;
function avc(){
var a = document.getElementsByName("firstname").value;
document.getElementsByName("abc").innerHTML = a;
}
</script>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname"><br>
<input id="btn" type="submit">
</form>
<div name="abc"></div>
</body>
</html>
Using the ID for the element would also work when getting the value.
var a = document.getElementById('fname').value;
Yes you can with
<script>
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
</script>
at the end
if you want that every time you write something in text box changes the value in div abc try this:
<html>
<head></head>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname" onKeyUp="f()"><br>
<input id="btn" type="submit">
</form>
<div id="abc"></div>
<script>
function f() {
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
}
f(document.getElementById('fname').value);
</script>
</body>
</html>
Yes, but you need to subscript the correct element like so...
var a = document.getElementsByName("firstname")[0].value;