Display the length of a string on the page - javascript

I have a simple program that stores male, female and unisex names, you click a button and one is chosen at random and displayed on the page.
I am constantly adding new names into the database, so I want a simple javascript that records how many names are stored in each separate database (male, female and unisex) and displays in in a text that reads "There are currently ### males name, ### female names, and ### unisex names."
The site is live at: http://surrealmayhem.com/stuff/name_generator.html
The only things I can find online is a console.log using
var = randomOtherNames.length;
but I need it to display in the html via a span or bold tag and an ID name. I know it would be something along the lines of
document.getElementById("male_num");
but passed that, Im not sure how to put it all together and make it display on the page. Im still very new to javascript, and I dont entirely understand how the text that does display when you click the buttons even works. I feel like I might be able to reuse the script I already have, but I could use some help.
<button Onclick="click" id="other_button" style="font-size: 25px;"> Click Me </button>
<br /><br />
<b id="other_name" style="font-size: 25px;"></b>
<script type="text/javascript" charset="utf-8">
var other_string = randomOtherNames.length;
var randomOtherNames = [
"Jamie",
"Shannon",
"Kelly",
"Aeron",
"Shain",
"Kasey",
"Jordan",
"Jesse / Jessie",
"Sage",
"Evan",
"Alex",
"Stephen",
"Renee",
"Tracy",
"Avery",
"Dallas",
"Denver",
"Taylor",
"Elliot",
"Terry",
"Jeri",
"Percy",
"Raven",
"Jean",
"Jan",
"Christian",
"Adrian",
"Jude",
"Quinn",
"Piper",
"Harper",
"Payton",
"Walker",
"Cameron",
"Terran",
"Riley",
"River",
"Andren",
"Camden",
"Jiles",
"Pax",
"Rayne",
"Skylar",
"Kalin",
"Justice",
"July",
"Kensington",
"Kendall",
"Grey",
"Genesis",
"Hollis",
"Keagan",
"Kai",
"Bristol",
"Angel",
"Azure",
"Bailey",
"Carmen",
"Echo",
"Embry",
"Ember",
"Gale",
"Freedom",
"Haven",
"Kyler",
"Kylan",
"Miracle",
"Myka",
"Peace",
"Zene",
"Winter",
"Xannon",
"Valor",
"Urban",
"Valentine",
"Storm",
"Tai",
"Shae",
"Sailor",
"Red",
"Reign",
"Ramsey",
"Reed",
"Reggie",
"Ocean",
"Nalo",
"Neo",
"London",
"Ash",
"Brook",
"Crane",
"Crimson",
"Corin",
"Cresant",
"Indigo",
"Jazz",
"Cassidy",
"Kin",
"Monroe",
"Moral",
"Poet",
"Ryder",
"Saxton",
"Sidney",
"Tanner",
"Torrance",
"Torrin",
"Lex / Lexi",
"Zane",
"Zanas",
"Ari",
"Brynn",
"Greer",
"Kennedy",
"Lyle",
"Lonnie",
"Rune",
"Rylan",
"Sparrow",
"Sunny",
"Emerald",
"Cloud",
"Star",
"Kensey",
];
var other_div = document.getElementById("other_name");
document.getElementById("other_button").addEventListener("click", function() {
randomIndex = Math.ceil((Math.random()*randomOtherNames.length-1));
newText = randomOtherNames[randomIndex];
other_div.innerHTML = newText;
});
</script>


At the top, add an element that you will use to display the count. Then in your script, set the innerHTML for the new element:
var randomOtherNames = ["Jamie", "Shannon", "Kelly", "Aeron", "Shain", "Kasey", "Jordan", "Jesse / Jessie", "Sage", "Evan", "Alex", "Stephen", "Renee", "Tracy", "Avery", "Dallas", "Denver", "Taylor", "Elliot", "Terry", "Jeri", "Percy", "Raven", "Jean", "Jan", "Christian", "Adrian", "Jude", "Quinn", "Piper", "Harper", "Payton", "Walker", "Cameron", "Terran", "Riley", "River", "Andren", "Camden", "Jiles", "Pax", "Rayne", "Skylar", "Kalin", "Justice", "July", "Kensington", "Kendall", "Grey", "Genesis", "Hollis", "Keagan", "Kai", "Bristol", "Angel", "Azure", "Bailey", "Carmen", "Echo", "Embry", "Ember", "Gale", "Freedom", "Haven", "Kyler", "Kylan", "Miracle", "Myka", "Peace", "Zene", "Winter", "Xannon", "Valor", "Urban", "Valentine", "Storm", "Tai", "Shae", "Sailor", "Red", "Reign", "Ramsey", "Reed", "Reggie", "Ocean", "Nalo", "Neo", "London", "Ash", "Brook", "Crane", "Crimson", "Corin", "Cresant", "Indigo", "Jazz", "Cassidy", "Kin", "Monroe", "Moral", "Poet", "Ryder", "Saxton", "Sidney", "Tanner", "Torrance", "Torrin", "Lex / Lexi", "Zane", "Zanas", "Ari", "Brynn", "Greer", "Kennedy", "Lyle", "Lonnie", "Rune", "Rylan", "Sparrow", "Sunny", "Emerald", "Cloud", "Star", "Kensey"];
var other_string = randomOtherNames.length;
var other_div = document.getElementById("other_name");
var other_count_div = document.getElementById("other_name_count");
//populate the innerHTML of "other_count_div" on page load:
other_name_count.innerHTML = randomOtherNames.length;
var findName = function() {
randomIndex = Math.ceil((Math.random() * randomOtherNames.length - 1));
newText = randomOtherNames[randomIndex];
other_div.innerHTML = newText;
other_name_count.innerHTML = randomOtherNames.length;
};
document.getElementById("other_button").addEventListener("click", findName);
<button Onclick="click" id="other_button" style="font-size: 25px;"> Click Me </button>
<br /><br />
<b id="other_name" style="font-size: 25px;"></b>
<span id="other_name_count"></span>

