I am taking my first JavaScript class. The first two exercises I did worked great. This one however is not. Nothing all all shows up in the browser. It is just a white page. Any suggestions would be greatly appreciated.
<!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">
<body>
<script type="text/javascript">
var degFahren = Number(prompt("Enter the degrees Fahrenheit",32));
var degCent;
degCent = 5/9 * (degFahren - 32));
document.write(degFahren + "\xB0 Fahrenheit is " + degCent + "\xB0 centigrade<br />";
if (degCet < 0) { document.write("That's below the freezing point of water");}
if (degCent == 100) { document.write("That's the boiling point of water"); }
</script>
</body>
</html>
This code should work. These are easy to spot problems, just open up your javascript console (F12) and you'll see you have an extra ) on line 8, and a missing one line 10. There was also a typo on degCent.
<!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">
<body>
<script type="text/javascript">
var degFahren = Number(prompt("Enter the degrees Fahrenheit",32));
var degCent;
degCent = 5/9 * (degFahren - 32);
document.write(degFahren + "\xB0 Fahrenheit is " + degCent + "\xB0 centigrade<br />");
if (degCent < 0) { document.write("That's below the freezing point of water");}
if (degCent == 100) { document.write("That's the boiling point of water"); }
</script>
</body>
</html>
Related
I'm trying to debug a JavaScript in Firefox's debugger, and it won't let me set any breakpoints, and all the step buttons (step into, step out) are grayed out. I also tried Firebug, and I have the exact same results - no breakpoints, step buttons grayed out. What gives? This is my first post here, and I apologize for my messy code here. Anywho, here's my code:
<?xml version - "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page 452 - Exercise 11.7</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<script>
function buttonClicked() {
var article = ["the", "a", "one", "some", "any"];
var noun = ["boy", "girl", "dog", "town", "car"];
var verb = ["drove", "jumped", "ran", "walked", "skipped"];
var preposition = ["to", "from", "over", "under", "on"];
var story = "Once upon a time, ";
var sentence = "";
alert (sentence);
var output = document.getElementById("textArea");
output.value = "";
for (var i=0; i<=3; i++){
sentence += article[Math.floor(Math.random()*article.length)] + " ";
alert(sentence.charAt(0));
alert("Story is " + story);
/* if (charAt(sentence[0-3]) == ".") {
sentence +=
} */
sentence += noun[Math.floor(Math.random()*noun.length)] + " ";
sentence += verb[Math.floor(Math.random()*verb.length)] + " ";
sentence +=
preposition[Math.floor(Math.random()*preposition.length)] + " ";
sentence += article[Math.floor(Math.random()*article.length)] + " ";
sentence += noun[Math.floor(Math.random()*noun.length)] + ". ";
story += sentence;
output.value = story;
window.alert (sentence);
window.alert (story);
// sentence ="";
}
story += "THE END";
// output.value = sentence;
}
</script>
</head>
<body>
<p>Click the button for a funny story!<br/>
<input type="button" id="go" onclick="buttonClicked()" value="Go!"/><br/></p>
<textarea id="textArea" rows="10" cols="30"></textarea>
</body>
</html>
I am using google earth api and I want to draw multiple placemark (points and polygons) on the map at once. The actual scenario is that the user have a list of its and he can click them to draw them 1 by 1 or click the draw all button which will then start drawing about 3000 placemarks. The problem is after a few second the browser/plugin crashes or prompts the user to stop the plugin from executing.
This is an example code I made :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>Many Points Test!</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script>
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
// Get the current view.
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
// Set new latitude and longitude values.
lookAt.setLatitude(37.802);
lookAt.setLongitude(-122.448425);
lookAt.setRange(1000);
// Update the view in Google Earth.
ge.getView().setAbstractView(lookAt);
addPoints(1);
}
function failureCallback(object) {
}
function addPoints(num) {
for(var i = 0; i < num; i++)
{
var x = "37.802" + i.toString();
var kmlString = ''
+ '<?xml version="1.0" encoding="UTF-8"?>'
+ '<kml xmlns="http://www.opengis.net/kml/2.2">'
+ '<Document>'
+ ' <Placemark>'
+ ' <name>Placemark from KML string</name>'
+ ' <Point>'
+ ' <coordinates>-122.448425,'+x+',0</coordinates>'
+ ' </Point>'
+ ' </Placemark>'
+ '</Document>'
+ '</kml>';
var kmlObject = ge.parseKml(kmlString);
ge.getFeatures().appendChild(kmlObject);
}
}
</script>
</head>
<body onload='init()' id='body'>
<center>
<div id='map3d' style='border: 1px solid silver; height: 600px; width: 800px;'></div>
<input onclick="addPoints(10000)" value="Add Many Points" type="button" />
</center>
</body>
</html>
Anyone know How I can keep the browser responsive or even load the placemarks in an asynchronous way?
What seemed to solve it was pausing between every placemark I drew using setTimeout :
function addPoints(arr, index) {
var end = Math.min(arr.length, index + 1);
for (var i = index; i < end; i++) {
var kmlObject = ge.parseKml(arr[i]);
ge.getFeatures().appendChild(kmlObject);
document.getElementById('done').innerHTML = i;
}
if (end != arr.length) {
setTimeout(function () {
addPoints(arr, end);
}, 1);
} else {
alert('done');
}
}
addPoints(arr, 0); /* Function Call */
I am having a code with "upload" and done "button". It will select the file on clicking of "upload" and upload the file on clicking "Done" in the given location. But I need to auto-upload file, like Gmail attachment. Can anyone help me out pls
Try this code....
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>
function updateSize() {
var nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}
// end of optional code
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
}
</script>
</head>
<body onload="updateSize();">
<form name="uploadForm">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Done"></p>
</form>
</body>
</html>
You can use a 3rd party libraries for implementing drag, drop and auto upload features as well.
There is one library which I know is http://www.dropzonejs.com/
I have found this tidbit of code - which works fine.
But I also need an associated Identification ID pass along with the name.
So example has state say "California" - but I also have a unique ID associated to Califonrnia say "yye4" etc...
I can create my list easily with coldfusion as below.
var getStates = function(){
return [<cfoutput query=ulist>"#username#",</cfoutput>];
}
But I also need to pass a unique number in the form as well that is also associated to each username.
Thoughts?
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<cfajaximport tags="cfinput-autosuggest">
<script>
var init = function()
{
autosuggestobj = ColdFusion.Autosuggest.getAutosuggestObject('state');
autosuggestobj.itemSelectEvent.subscribe(foo);
}
var foo = function(event,args)
{
var msg = "";
msg = msg + "Event: " + event + "\n\n";
msg = msg + "Selected Item: " + args[2] + "\n\n";
msg = msg + "Index: " + args[1]._nItemIndex + "\n\n";
alert(msg);
}
var getStates = function(){
return ["California","Connecticut","Colorado","Illinois","Alabama","Iowa","Utah","Alaska"];
}
</script>
</head>
<body>
<h3>Attaching an event handler to the autosuggest object</h3>
<cfform name="mycfform" method="post" >
State:<BR>
<cfinput
type="text"
name="state"
autosuggest="javascript:getStates({cfautosuggestvalue})"
autosuggestMinLength=1
autosuggestBindDelay=1>
<cfset ajaxOnLoad("init")>
</cfform>
</body>
</html>
This, roughly? I used a text box rather than a hidden field so you could see it in action.
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<cfajaximport tags="cfinput-autosuggest">
<script>
// itcodes would contain the unique numbers instead of sample names.
var itCodes = ["Callie","Connie","Col","Illiana","Allie","Fred","Daphne","Alex"];
var itNames = [];
var init = function()
{
autosuggestobj = ColdFusion.Autosuggest.getAutosuggestObject('state');
autosuggestobj.itemSelectEvent.subscribe(foo);
}
var foo = function(event,args)
{
var msg = "";
var nameIndex = itNames.indexOf(document.getElementById('state').value);
msg = msg + "Event: " + event + "\n\n";
msg = msg + "Selected Item: " + args[2] + "\n\n";
msg = msg + "Index: " + args[1]._nItemIndex + "\n\n";
document.getElementById('hCodes').value = itCodes[nameIndex];
alert(msg);
}
var getStates = function(){
itNames = ["California","Connecticut","Colorado","Illinois","Alabama","Iowa","Utah","Alaska"];
return itNames;
}
</script>
</head>
<body>
<h3>Attaching an event handler to the autosuggest object</h3>
<cfform name="mycfform" method="post" >
State:<BR>
<cfinput
type="text"
name="state" id="state"
autosuggest="javascript:getStates({cfautosuggestvalue})"
autosuggestMinLength=1
autosuggestBindDelay=1>
<input type="text" id="hCodes" name="hCodes" value="">
<cfset ajaxOnLoad("init")>
</cfform>
Below code works fine on http://jsfiddle.net/saQTw/2/
for some reason it doesnt work on my local machine, i am not sure where i am making the mistake. Need an expert eye to look what i am doing wrong in this code.
Code which i got from the stackoverflow is support to populate the select list with dates
but i cant make it work on my local machine.
<!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 type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<link href="css.css" rel="stylesheet" type="text/css" />
<script>
function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' + date.getUTCFullYear();
optionElement = $('<option>')
optionElement.attr('value',formattedDate);
optionElement.text(formattedDate);
selectElement.append(optionElement);
date.setDate(date.getDate() + 1);
}
$('#ddDate').append(selectElement);
</script>
</head>
<body>
<div id="ddDate"> </div>
</body>
</html>
I tried jQuery version 1.6 also it does not work
Solution for the above problem:
<script>
$(function(){
function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' + date.getUTCFullYear();
optionElement = $('<option>')
optionElement.attr('value',formattedDate);
optionElement.text(formattedDate);
selectElement.append(optionElement);
date.setDate(date.getDate() + 1);
}
$('#ddDate').append(selectElement);
});
</script>
try wrapping the jquery in a document.ready()
<script>
jQuery(document).ready(function) {
You are accessing the #ddDate element before it exists. So either move the javascript part beneath the body OR wrap the code into $(document).ready(function() {...})
In JSFiddle you are using the onload event to run pad(n). You need to do the same here
Modify the <body> tag to <body onload="pad(2)">