alert message does not appear - javascript

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var x=document.f1.tt1.value;
alert(x);
</script>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
</html>
*the alert message does not appear , what is the problem?
thanks for your help :) :)
*

In addition to other answers your document may not be ready.
In your script tag have:
$(document).ready(function(){
var x = document.f1.tt.value;
})
A nicer way might be to give your input an id.
<input type="text" name="tt" id="myInput" value="jawadi" />
$(document).ready(function(){
var x = $("#myInput").val();
})

The problem with your script is you are trying to get the value of element which has not been created in the DOM yet. So you are getting the null value because it does not exist. One thing you can do is include the script at the bottom of the page so that it gets the value
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
<script type="text/javascript">
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
</script>
</html>
Second thing that you can try if you are comfortable with jquery is use .ready function, so it will get the value after page load.
$(document).ready(function(){
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
});

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
<script type="text/javascript">
var x=document.f1.tt.value;
alert(x);
</script>
</body>
</html>
because javacript not found f1 try this

Replace
var x=document.f1.tt1.value;
with
var x=document.f1.tt.value;

Modified code: DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alertX(){
var x=document.f1.tt.value;
alert(x);
}
</script>
</head>
<body onload='alertX();'><!-- call alertX on body load-->
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</body>
</html>

Related

TypeError when calling document.getElementById

the following code should display the word Test...but instead the message TypeError: document.getElementById(...) is displayed.
I can't figure out why:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
<body>
<div id="kaptree"></div>
</body>
</html>
Can anyone help me to open my eyes?
You're trying to access the kaptree element before it's loaded. Run your script after loading the DOM.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
<script>
document.getElementById("kaptree").innerHTML = "TEST";
</script>
</body>
</html>
You should place your scripts after your html elements.
The element with the id "kaptree" is not available at this place. Move the script block below the body and it works.
Otherwise you have to wait for the document-ready state.
If you move the body section with the DIV setup to the top it works.
It runs sequentially so it can't assign the inner.html before the DIV is defined
Because your JS code is called before HTML.
Solution 1: Add JS right before </body> tag
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
</body>
<script>
document.getElementById("kaptree").innerHTML+="TEST";
</script>
</html>
Solution 2: Execute JS code inside window.load function
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
window.onload = (function(){
document.getElementById("kaptree").innerHTML+="TEST";
});
</script>
</head>
<body>
<div id="kaptree"></div>
</body>
</html>
Your script is defined before the element that you try to reference.
Move it after :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
</body>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
</html>
Or more readable and maintainable solution, use a function :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
function changeValue(){
document.getElementById('kaptree').innerHTML='TEST';
}
</script>
</head>
<body>
<div id="kaptree"></div>
<script>changeValue()</script>
</body>
</html>
A. Put the script inside head or body.
B. Either put the script after #kaptree, or add a document ready statement. You try to call something that isn't there yet.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("kaptree").innerHTML="TEST";
}, false);
</script>
</head>
<body>
<div id="kaptree"></div>
</body>
</html>
Sometimes the solution is so simple.
I will put the function call into a:
$( document ).ready(function() {
});

Alternative to anchor URL

Is there an other way to link to an element on the same page without using anchor URLs?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
</head>
<body>
<input type="button" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
There is! Look at the code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
<script type="text/javascript">
function scrollWindow() {
{
var top = document.getElementById('goHere').offsetTop;
window.scrollTo(0, top);
}
}
scrollWindow();
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
With jQuery:
$("button").click(function(){
window.scrollTo($("#goHere").offset().top);
});

How can i change background of the site on the click of the mouse in html5?

i would like to add some buttons on my site and change the background when i click them.
<html>
<head>
<SCRIPT LANGUAGE "JavaScript">
function cambiaSfondo(code){
document.sfonfo=code
}
</SCRIPT>
</head>
<body>
<FORM>
<input type = "button" name="button1" value="sfondo1" onClick='idk what to put here'>
</FORM>
</body>
</html>
sfondo is not a valid property
function cambiaSfondo(img){
document.body.style.backgroundImage = 'url(' + img + ')';
}
<input type = "button" name="button1" value="sfondo1" onClick="cambiaSfondo('/path/to/img')">
http://www.w3schools.com/jsref/prop_style_backgroundimage.asp
Working code here :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script tpye="text/javascript">
// $(document).ready(function() {
function cambiaSfondo(img) {
$('body').css('background-image', 'url('+img+')');
}
//});
</script>
</head>
<body>
<FORM> <input type = "button" name="button1" value="sfondo1" onClick="cambiaSfondo('search-icon-2x.png');"> </FORM>
</body>
</html>
First of all you don't have to use form because you are not getting or posting anything to server!
<html>
<head>
<script type="text/javascript">
function changeColor(){
document.body.style.background="#000000";
}
</script >
</head>
<body>
<button type="button" onclick="changeColor()">Change Color</button>
</body>
</html>
You can change any background property : http://www.w3schools.com/jsref/prop_style_background.asp
This is your exact case : Example

