The ultimate aim is to return a page displaying the following sentence
Once upon a time there was a GENDER named NAME who had a PET named PET NAME.
<SCRIPT language="JavaScript">
var heroGender, heroName, petType, petName;
heroGender = window.prompt('Is the hero female or male? Enter F or M', 'F');
heroName = window.prompt('What is the hero\'s name?','');
petType = window.prompt('What type of pet does the hero have?','');
petName = window.prompt('What is name of the pet?','');
document.write('Once upon a time there was a ');
if (heroGender == ('F'))
{
document.write('girl');
}
else
{
document.write('boy');
}
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName '.''<BR>' +
heroName + ' had a ' + petType + ' called ' + petName + '.');
</SCRIPT>
While your waiting for the books!
Learn from Mozilla Developer Centre !
An Example:
Example
Fixed version
document.write(
'Once upon a time there was a ' + heroGender +
' named ' + heroName + '.' + '<BR>' + heroName +
' had a ' + petType + ' called ' + petName + '.');
Broken version
You were missing to + symbols.
document.write(
'Once upon a time there was a ' + heroGender +
' named ' + heroName /* + */ '.' /* + */ '<BR>' + heroName +
' had a ' + petType + ' called ' + petName + '.');
Try using
Firefox and Firebug and its console tab (Hit F12)
IE9 and the build in console (Hit F12. Make sure the console is open then refresh).
Chrome and the build in console (Hit Ctrl+Shift+J)
To watch for any error messages.
If that's too much effort then try
window.onerror = function(e) {
alert(e.message);
}
Here's an "improved" more standards compliant version. Example Link!
HTML:
<label> Your Hero's gender </label><input id="heroGender"/><br/>
<label> Your Hero's name </label><input id="heroName"/><br/>
<label> Your Hero's pet type </label><input id="petType"/><br/>
<label> Your Hero's pet name </label><input id="petName"/><br/>
<button> Make me a hero! </button>
<div id="output"></div>
JavaScript:
// make your hero when you press the button
document.getElementsByTagName("button")[0].addEventListener("click", function() {
// get all the values from the text boxes
var gender = document.getElementById("heroGender").value,
name = document.getElementById("heroName").value,
petType = document.getElementById("petType").value,
petName = document.getElementById("petName").value;
// set the text on your output.
document.getElementById("output").textContent =
"Once upon a time there was a " + gender +
" named " + name + ". " + name + " had a pet " +
petType + " called " + petName;
}, false);
The above code will break for IE8 or less :(. Making JavaScript work cross browser is a right pain.
So I you could read the documentation for browsers at
Firefox's MDN
Microsoft JavaScript docs and HTML docs
But those are not easy to read or navigate. A great visual guide for cross browser scripting is the visibone BrowserBook.
It will show cross browser support (red is firefox, blue is IE) :
Give it a few months and you'll know how to use all that comfortably.
I think you had some typos in your final document.write.You're missing a '+' after heroName... and you've got some duplicative document.writes.
Here's what I believe should be your final code:
var heroGender, heroName, petType, petName;
heroGender = window.prompt('Is the hero female or male? Enter F or M', 'F');
heroName = window.prompt('What is the hero\'s name?','');
petType = window.prompt('What type of pet does the hero have?','');
petName = window.prompt('What is name of the pet?','');
if (heroGender == ('F')) { heroGender ='girl'; } else { heroGender = 'boy'; }
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName + '. ' + heroName + ' had a ' + petType + ' called ' + petName + '.');
There is a syntax error in this line:
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName '.''<BR>' + heroName + ' had a ' + petType + ' called ' + petName + '.');
specifically, here:
heroName '.''<BR>' + heroName
If you change it to this, your should work as expected:
document.write(' named ' + heroName + ' who had a ' + petType + ' called ' + petName + '.');
Notice that I also removed the redundancy from the first part of the phrase, since you already included it before your "if 'F', then 'girl'" statement.
Too many quotes and a missing plus
Error: missing ) after argument list
Source File: http://fiddle.jshell.net/_display/
Line: 41, Column: 83
Source Code:
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName '.''<BR>' +
should be
document.write(' named ' + heroName + '.<BR>' +
heroName + ' had a ' + petType + ' called ' + petName + '.');
http://jsfiddle.net/mplungjan/zHGsD/
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName **+** '.' **+** '<BR>' +
heroName + ' had a ' + petType + ' called ' + petName + '.');
I got it to run by adding the two + that I've wrapped in **
The problem is on your last line. Corrected as follow
document.write('Once upon a time there was a ' + heroGender + ' named ' + heroName + '.' + '<BR>' + heroName + ' had a ' + petType + ' called ' + petName + '.');
Related
I'm getting a list of objects and printing their content in the HTML page dynamically but only the last object is getting printed in all the added divisions.
Here is the js code:
var thelist = JSON.parse(sessionStorage.getItem("suspectList"));
for (var k in thelist) {
$(document).ready(function () {
$('#outerdiv').append('<div class="card"><h5 class="card-header">' + 'Crime: ' + thelist[k]['crime'] + '</h5><div class="card-body"><h5 class="card-title">' + 'Suspect name : ' + thelist[k]['name'] + '</h5><p class="card-text">' + 'Date of birth: ' + thelist[k]['dob'] + '</p>Enter Statement</div></div>');
});
console.log(thelist[k]['name'] + ' ' + thelist[k]['phone'] + ' ' + thelist[k]['dob']);
}
Here is the output:
Here is the console log
I'm constructing quite a big <span> - element that is being generated dynamically in code.
var span = '<span id="' + dayNumber + '/' + Number(currentMonth + 1) + "/" + Number(date.getFullYear()) + '" class="day ' + respons[0] + '" ng-click="gotoDetail($event)" style="height:' + screenHeigt + 'px; display:table;"><p style="display:table-cell; vertical-align:middle;">' + dayNumber + ' </p></span>';
As you can see, the id consist of a date-string. Via the ng-click-element I would like to pass the id to the gotoDetail($event)-function. When I'm inspecting the parameter of that function, I see however that $event.target.id is empty...
Following code is an older version and does work:
var span = '<span id="' + dayNumber + '/' + currentMonth + '" class="day ' + respons[0] + ' ' + lastMonth + ' " ng-click="gotoDetail($event)">' + dayNumber + '</span>' + string;
I really don't know what I'm doing wrong in the first example...
If I check my html in the chrome-console, there's nothing wrong with the id, the ng-click, or other attributes...
Someone who has an anwser?
EDIT: Code can be found here: https://gist.github.com/anonymous/c29798e0d46f40dcfe69
I am using jQchart to display a graph. However, the title property seems to display only a single line of text. Currently, the graph displays the following title:
text: chartTypeText + ': ' + chartTitle + ", " + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ' ' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
However, I basically need to display each variable on a different line (hopefully use linebreaks to separate each piece of information). I tried using "" but it displays the string literal.
Is there any way I could display each variable under the title of the graph with different fonts etc?
If you are looking for series title customization, it can be customized with tooltipFormat event.
[Use some separator(I use ; as a separator) and format with html, css]
In below statement, I changed separator to ;
text: chartTypeText + ': ' + chartTitle + ";" + $('#baselineResidentialLocationCity option:selected').text() + ', ' + $("#baselineResidentialLocationState option:selected").val() + ';' + $('#baselineResidentialStandardYear option:selected').text() + ' ' + baselinePeriod + ' year'
<script lang="javascript" type="text/javascript">
$(function () {
$('#ChartClientID').bind('tooltipFormat', function (e, data) {
var t=data.series.title.split(";");
//OR here you can dynamically build here it self
return "<b>" + t[0] + "</b><br />"
+ (t[1] || "") + "<br />"
+ (t[2] || "");
});
});
</script>
see this link for reference: http://www.jqchart.com/aspnet/chart/ChartFeatures/Tooltips
I have shell command which runs batch file with parameters below code all works fine
WshShell.Run ( '"H:\\Workspace\\testcomplete\\TCAF - QIKSilver\\test.bat" ' + + a + ' ' + b + ' ' + c);
The batch file path is not constant I would like to pass it dynamically
d= Project.Path; // I get the path of my project
value = d.replace(/\\/g, "\\\\");// replace single backslash with double slash
filepath = value.concat("test.bat") // value of filepath varialbe is -H:\\Workspace\\testcomplete\\TCAF - QIKSilver\\test.bat
Following is not working:
WshShell.Run ('filepath' + a + ' ' + b + ' ' + c);
any suggestions please
This code is written inside test complete using java script
You need to use filepath as a variable, not string, and you need to add quotes since your path contains spaces:
WshShell.Run('"' + filepath + '" ' + a + ' ' + b + ' ' + c);
Try this:
WshShell.Run (filepath+' '+ a + ' ' + b + ' ' + c);
I'm using append in the following way:
$('#city').append('<div class="c">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
Which results in something like this:
<div class="c">
Antone Stark. Doyletown, Rhode Island 43467
</div>
How do you use value['state'] to name the class?
<div class="MyCustomClass">
If the states were two letter codes, you could do this:
$('#city').append('<div class="'+value['state']+'">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
However, classes are space-separated meaning they are treated as separate when split up by spaces. So if you add something there with a space (like "Rhode Island"), it will treat them as separate classes (e.g., "Rhode" and "Island") so you may wish to replace spaces with an underscore or the like.
$('#city').append('<div class="'+value['state'].replace(/ /g, '_')+'">' + value['name'] + '. ' + value['city'] + ', ' +
value['state'] +' ' + value['zip'] + ' ' + '</div>');
So in the case of Rhode Island, that will produce:
<div class="Rhode_Island">
which you can then reference in CSS:
.Rhode_Island {color:blue}
or jQuery:
$('.Rhode_Island').... (do something)
etc.
However, if you are not repeating these, it might be more appropriate to generate it as an id rather than a class (i.e., to produce <div id="Rhode_Island"> instead of <div class="Rhode_Island">).
$('#city').append('<div class="' + value['state'].replace(/ /g, '_') + '">' ...