Related

Adding picture to randomized list

I'm adding a button to a website that randomizes NBA teams and provides a picture with the answer. I have the randomizer set up to provide the random team when the button is pushed but I'm unsure how to get a picture to go along with the team selected.
My randomizer in JS:
let teams =
{
atlanta: "Atlanta Hawks",
boston: "Boston Celtics",
brooklyn: "Brooklyn Nets",
charlotte: "Charlotte Hornets",
chicago: "Chicago Bulls",
cleveland: "Cleveland Cavaliers",
dallas: "Dallas Mavericks",
denver: "Denver Nuggets",
detroit: "Detroit Pistons",
goldenState: "Golden State Warriors",
houston: "Houston Rockets",
indiana: "Indiana Pacers",
clippers: "Los Angeles Clippers",
lakers: "Los Angeles Lakers",
memphis: "Memphis Grizzlies",
miami: "Miami Heat",
milwaukee: "Milwaukee Bucks",
minnesota: "Minnesota Timberwolves",
pelicans: "New Orleans Pelicans",
knicks: "New York Knicks",
thunder: "Oklahoma City Thunder",
orlando: "Orlando Magic",
philadelphia: "Philadelphia 76ers",
phoenix: "Phoenix Suns",
portland: "Portland Trail Blazers",
sacramento: "Sacramento Kings",
spurs: "San Antonio Spurs",
toronto: "Toronto Raptors",
utah: "Utah Jazz",
washington: "Washington Wizards"
}
const values = Object.values(teams)
app.get("/api/teams", (req, res)=>{
const randomTeam = values[Math.floor(Math.random()*values.length)]
console.log(randomTeam)
res.status(200).send(randomTeam)
})
To add team name to HTML:
<script>
document.getElementById("button").onclick = function () {
axios.get("http://localhost:5151/api/teams").then(function(response) {
const data = response.data;
document.getElementById("randomTeamCard").innerHTML = [data].map(function(team) {
return `The team you should bandwagon is: ${data}!`;
})
.join("");
}).catch(function (err) {
document.getElementById("randomTeamCard").innerHTML =
'<li class="text-danger">' + err.message + "</li>";
});
};
</script>

Adding Images to Objects

I am working on a project where we I have an array full of objects. It stores movie information, and I would like to add an image of the poster onto the object as well. Below is an example of my code. I have functions that searches through the array for specific movies based on given information, and returns the information. I would like it to return an image with it as well. This information then gets printed onto a website. Here is the code:
var allMovies = [
{
Title: "Green Book",
Year: 2019,
Director: "Peter Farrelly",
Winner: "yes",
Genre: "Biography, Comedy, Drama"
},
{
Title: "Black Panther",
Year: 2019,
Director: "Ryan Coogler",
Winner: "no",
Genre: "Action, Sci-Fi"
},
and there is more code after this, but it is too long to add the whole code. Is there a way to add an image, and have it be returned with this information, and then be printed onto a page?

Similar to what #rid said, but ill add a bit more, maybe it will help.
so your array is:
var allMovies = [
{
Title: "Green Book",
Year: 2019,
Director: "Peter Farrelly",
Winner: "yes",
Genre: "Biography, Comedy, Drama",
Image:"https:website.com/images/image.jpg"
},
{
Title: "Black Panther",
Year: 2019,
Director: "Ryan Coogler",
Winner: "no",
Genre: "Action, Sci-Fi",
Image:"https:website.com/images/image.jpg"
}
]
Now you can loop through the array and use template literals to create your HTML output, it could be done like this:
let output='';
allMovies.forEach(Movie=>{
//we use template literals here to make things easier
output+=`<h1>Title: ${Movie.Title}</h1>
<img src="${Movie.Image}" alt="Movie Image">
<p>Year: ${Movie.Year}<p>
<p>Director: ${Movie.Director}</p>
<p>Winner: ${Movie.Winner}</p>
<p>Genre: ${Movie.Genre}</p>
`
})
const div =document.querySelector("yourdiv");
div.innerHTML=output;
I hope this helped :)