Phonegap javascript alerts not working?

I am very new to phonegap as well as javascript and I'm trying to make a simple Contact Adder application but for some reason nothing happens when I try to add a contact. No alerts even appear. By the way, I am using an android emulator within eclipse to test my application. Can someone tell me what I am doing wrong? Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Add Contacts</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady()
{
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
<body onload = "deviceIsReady()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
This code working for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="jquery.mobile-1.3.2.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script src="jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
</script>
<script src="jquery.mobile-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<title>Add Contacts</title>
<script>
function loaded(){
document.addEventListener("deviceready", deviceIsReady, false);
}
function deviceIsReady()
{
document.getElementById("save").addEventListener("click", addContact, false);
alert("READY!");
}
function addContact()
{
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
</head>
<body onload = "loaded()">
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
I tried in eclipse with android sdk, and I get the alerts on the emulator and after I add a new contact I sow it on the contacts. Before you try this code watch out for the script and style link. (rewrite it, or download the newest)
Your script tag is in-between the head and body tags. Try moving it into the body tag.
Your window load event also probably won't work. Just remove it, and simply attach the device ready event, so your script looks like this:
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady() {
document.getElementById("save").addEventListener("click",addContact, false);
alert("READY!");
}
function addContact() {
var fullName = document.getElementById("first").value+ " " + document.getElementById("last").value;
var theContact = navigator.contacts.create({"displayName" : fullName});
theContact.save();
alert("ADDED!");
}
</script>
just remove the
<body onload = "deviceIsReady()">
and make a simple
<body>
you also need to put your
<script>
in head or body, but not between them!
you need to catch the event ondevice ready, but not on bodylaod. so try this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
document.addEventListener("deviceready",deviceIsReady, false);
function deviceIsReady(){
alert("READY!");
}
</script>
</head>
<body>
<h1>Hello World</h1>
<form>
<label for="first">First</label><br>
<input type="text" id="first"/><br>
<label for="last">Last</label><br>
<input type="text" id="last"/><br>
<input type="button" value="Save Contact" id ="save"/>
</form>
</body>
</html>
it should works (for me, it works!). if not, check the manifest, maybe you do something wrong with it

align tooltipdialog top

i am using following code using dojo to have tooltipdialog ,, by using this code the dialog box is visible below the textbox , but i want to see on above to textbox ..
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="JavaScript" src="dojo/dojoroot/dojo/dojo.js" type="text/javascript">
</script>
<script language="JavaScript" src="dojo/dojoroot/dijit/TooltipDialog.js" type="text/javascript" >
</script>
<link rel="stylesheet" href="dojo/dojoroot/dijit/themes/claro/claro.css" />
<script>
dojo.require("dijit.TooltipDialog");
dojo.ready(function(){
var myTooltipDialog = new dijit.TooltipDialog({
id: 'myTooltipDialog',
style: "width: 100px;",
content: "<p>Nitin.",
onMouseLeave: function(){
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function(){ dijit.popup.open({popup: myTooltipDialog, around: dojo.byId('thenode')}) ;});
});
</script>
</head>
<body class="claro">
<br/>
<br/>
<input type="text" id="thenode"/>
</body>
</html>
please give me some solution ..
specify 'orient' property in dijit.popup.open function's argument object.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="./dojo-release-1.7.3-src/dojo/dojo.js"></script>
<link rel="stylesheet" href="./dojo-release-1.7.3-src/dijit/themes/claro/claro.css" />
<script>
require([ "dojo/ready", "dijit/TooltipDialog" ], function(ready, TooltopDialog) {
ready(function(){
var myTooltipDialog = new TooltopDialog({
id : 'myTooltipDialog',
style : "width: 100px;",
content : "<p>Nitin.</p>",
onMouseLeave : function() {
dijit.popup.close(myTooltipDialog);
}
});
dojo.connect(dojo.byId('thenode'), 'onmousedown', function() {
dijit.popup.open({
popup : myTooltipDialog,
around : dojo.byId('thenode'),
orient: ['above']
});
});
});
});
</script>
</head>
<body class="claro">
<br />
<br />
<br />
<br />
<input type="text" id="thenode" />
<br />
<br />
<br />
<br />
</body>
</html>
dojo/dijit/popup.js:252 in Dojo 1.7.3 release.
orient = args.orient || ["below", "below-alt", "above", "above-alt"],

Categories

Resources