Hi I am very new to Javascript. In the code below, when I test I don't see any output. Can anybody tell me what is wrong?
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
}
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
This should work! The problem was the orientatiom of { after the else.
A few things:
<id="score"> <input type="number" name= "score"> is probably not what you mean. Maybe you mean <input type="number" name="score" id="score">.
document.write is a no-no, please don't ever use it. It allows you to modify the document "here and now", i.e. while it's loading. Use document.body.innerHTML += x, for example.
var score = document.getElementByID('score').value
The bracket after the else clause
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>enter code here
<script>
function myFunction()
{
var x="";
var score=document.myscore.score.value;
if (score>30)
{
x="Expert";
}
else
{
x="Novice";
}
document.write(x);
}
</script>
</head>
<body>
<form name="myscore">
Score: <id="score"> <input type="number" name= "score">
<input type="submit" onClick="myFunction()" value="submit">
</form>
</body>
</html>
Change input type from submit to button else you wont be able to see the output, because the form will submit and reload the page.
Fix the syntax errors
<id="score">
Change } to { under else condition
Change document.write to alert or console.log
Try this:
<script>
function myFunction()
{
var x;
var score=document.getElementById("in_score").value;
if(score>30)
x="Expert";
else
x="Novice";
document.getElementById("score").value = x;
}
</script>
<body>
<form name="myscore">
Score: <input id="score" type="number" name= "score">
<input type="submit" id="in_score" onClick="myFunction()" value="submit">
</form>
</body>
</html>
So the main error in your code was the reverse bracket from the else statement. Also, to get/change values from an input, you need to use getElementById ( to select the element ), and .value statement, to change/get it.
Related
/* This code is for addition and im trying to get the number thats printed out to appear in orange not black */
<script type="text/javascript">
function addBy()
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
res=num1+num2;
document.formcalc.txtres.value=res;
}
document.getElementById("addBy").style.color = "#ff0000";
</script>
/* This is the html used in the code */
<!doctype html>
<html>
<head>
<title>Calculate</title>
</head>
<body>
<form name="formcalc">
Number 1: <input type="text" name="txtnum1">
<br>
Numbrer 2: <input type="text" name="txtnum2">
<br>
Answer : <input type="text" name="txtres" <br>
<input type="button" value="Add" onClick="addBy()">
</form>
</body>
</html>
So basically in the function im trying to get the number thats printed out to come out in red
Try this..
<script type="text/javascript">
function addBy()
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
res=num1+num2;
document.formcalc.txtres.value=res;
document.getElementById("txtres").style.color = "#ff0000";
}
</script>
try this.
function addBy()
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
res=num1+num2;
document.formcalc.txtres.value=res;
}
document.getElementById("txt_AddBy").style.color = "#ff0000";
<!doctype html>
<html>
<head>
<title>Calculate</title>
</head>
<body>
<form name="formcalc">
Number 1: <input type="text" name="txtnum1">
<br>
Numbrer 2: <input type="text" name="txtnum2">
<br>
Answer : <input id="txt_AddBy" type="text" name="txtres" disabled="disabled"/> <br>
<input type="button" value="Add" onClick="addBy()"/>
</form>
</body>
</html>
Here is the snipped handling the divide operation also.
function calc(type)
{
var num1, num1, res;
num1=Number(document.formcalc.txtnum1.value);
num2=Number(document.formcalc.txtnum2.value);
switch(type){
case 'add' : {
res=num1+num2;
document.formcalc.txtres.value=res;
document.getElementById("txt_AddBy").style.color = "#ff0000";
break;
}
case 'division' : {
res=num1/num2;
document.formcalc.txtres.value=res;
document.getElementById("txt_AddBy").style.color = "blue";
break;
}
}
}
<!doctype html>
<html>
<head>
<title>Calculate</title>
</head>
<body>
<form name="formcalc">
Number 1: <input type="text" name="txtnum1">
<br>
Numbrer 2: <input type="text" name="txtnum2">
<br>
Answer : <input id="txt_AddBy" type="text" name="txtres" disabled="disabled"/> <br>
<input type="button" value="Add" onClick="calc('add')"/>
<input type="button" value="Divide" onClick="calc('division')"/>
</form>
</body>
</html>
You forgot to give your 'Answer' input tag the id "addBy" (i.e id = "addBy") which you referenced in your JavaScript code. Also close the tag.
**UPDATED ANSWER:
Improved answer after coming back and looking at the question again.
First, your input tag needs to be closed:
<input type="text" name="txtres" id="answer" />
I have also given it an id of answer which will be used make a reference to it in the JavaScript code.
Second, in your JavaScript code, change the line that styles the input to:
document.getElementById("answer").style.color = "#ff0000";
To avoid confusion with the function named addBy, I changed the selector in the getElementById call to answer in quotes. This is why I gave the id attribute the value of "answer" earlier in the input element for the result.
I'm trying to make some code that sends a form that first makes sure if it is filled correctly. When I click on the "enviar formulario" button, it doesn't call the javascript code and does not do anything.
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length() < 2){
alert("Error");
return 1;
}
else if(!document.getElementById("edad").value.isInteger()){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
There is nothing like document.getElementById("nombre").length()
If you are trying to read the length of input text do this
document.getElementById("nombre").value.length
EDIT 1:
There is no method as isInteger(). So use parseInt() instead
This will be your working code
<html>
<head>
<script type="text/javascript">
function test() {
if(document.getElementById("nombre").value.length < 2){
alert("Error");
return 1;
}
else if(!parseInt(document.getElementById("edad").value)){
alert("Error");
return 1;
}
else if(!document.getElementById("email").value.includes("#")){
alert("Error");
return 1;
}
else{
document.getElementById("formulario").submit();
}
}
</script>
</head>
<body>
<form id="formulario"action = "https://postman-echo.com/get"
method = GET type=text>
Nombre: <input id="nombre" type="text"/>
<br><br>
Edad: <input id="edad" type="text"/>
<br><br>
E-mail: <input id="email" type="text"/>
</form>
<button onclick= "test()">Enviar formulario</button>
</body>
</html>
You're comparing the length of the whole input tag rather than the text in it.
if (document.getElementById("nombre").value.length < 2)
{
...
}
if (!document.getElementById("edad").value.isInteger())
{
...
}
and so on...
First, please check if your control is reaching the test method, use a debugger (I prefer chrome)
After that check your syntax in the console, while the code is at the breakpoint
You can share your findings here
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
function add1(){
var p= document.getElemenetById('p1').value;
var p1=0;
p1=p+1;
p=p1;
}
</script>
In the productsphp.php page
<?php
if(isset($_POST['p1'])){
$p1=$_POST['p1'];
echo "p1 is".$p1;
}
?>
It is not working.
I want everytime the button is clicked to go the add1() function and increment it.So I can know how many clicks the user has clicked.Then when pressing save to save the number of clicks in the hidden value and then take the value and save it in the database.But the value is still nothing.please help
Your function name has a typo (getElemenetById, extra e) and you never resend the value to the input field. Try:
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
function add1(){
var p= !parseInt(document.getElementById('p1').value) ? 0 : parseInt(document.getElementById('p1').value);
p++;
document.getElementById('p1').value = p;
}
</script>
You do not have to use another element at all, you could manipulate an attribute on your current element like data-clicks. It would look like this:
<button type="button" onclick="add1(this);" data-clicks="0">Add</button>
And the function will be:
function add1(element){
var currentClicks = element.getAttribute('data-clicks');
element.setAttribute('data-clicks', currentClicks + 1);
}
Reducing the DOM elements on your page improves performance, consider that.
Try this:
function add1(){
var p = document.getElementById('p1').value,
p1 = parseInt(p) + 1;
document.getElementById('p1').value = p1;
}
This way, you use the value of p1 after calculating it.
You should also need to set the initial value of p1:
<input type="hidden" id="p1" value="0" name="p1"/>
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="text" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function add1(){
var p= document.getElementById('p1');
if(p.value) {
p.value = parseInt(p.value) +1;
}else {
p.value = 1;
}
}
</script>
Here is a 1-liner :D
function add1(){
document.getElementById("p1").value = Number(document.getElementById("p1").value) + 1
}
Note: Your clicks count could be cheated easily with this way. use ajax with jquery instead
You could use simple javascript
<script type="text/javascript">
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
count++;
//alert(count);
document.getElementById('p1').value=count;
}
</script>
Or Jquery
<script>
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
$('#p1').val(++i);
});
</script>
Here is complete html file
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form action='productsphp.php' method='post'>
<button type="button" onclick="add1()">Add</button>
<input type="hidden" id="p1" value="" name="p1"/>
<input type="submit" value="Save" />
</form>
<script type="text/javascript">
//use one at a time. This is just a demonstration how to do this in both
//jquery and javascript
/* Javascript way of doing this -
var i=document.getElementById('p1').value;
i=(isNaN(i))?0:i;
function add1(){
i++;
document.getElementById('p1').value=i;
}
*/
/* JQuery way of doing this*/
var i=$('#p1').val();
i=(isNaN(i))?0:i;
$('button').click(function(){
$('#p1').val(++i);
});
</script>
</body>
</html>
I'm trying to input 2 parameters and output it an another TEXTBOX.
This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y){
var z=x+y
document.getElementById("Z").innerHTML = z;
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(parseInt(document.getElementById('X').value),parseInt(document.getElementById('Y').value))">Try it</button>
What is wrong here? I tried this to show the result as simple paragraph and I succeed, but I need to display it in a textbox.
Replace this:-
document.getElementById("Z").innerHTML = z;
with
document.getElementById("Z").value = z;
An <input> element uses value and not innerHTML:
document.getElementById("Z").value = z;
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();"