You have to add the url of the image.
Like this,
var allMovies = [
{
Title: "Green Book",
Year: 2019,
Director: "Peter Farrelly",
Winner: "yes",
Genre: "Biography, Comedy, Drama",
Image_url: "https://www.something.com/something/something.jpg"
},
{
Title: "Black Panther",
Year: 2019,
Director: "Ryan Coogler",
Winner: "no", Genre: "Action, Sci-Fi",
Image_url: "https://www.something.com/something/something.jpg"
},

html5 mustache get the index of article and compare the value

I have a mustache file, and I am iterating over the array:
var data = {
sales: [
{
name: "Jim Frost",
region: "USA East",
phone: "212-555-1212",
email: "jfrost#acme-travel.com"
},
{
name: "Jan Smith",
region: "USA West",
phone: "310-555-1212",
},
{
name: "Fred Wesley",
phone: "608-555-1212",
email: "fwesley#acme-travel.com"
},
{
name: "Lisa Moore",
region: "USA South",
phone: "315-555-1212",
email: "lmoore#acme-travel.com"
},
{
name: "Jim Dio",
phone: "+ 44 022-555-1212",
email: "jdio#acme-travel.com"
},
{
name: "Charles Watts",
region: "Spain",
email: "cwatts#acme-travel.com"
},
{
name: "Bert Cooper",
region: "Italy",
email: "bcooper#acme-travel.com"
}
]
};
here is the markup:
<div>
<section>
{{#data.sales}}
<article class="items">
<div class="region">{{{region}}}</div>
</article>
{{/data.sales}}
</section>
</div>
I want to add some special style (like, bold font, color etc) ONLY if the region is USA East.
how can i detect inside this inherent loop in the article element if {{{region}} has a specific value? Given that the comparison will be made against a value that i get from backend, say {{myValue}}, which is manually set to USA East in the backend.

You can add a function in the data which will return the correct class depending on the region value. Something like
data['regionClass'] = function(){
if ( this['region'] == 'USA East' ) {
return "strong green";
}else{
return "";
}
}
And then in the Mustache you can do: <div class="region {{regionClass}}">{{{region}}}</div>

Using jQuery to render a random font-awesome icon (random string from a list)?

I'm generating a random icon in several places on a webpage. To style these icons, I'm using Font Awesome as the list. Looking at that link, you can see each icon is represented by a class styled <i class="icon-[some-string]"></i>
The goal is to be able to place code on a page that will then use jQuery to fill [some-string] with an option from that list. So some psuedo example like:
<ul class="random-list">
[for i]
<li class="list-item"><i class="icon-string"></i></li>
// Other content
[end]
</ul>
Then I would use jQuery to change string from a list of options. I just don't know how to do this, how to create the array of objects, or how to manipulate the dynamically added items. Since they're adding dynamically like the example above, I suppose I should do the string replace while they are generating instead of doing so after the page is loaded? What would be the process for doing that? I'm using a template that is loading some blocks and I want to include the random icon before each block. Alternatively, if it is easier, I can prepend a random icon before each block, however, since they are dynamically generated by the template, this presents it's own problems.
1) How can I achieve the random icon like I have in the example (template based)
2) Alterternatively, if doing so after the fact is easier, how do I prepend a random icon to each block?
Either answer is fine for this question.

$(document).ready(function() {
var iconArray = new Array(
"icon-compass",
"icon-collapse",
"icon-collapse-top",
"icon-expand",
"icon-eur",
"icon-euro",
"icon-gbp",
"icon-usd",
"icon-dollar",
"icon-inr",
"icon-rupee",
"icon-jpy",
"icon-yen",
"icon-cny",
"icon-renminbi",
"icon-krw",
"icon-won",
"icon-btc",
"icon-bitcoin",
"icon-file",
"icon-file-text",
"icon-sort-by-alphabet",
"icon-sort-by-alphabet-alt",
"icon-sort-by-attributes",
"icon-sort-by-attributes-alt",
"icon-sort-by-order",
"icon-sort-by-order-alt",
"icon-thumbs-up",
"icon-thumbs-down",
"icon-youtube-sign",
"icon-youtube",
"icon-xing",
"icon-xing-sign",
"icon-youtube-play",
"icon-dropbox",
"icon-stackexchange",
"icon-instagram",
"icon-flickr",
"icon-adn",
"icon-bitbucket",
"icon-bitbucket-sign",
"icon-tumblr",
"icon-tumblr-sign",
"icon-long-arrow-down",
"icon-long-arrow-up",
"icon-long-arrow-left",
"icon-long-arrow-right",
"icon-apple",
"icon-windows",
"icon-android",
"icon-linux",
"icon-dribbble",
"icon-skype",
"icon-foursquare",
"icon-trello",
"icon-female",
"icon-male",
"icon-gittip",
"icon-sun",
"icon-moon",
"icon-archive",
"icon-bug",
"icon-vk",
"icon-weibo",
"icon-renren",
"icon-adjust",
"icon-anchor",
"icon-archive",
"icon-asterisk",
"icon-ban-circle",
"icon-bar-chart",
"icon-barcode",
"icon-beaker",
"icon-beer",
"icon-bell",
"icon-bell-alt",
"icon-bolt",
"icon-book",
"icon-bookmark",
"icon-bookmark-empty",
"icon-briefcase",
"icon-bug",
"icon-building",
"icon-bullhorn",
"icon-bullseye",
"icon-calendar",
"icon-calendar-empty",
"icon-camera",
"icon-camera-retro",
"icon-certificate",
"icon-check",
"icon-check-empty",
"icon-check-minus",
"icon-check-sign",
"icon-circle",
"icon-circle-blank",
"icon-cloud",
"icon-cloud-download",
"icon-cloud-upload",
"icon-code",
"icon-code-fork",
"icon-coffee",
"icon-cog",
"icon-cogs",
"icon-collapse",
"icon-collapse-alt",
"icon-collapse-top",
"icon-comment",
"icon-comment-alt",
"icon-comments",
"icon-comments-alt",
"icon-compass",
"icon-credit-card",
"icon-crop",
"icon-dashboard",
"icon-desktop",
"icon-download",
"icon-download-alt",
"icon-edit",
"icon-edit-sign",
"icon-ellipsis-horizontal",
"icon-ellipsis-vertical",
"icon-envelope",
"icon-envelope-alt",
"icon-eraser",
"icon-exchange",
"icon-exclamation",
"icon-exclamation-sign",
"icon-expand",
"icon-expand-alt",
"icon-external-link",
"icon-external-link-sign",
"icon-eye-close",
"icon-eye-open",
"icon-facetime-video",
"icon-female",
"icon-fighter-jet",
"icon-film",
"icon-filter",
"icon-fire",
"icon-fire-extinguisher",
"icon-flag",
"icon-flag-alt",
"icon-flag-checkered",
"icon-folder-close",
"icon-folder-close-alt",
"icon-folder-open",
"icon-folder-open-alt",
"icon-food",
"icon-frown",
"icon-gamepad",
"icon-gear",
"icon-gears",
"icon-gift",
"icon-glass",
"icon-globe",
"icon-group",
"icon-hdd",
"icon-headphones",
"icon-heart",
"icon-heart-empty",
"icon-home",
"icon-inbox",
"icon-info",
"icon-info-sign",
"icon-key",
"icon-keyboard",
"icon-laptop",
"icon-leaf",
"icon-legal",
"icon-lemon",
"icon-level-down",
"icon-level-up",
"icon-lightbulb",
"icon-location-arrow",
"icon-lock",
"icon-magic",
"icon-magnet",
"icon-mail-forward",
"icon-mail-reply",
"icon-mail-reply-all",
"icon-male",
"icon-map-marker",
"icon-meh",
"icon-microphone",
"icon-microphone-off",
"icon-minus",
"icon-minus-sign",
"icon-minus-sign-alt",
"icon-mobile-phone",
"icon-money",
"icon-moon",
"icon-move",
"icon-music",
"icon-off",
"icon-ok",
"icon-ok-circle",
"icon-ok-sign",
"icon-pencil",
"icon-phone",
"icon-phone-sign",
"icon-picture",
"icon-plane",
"icon-plus",
"icon-plus-sign",
"icon-plus-sign-alt",
"icon-power-off",
"icon-print",
"icon-pushpin",
"icon-puzzle-piece",
"icon-qrcode",
"icon-question",
"icon-question-sign",
"icon-quote-left",
"icon-quote-right",
"icon-random",
"icon-refresh",
"icon-remove",
"icon-remove-circle",
"icon-remove-sign",
"icon-reorder",
"icon-reply",
"icon-reply-all",
"icon-resize-horizontal",
"icon-resize-vertical",
"icon-retweet",
"icon-road",
"icon-rocket",
"icon-rss",
"icon-rss-sign",
"icon-screenshot",
"icon-search",
"icon-share",
"icon-share-alt",
"icon-share-sign",
"icon-shield",
"icon-shopping-cart",
"icon-sign-blank",
"icon-signal",
"icon-signin",
"icon-signout",
"icon-sitemap",
"icon-smile",
"icon-sort",
"icon-sort-by-alphabet",
"icon-sort-by-alphabet-alt",
"icon-sort-by-attributes",
"icon-sort-by-attributes-alt",
"icon-sort-by-order",
"icon-sort-by-order-alt",
"icon-sort-down",
"icon-sort-up",
"icon-spinner",
"icon-star",
"icon-star-empty",
"icon-star-half",
"icon-star-half-empty",
"icon-star-half-full",
"icon-subscript",
"icon-suitcase",
"icon-sun",
"icon-superscript",
"icon-tablet",
"icon-tag",
"icon-tags",
"icon-tasks",
"icon-terminal",
"icon-thumbs-down",
"icon-thumbs-down-alt",
"icon-thumbs-up",
"icon-thumbs-up-alt",
"icon-ticket",
"icon-time",
"icon-tint",
"icon-trash",
"icon-trophy",
"icon-truck",
"icon-umbrella",
"icon-unchecked",
"icon-unlock",
"icon-unlock-alt",
"icon-upload",
"icon-upload-alt",
"icon-user",
"icon-volume-down",
"icon-volume-off",
"icon-volume-up",
"icon-warning-sign",
"icon-wrench",
"icon-zoom-in",
"icon-zoom-out",
"icon-bitcoin",
"icon-btc",
"icon-cny",
"icon-dollar",
"icon-eur",
"icon-euro",
"icon-gbp",
"icon-inr",
"icon-jpy",
"icon-krw",
"icon-renminbi",
"icon-rupee",
"icon-usd",
"icon-won",
"icon-yen",
"icon-align-center",
"icon-align-justify",
"icon-align-left",
"icon-align-right",
"icon-bold",
"icon-columns",
"icon-copy",
"icon-cut",
"icon-eraser",
"icon-file",
"icon-file-alt",
"icon-file-text",
"icon-file-text-alt",
"icon-font",
"icon-indent-left",
"icon-indent-right",
"icon-italic",
"icon-link",
"icon-list",
"icon-list-alt",
"icon-list-ol",
"icon-list-ul",
"icon-paper-clip",
"icon-paperclip",
"icon-paste",
"icon-repeat",
"icon-rotate-left",
"icon-rotate-right",
"icon-save",
"icon-strikethrough",
"icon-table",
"icon-text-height",
"icon-text-width",
"icon-th",
"icon-th-large",
"icon-th-list",
"icon-underline",
"icon-undo",
"icon-unlink",
"icon-angle-down",
"icon-angle-left",
"icon-angle-right",
"icon-angle-up",
"icon-arrow-down",
"icon-arrow-left",
"icon-arrow-right",
"icon-arrow-up",
"icon-caret-down",
"icon-caret-left",
"icon-caret-right",
"icon-caret-up",
"icon-chevron-down",
"icon-chevron-left",
"icon-chevron-right",
"icon-chevron-sign-down",
"icon-chevron-sign-left",
"icon-chevron-sign-right",
"icon-chevron-sign-up",
"icon-chevron-up",
"icon-circle-arrow-down",
"icon-circle-arrow-left",
"icon-circle-arrow-right",
"icon-circle-arrow-up",
"icon-double-angle-down",
"icon-double-angle-left",
"icon-double-angle-right",
"icon-double-angle-up",
"icon-hand-down",
"icon-hand-left",
"icon-hand-right",
"icon-hand-up",
"icon-long-arrow-down",
"icon-long-arrow-left",
"icon-long-arrow-right",
"icon-long-arrow-up",
"icon-backward",
"icon-eject",
"icon-fast-backward",
"icon-fast-forward",
"icon-forward",
"icon-fullscreen",
"icon-pause",
"icon-play",
"icon-play-circle",
"icon-play-sign",
"icon-resize-full",
"icon-resize-small",
"icon-step-backward",
"icon-step-forward",
"icon-stop",
"icon-youtube-play",
"icon-ambulance",
"icon-h-sign",
"icon-hospital",
"icon-medkit",
"icon-plus-sign-alt",
"icon-stethoscope",
"icon-user-md"
);
var randIcon = Math.floor(Math.random()*(iconArray.length));
$('.icon-front').append("<i class='" + iconArray[randIcon] + "'></i>");
console.log(randIcon);
});
Seems to do the trick, however, getting it to work on dynamic elements will require a delay or something unless I can figure this snippet to run inside the element create template...

update to recent Font Awesome selector labels:
$(document).ready(function() {
var iconArray = new Array("glass", "music", "search", "envelope-o", "heart", "star", "star-o", "user", "film", "th-large", "th", "th-list", "check", "remove", "close", "times", "search-plus", "search-minus", "power-off", "signal", "gear", "cog", "trash-o", "home", "file-o", "clock-o", "road", "download", "arrow-circle-o-down", "arrow-circle-o-up", "inbox", "play-circle-o", "rotate-right", "repeat", "refresh", "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "list", "dedent", "outdent", "indent", "video-camera", "photo", "image", "picture-o", "pencil", "map-marker", "adjust", "tint", "edit", "pencil-square-o", "share-square-o", "check-square-o", "arrows", "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-circle", "minus-circle", "times-circle", "check-circle", "question-circle", "info-circle", "crosshairs", "times-circle-o", "check-circle-o", "ban", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "mail-forward", "share", "expand", "compress", "plus", "minus", "asterisk", "exclamation-circle", "gift", "leaf", "fire", "eye", "eye-slash", "warning", "exclamation-triangle", "plane", "calendar", "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder", "folder-open", "arrows-v", "arrows-h", "bar-chart-o", "bar-chart", "twitter-square", "facebook-square", "camera-retro", "key", "gears", "cogs", "comments", "thumbs-o-up", "thumbs-o-down", "star-half", "heart-o", "sign-out", "linkedin-square", "thumb-tack", "external-link", "sign-in", "trophy", "github-square", "upload", "lemon-o", "phone", "square-o", "bookmark-o", "phone-square", "twitter", "facebook-f", "facebook", "github", "unlock", "credit-card", "rss", "hdd-o", "bullhorn", "bell", "certificate", "hand-o-right", "hand-o-left", "hand-o-up", "hand-o-down", "arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-circle-down", "globe", "wrench", "tasks", "filter", "briefcase", "arrows-alt", "group", "users", "chain", "link", "cloud", "flask", "cut", "scissors", "copy", "files-o", "paperclip", "save", "floppy-o", "square", "navicon", "reorder", "bars", "list-ul", "list-ol", "strikethrough", "underline", "table", "magic", "truck", "pinterest", "pinterest-square", "google-plus-square", "google-plus", "money", "caret-down", "caret-up", "caret-left", "caret-right", "columns", "unsorted", "sort", "sort-down", "sort-desc", "sort-up", "sort-asc", "envelope", "linkedin", "rotate-left", "undo", "legal", "gavel", "dashboard", "tachometer", "comment-o", "comments-o", "flash", "bolt", "sitemap", "umbrella", "paste", "clipboard", "lightbulb-o", "exchange", "cloud-download", "cloud-upload", "user-md", "stethoscope", "suitcase", "bell-o", "coffee", "cutlery", "file-text-o", "building-o", "hospital-o", "ambulance", "medkit", "fighter-jet", "beer", "h-square", "plus-square", "angle-double-left", "angle-double-right", "angle-double-up", "angle-double-down", "angle-left", "angle-right", "angle-up", "angle-down", "desktop", "laptop", "tablet", "mobile-phone", "mobile", "circle-o", "quote-left", "quote-right", "spinner", "circle", "mail-reply", "reply", "github-alt", "folder-o", "folder-open-o", "smile-o", "frown-o", "meh-o", "gamepad", "keyboard-o", "flag-o", "flag-checkered", "terminal", "code", "mail-reply-all", "reply-all", "star-half-empty", "star-half-full", "star-half-o", "location-arrow", "crop", "code-fork", "unlink", "chain-broken", "question", "info", "exclamation", "superscript", "subscript", "eraser", "puzzle-piece", "microphone", "microphone-slash", "shield", "calendar-o", "fire-extinguisher", "rocket", "maxcdn", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-circle-down", "html5", "css3", "anchor", "unlock-alt", "bullseye", "ellipsis-h", "ellipsis-v", "rss-square", "play-circle", "ticket", "minus-square", "minus-square-o", "level-up", "level-down", "check-square", "pencil-square", "external-link-square", "share-square", "compass", "toggle-down", "caret-square-o-down", "toggle-up", "caret-square-o-up", "toggle-right", "caret-square-o-right", "euro", "eur", "gbp", "dollar", "usd", "rupee", "inr", "cny", "rmb", "yen", "jpy", "ruble", "rouble", "rub", "won", "krw", "bitcoin", "btc", "file", "file-text", "sort-alpha-asc", "sort-alpha-desc", "sort-amount-asc", "sort-amount-desc", "sort-numeric-asc", "sort-numeric-desc", "thumbs-up", "thumbs-down", "youtube-square", "youtube", "xing", "xing-square", "youtube-play", "dropbox", "stack-overflow", "instagram", "flickr", "adn", "bitbucket", "bitbucket-square", "tumblr", "tumblr-square", "long-arrow-down", "long-arrow-up", "long-arrow-left", "long-arrow-right", "apple", "windows", "android", "linux", "dribbble", "skype", "foursquare", "trello", "female", "male", "gittip", "gratipay", "sun-o", "moon-o", "archive", "bug", "vk", "weibo", "renren", "pagelines", "stack-exchange", "arrow-circle-o-right", "arrow-circle-o-left", "toggle-left", "caret-square-o-left", "dot-circle-o", "wheelchair", "vimeo-square", "turkish-lira", "try", "plus-square-o", "space-shuttle", "slack", "envelope-square", "wordpress", "openid", "institution", "bank", "university", "mortar-board", "graduation-cap", "yahoo", "google", "reddit", "reddit-square", "stumbleupon-circle", "stumbleupon", "delicious", "digg", "pied-piper", "pied-piper-alt", "drupal", "joomla", "language", "fax", "building", "child", "paw", "spoon", "cube", "cubes", "behance", "behance-square", "steam", "steam-square", "recycle", "automobile", "car", "cab", "taxi", "tree", "spotify", "deviantart", "soundcloud", "database", "file-pdf-o", "file-word-o", "file-excel-o", "file-powerpoint-o", "file-photo-o", "file-picture-o", "file-image-o", "file-zip-o", "file-archive-o", "file-sound-o", "file-audio-o", "file-movie-o", "file-video-o", "file-code-o", "vine", "codepen", "jsfiddle", "life-bouy", "life-buoy", "life-saver", "support", "life-ring", "circle-o-notch", "ra", "rebel", "ge", "empire", "git-square", "git", "hacker-news", "tencent-weibo", "qq", "wechat", "weixin", "send", "paper-plane", "send-o", "paper-plane-o", "history", "genderless", "circle-thin", "header", "paragraph", "sliders", "share-alt", "share-alt-square", "bomb", "soccer-ball-o", "futbol-o", "tty", "binoculars", "plug", "slideshare", "twitch", "yelp", "newspaper-o", "wifi", "calculator", "paypal", "google-wallet", "cc-visa", "cc-mastercard", "cc-discover", "cc-amex", "cc-paypal", "cc-stripe", "bell-slash", "bell-slash-o", "trash", "copyright", "at", "eyedropper", "paint-brush", "birthday-cake", "area-chart", "pie-chart", "line-chart", "lastfm", "lastfm-square", "toggle-off", "toggle-on", "bicycle", "bus", "ioxhost", "angellist", "cc", "shekel", "sheqel", "ils", "meanpath", "buysellads", "connectdevelop", "dashcube", "forumbee", "leanpub", "sellsy", "shirtsinbulk", "simplybuilt", "skyatlas", "cart-plus", "cart-arrow-down", "diamond", "ship", "user-secret", "motorcycle", "street-view", "heartbeat", "venus", "mars", "mercury", "transgender", "transgender-alt", "venus-double", "mars-double", "venus-mars", "mars-stroke", "mars-stroke-v", "mars-stroke-h", "neuter", "facebook-official", "pinterest-p", "whatsapp", "server", "user-plus", "user-times", "hotel", "bed", "viacoin", "train", "subway", "medium");
var randIcon = Math.floor(Math.random()*(iconArray.length));
$('.icon-front').append("");
console.log(randIcon);
});

array and parsing through sentence construction

I'm really getting a hard time in running the parse button to show the result from the input box ...
these are my codes:
<html>
<head>
<title> sentence detector</title> </head>
<body background="english.jpg">
<font color="black">
<h1 align = center> TABLE OF WORDS </h1>
<br>
<h3>
<script>
var noun = new Array ("time", "year", "people", "way", "man", "day", "thing", "child", "Mr", "government", "work", "life", "woman", "system", "case", "part", "group", "number", "world", "house", "area", "company", "problem", "service", "place", "hand", "party", "school", "country", "point", "week", "member", "end", "state", "word", "family", "fact", "head", "month", "side", "business", "night", "eye", "home", "question", "information" , "power", "change", "interest", "development ");
document.write("<b>");
document.write("NOUN: ");
for (i=0; i<noun.length; i++)
{
document.write(" " + noun[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
</script>
<script>
var verb = new Array ("allow","answer","arrive","ask" , "be", "become" , "begin" , "believe", "bring", "burn", "buy" , "call" , "can" , "decide", "describe", "destroy" , "die" , "do", "drink" , "drive", "eat", "end", "explain", "fall" , "feel" , "hope" , "hurt", "improve", "jump", "know", "laugh", "learn", "leave", "lie", "listen", "live", "look" , "press" , "promise" , "pull" , "push" , "put" , "read" , "receive", "recognize", "remember", "repeat" , "rest", "return");
document.write("<b>");
document.write("VERB: ");
for (i=0;i<verb.length;i++)
{
document.write(" " + verb[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
<script>
var adj = new Array ("abandoned", "able", "absolute", "adorable", "adventurous", "academic", "acceptable", "adored", "advanced" , "afraid", "belated", "beloved", "beneficial", "better", "best", "careful", "careles" , "caring", "circular", "classic", "clean", "clear" , "damaged" , "damp", "dangerous", "dapper", "daring");
document.write("<b>");
document.write("ADJECTIVE: ");
for (i=0;i<adj.length;i++)
{
document.write(" " + adj[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
</script>
<script>
var adv = new Array ("financially","willfully", "abruptly", "endlessly", "firmly", "delightfully", "quickly", "lightly", "eternally", "delicately","wearily", "sorrowfully","beautifully","truthfully" ,"now", "first", "last", "early", "yesterday", "tomorrow", "today", "later", "regularly", "often", "never", "monthly", "always", "usually", "very", "too", "almost", "also", "only", "enough", "so", "quite", "almost", "rather", "back", "gamely", "helplessly" , "entirely", "absently", "bodily", "bloodily", "boldly" , "crazily" , "heartbrokenly", "healthily", "hurtfully");
document.write("<b>");
document.write("ADVERB: ");
for (i=0;i<adv.length;i++)
{
document.write(" " + adv[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
<script>
var prep = new Array ("about", "above", "according to", "along with", "among", "apart from", "around as", "behind ","below", "beneath", "beside", "between", "beyond", "but", "by", "by means of", "concerning", "despite", "down", "except", "for", "excepting", "for", "in case of", "instead of", "into", "like", "near", "next of", "off", "on", "onto", "on top of", "out", "out of", "outside", "round since", "through", "throughout", "till", "under", "until", "up upon", "up", "to", "with", "within", "without");
document.write("<b>");
document.write("PREPOSITION: ");
for (i=0;i<prep.length;i++)
{
document.write(" " + prep[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
</script>
<script>
var pronoun = new Array ("all", "another", "any", "anybody", "anyone", "anything", "both","each", "each", "other", "either", "everybody", "everyone", "everything", "few", "he", "her", "hers", "herself", "him", "himself", "his", "I", "it", "its", "itself", "little", "many", "me", "mine");
document.write("<b>");
document.write("PRONOUN: ");
for (i=0;i<pronoun.length;i++)
{
document.write(" " + pronoun[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
</script>
<script>
var conj = new Array("for", "and", "nor", "but", "or", "yet", "so", "either", "or", "neither", "nor", "both", "and", "not only", "but", "also", "after all", "in addition", "next", "also", "incidentally", "nonetheless", "as a result", "indeed", "on the contrary", "besides", "in fact", "on the other hand", "consequently", "in other words", "otherwise", "finally", "instead", "still", "for example", "likewise", "then","furthermore", "meanwhile", "hence", "moreover", "thus", "however", "nevertheless");
document.write("<b>");
document.write("CONJUNCTION: " );
for (i=0;i<conj.length;i++)
{
document.write(" " + conj[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
</script>
<script>
var interjection = new Array ( "Absolutely", "Achoo", "Ack", "Adios", "Aha", "Ahoy", "Agreed", "Alack", "Alright", "Alrighty", "Alrighty-roo", "Alack", "Alleluia", "All hail", "Aloha", "Amen", "Anytime", "Argh", "Anyhoo", "Anyhow", "As if", "Attaboy", "Attagirl", "Awww", "Awful", "Ay", "bam", "Bah", "hambug", "Begorra", "Behold", "Bingo", "Blah", "Bravo", "Brrr", "Bye", "Cheers", "Ciao", "Cripes", "Crud", "Darn", "Dear", "Doh", "Drat", "Eek", "Encore", "Eureka", "FiddlesticksFie", "Gadzooks", "Gee");
document.write("<b>");
document.write("INTERJECTION: ");
for (i=0;i<interjection.length;i++)
{
document.write(" " + interjection[i] + "! " + "," + " ");
}
document.write("<br>");
document.write("<br>");
</script>
<script>
var deter = new Array ("the", "a", "an", "another", "no","some", "any", "my", "our", "their", "her", "his", "its", "each", "every" , "certain" , "its", "this", "that", "your", "whose", "little", "|ess", "least", "few", "fewer", "fewest");
document.write("<b>");
document.write("DETERMINER: ");
for (i=0;i<deter.length;i++)
{
document.write(" " + deter[i] + "," + " ");
}
document.write("<br>");
document.write("<br>");
</script>
<br>
<form>
<center>
<font size="+1">
Input Words: <input type = "text" name = "enter" size = "70">
</form>
<input name="parse" type="button" value="parse?">
</center>
</font>
</h4>
</font>
</body>
</body>
</html>
the output must be like this
choose from the words above
type it in the input box
click the button parse?
show results:
ex: she is mine
she-- pronoun
is-- preposition
mine-- pronoun

So there are a couple of points to this:
You have your code directly in a couple of script tags, this means it gets executed immediately when the page gets loaded - and obviously this is before anyone can enter the text.
You need to wrap your code into some sort of a function that then gets called on input:
<script>
function parseWords() {
//All of your code goes here
}
</script>
Then from your button you probably want to call this function I would assume when the
button is pressed.
<input name="parse" type="button" value="parse?" onclick="parseWords()">
Your text input needs an ID so we can get the data from it easily:
<input id="textInput" type = "text" name = "enter" size = "70">
Next you will have to get the data from the input and then split it up.
function parseWords() {
var myText = document.getElementById("textInput").value;
var myWords = myText.split(" ");
}
Now you have to loop over each of the words and find what type they are:
function parseWords() {
var myText = document.getElementById("textInput").value;
var myWords = myText.split(" ");
for (int i = 0; i < myWords.length; i++) {
// Check for your words here and generate the output
}
}
This is not the full solution, but these are the major points I see wrong with your code. I hope you can figure out the rest from here.

Categories