Is there a way to update an HTML page with input from each prompt while continually prompting for multiple inputs? - while-loop

I am creating a JavaScript hangman game and am having trouble figuring out how I would prompt the user to guess the letters of the hangman puzzle, and then update the page with .innerHTML the guessed letter in place of the dashes I have on the screen.
I have a while loop set up to prompt for the guesses and do the work of placing the letters that are guessed in the length of the word, but it will prompt continually until more than 10 guesses are made and than print the dashes to screen.
This is the code that I am currently using.
function myGame()
{
var player_name = document.getElementById("player");
document.getElementById("user_name").innerHTML = "Welcome " + player_name.value + " to Wheel of Fortune";
var count = 0;
var phrase = "parseint";
var lgth = phrase.length; var checkWin = false; var correct_guess = false; var guess;
var numCols = lgth; new_word = ""; var crazyWord = ""; var new_word = ""; crzLgth = crazyWord.length;
for (var cols = 0; cols < numCols; cols++)
document.getElementById('wheel_game' + cols).innerHTML = ("/ ");
document.getElementById('hWord').innerHTML = "The word was " + (phrase);
while (checkWin === false && count < 10)
{
correct_guess = false;
guess = prompt("Guess a letter");
for (var j = 0; j < lgth; j++)
{
if (guess === phrase.charAt(j))
{
correct_guess = true;
count = count + 1;
document.getElementById('wheel_game' + j).innerHTML = guess;
for (var nw = 0; nw < lgth; nw++)
crazyWord = crazyWord + (document.getElementById('wheel_game' + nw).innerHTML);
}
new_word = crazyWord.substr((crzLgth - lgth), lgth);
checkWin = checkWord(phrase, new_word);
}
if (checkWin === true)
{
document.getElementById("result").innerHTML = ("You win!");
}
else if (checkWin === false)
{
document.getElementById("result").innerHTML = ("You Lose");
if (correct_guess === false)
count = count + 1;
if (count === 10)
{
guess = prompt("One last chance to guess the word");
}
if(guess.length !== 1 && guess !== "parseint") {
break;
}
else if(guess === 'parseint' && guess.length === 8) {
checkWin = true;
document.getElementById("result").innerHTML = ("You win!");
}
}
}
function checkWord(phrase, otherWord)
{
var cleanWord;
cleanWord = otherWord;
if (phrase === cleanWord)
return true;
else
return false;
}
}
Here is my HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Hangman">
<title>Hangman</title>
</head>
<body>
<h1>Welcome player</h1>
<p> Please Enter your name. </p>
<input type="text" id="player" onchange="myGame();" />
<p id="user_name"> </p> <br>
<div id="wheel_game0"></div> <br>
<div id="wheel_game1"></div> <br>
<div id="wheel_game2"></div> <br>
<div id="wheel_game3"></div> <br>
<div id="wheel_game4"></div> <br>
<div id="wheel_game5"></div> <br>
<div id="wheel_game6"></div> <br>
<div id="wheel_game7"></div> <br>
<div id="wheel_game8"></div> <br>
<div id="wheel_game9"></div> <br>
<div id="hWord"><p></p></div>
<div id="result"><p></p></div>
<script src="myScript_2.js"></script>
</body>
</html>
I tried using a continue statement because I thought that it would skip the iteration of the loop which would keep guessing but unfortunately that did not work. I essentially need the program to prompt the user to guess a letter and than display the letter in place of a dash but for every guess.
Any help would be appreciated.

Related

filter content with categories and keywords in vuejs

I am having a pretty big problem I have the following code and I have buttons to try to filter videos based on what category or keyword they have associated with them. However I am getting duplicates in the filter method I wrote. to make matters worse some of the content doesn't even display.
I have the following variables in my data property
data :{
loggedIn: true,
displayCount:36,
searchQuery:'',
templateArray:[],
filteredTemplateArray:[],
categories: [],
keywords:[],
selectedCategories:[],
selectedKeywords:[],
sortBy:''
},
when thea page loads templateArray and filteredTemplateArray are both equal to
[{"id":"7","itemId":"17520","itemName":"Arrow
Bounce","thumbName":"ARROWBOUNCE","dateAdded":"2016-05-20
16:33:42","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/ArrowBounce-Scott/arrowBounce.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":["LensFlare"]},{"id":"11","itemId":"38752","itemName":"Jitter
Zoom Flash","thumbName":"JITTERZOOMFLASH","dateAdded":"2016-05-23
13:49:03","renderTime":"45","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/JitterZoomFlash-Scott/JitterZoomFlash.aep","stillImageLocation":"2.66","categoryArray":["Sports"],"keywordArray":["Snow","Sparkles"]},{"id":"12","itemId":"12737","itemName":"Cloth
Drop","thumbName":"CLOTHDROP","dateAdded":"2016-05-23
14:11:42","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/ClothDrop-Scott/cloth
drop.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"15","itemId":"73076","itemName":"Colorful
Trans","thumbName":"COLORFULIMAGETRANS","dateAdded":"2016-05-27
10:16:56","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/ColorfulImageTrans-Scott/ColorfulImageTrans.aep","stillImageLocation":"12.90","categoryArray":[],"keywordArray":["Water","Sparkles"]},{"id":"16","itemId":"18488","itemName":"Convex
½
Circle","thumbName":"CONVEXHALFCIRCLE","dateAdded":"2016-05-27
10:38:20","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/convexHalfCircle-Scott/convex
half
circle.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"17","itemId":"67039","itemName":"Flag
Swap","thumbName":"FLAGBACKSWAP","dateAdded":"2016-06-01
15:34:22","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/FlagBackSwap-Scott/FlagBackSwap.aep","stillImageLocation":"5.83","categoryArray":[],"keywordArray":[]},{"id":"31","itemId":"70006","itemName":"Flag
Raise","thumbName":"FLAGRAISE","dateAdded":"2016-06-03
11:13:37","renderTime":"60","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/FlagRaise-Scott/flag.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"32","itemId":"58759","itemName":"Logo
Dust Poof","thumbName":"LOGODUSTPOOF","dateAdded":"2016-06-03
11:25:34","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/LogoDustPoof-Scott/LogoDustPoof.aep","stillImageLocation":"6.23","categoryArray":[],"keywordArray":[]},{"id":"33","itemId":"58967","itemName":"Flag
Wave (Loop)","thumbName":"FLAGWAVE","dateAdded":"2016-06-03
11:35:49","renderTime":"75","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/FlagWave-Scott/FlagWave.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"34","itemId":"65288","itemName":"Logo
Splash One","thumbName":"LOGOSPLASHONE","dateAdded":"2016-06-03
15:34:19","renderTime":"45","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/LogoSplashOne-Scott/LogoSplashOne.aep","stillImageLocation":"2.70","categoryArray":[],"keywordArray":[]},{"id":"35","itemId":"91246","itemName":"Metal
Sparks","thumbName":"METALSPARKS","dateAdded":"2016-06-06
10:58:29","renderTime":"60","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/MetalSparks-Scott/MetalSparks.aep","stillImageLocation":"4.63","categoryArray":[],"keywordArray":[]},{"id":"36","itemId":"57489","itemName":"Middle
Stripe","thumbName":"MIDDLESTRIPEABA","dateAdded":"2016-06-06
12:25:41","renderTime":"60","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/MiddleStripe-Scott/middleStripeABA.aep","stillImageLocation":"6.80","categoryArray":[],"keywordArray":[]},{"id":"37","itemId":"38402","itemName":"Water
One","thumbName":"WATERONE","dateAdded":"2016-06-07
09:10:32","renderTime":"60","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/waterOne-Scott/waterOne.aep","stillImageLocation":"8.83","categoryArray":[],"keywordArray":[]},{"id":"39","itemId":"81031","itemName":"Oval
Text Flip","thumbName":"OVALTEXTFLIP","dateAdded":"2016-05-07
09:10:32","renderTime":"150","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/OvalTextFlip-Scott/OvalTextFlip.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"40","itemId":"55143","itemName":"Close
Up Text","thumbName":"CLOSEUPTEXT","dateAdded":"2016-07-05
09:10:32","renderTime":"85","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/CloseUpText-Scott/CloseUpText/CloseUpText.aep","stillImageLocation":"9.03","categoryArray":[],"keywordArray":[]},{"id":"41","itemId":"54335","itemName":"Electric
Text Spin","thumbName":"ELECTRICTEXTSPIN","dateAdded":"2016-07-13
09:10:32","renderTime":"60","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/ElectricTextSpin-Scott/ElectricTextSpin/ElectricTextSpin.aep","stillImageLocation":"1.47","categoryArray":[],"keywordArray":[]},{"id":"42","itemId":"23761","itemName":"Digital
Glitch","thumbName":"DIGITALGLITCH","dateAdded":"2016-09-19
09:10:32","renderTime":"60","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/DigitalGlitch-Scott/DigitalGlitch.aep","stillImageLocation":"3.43","categoryArray":["Retail"],"keywordArray":[]},{"id":"43","itemId":"56465","itemName":"Takeover","thumbName":"TAKEOVER","dateAdded":"2016-09-30
14:10:32","renderTime":"80","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/TakeOver-Scott/TakeoverProject/takeoverproject.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"44","itemId":"17127","itemName":"Fire
One","thumbName":"FIREONE","dateAdded":"2016-11-04
14:10:32","renderTime":"25","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/FireOne-Scott/FireOne.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"53","itemId":"61617","itemName":"City
Spin","thumbName":"CITYSPIN","dateAdded":"2016-11-09
14:17:15","renderTime":"45","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2016/CitySpin-Scott/cityspin.aep","stillImageLocation":"8.933","categoryArray":["Church"],"keywordArray":[]},{"id":"56","itemId":"15528","itemName":"Magic
Colors","thumbName":"MAGICCOLORS","dateAdded":"2016-11-10
13:10:26","renderTime":"30","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/MagicColors-Scott/MagicColors.aep","stillImageLocation":"3.966","categoryArray":[],"keywordArray":[]},{"id":"61","itemId":"59239","itemName":"Quick
and Simple","thumbName":"QUICKNSIMPLE","dateAdded":"2016-11-14
11:42:09","renderTime":"15","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/QuickNSimple-Scott/QuickNSimple.aep","stillImageLocation":"2.033","categoryArray":[],"keywordArray":[]},{"id":"62","itemId":"82460","itemName":"Fast
Blast","thumbName":"FASTBLAST","dateAdded":"2016-11-22
10:24:48","renderTime":"30","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/FastBlast-Scott/FastBlast.aep","stillImageLocation":"9.666","categoryArray":[],"keywordArray":[]},{"id":"63","itemId":"83530","itemName":"Tunnel
Spin","thumbName":"TUNNELSPIN","dateAdded":"2016-12-02
13:09:06","renderTime":"20","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/tunnelSpin-Scott/tunnelSpin.aep","stillImageLocation":"2.9","categoryArray":[],"keywordArray":[]},{"id":"64","itemId":"94148","itemName":"Sparkle
Splash","thumbName":"SPARKLESPLASH","dateAdded":"2016-12-20
11:23:26","renderTime":"45","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2016/SparkleSplash-Scott/SparkleSplash.aep","stillImageLocation":"6.1","categoryArray":[],"keywordArray":[]},{"id":"69","itemId":"98640","itemName":"Gold
Bling","thumbName":"GOLDBLING","dateAdded":"2017-01-10
08:16:41","renderTime":"30","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2017/GoldBling-Joe/GoldBling.aep","stillImageLocation":"2.66","categoryArray":[],"keywordArray":[]},{"id":"72","itemId":"94169","itemName":"Top
Racer","thumbName":"TOPRACER","dateAdded":"2017-02-15
09:46:14","renderTime":"30","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2017/TopRacer-Scott/TopRacer.aep","stillImageLocation":"7.833","categoryArray":[],"keywordArray":[]},{"id":"73","itemId":"55871","itemName":"Desert
Sand","thumbName":"DESERTSAND","dateAdded":"2017-02-15
14:04:49","renderTime":"45","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2017/DesertSand-Scott/DesertSand.aep","stillImageLocation":"10.46","categoryArray":[],"keywordArray":[]},{"id":"76","itemId":"18897","itemName":"Electric
Storm","thumbName":"ELECTRICSTORM","dateAdded":"2017-02-23
12:43:08","renderTime":"45","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2017/ElectricStorm-Scott/ElectricStorm.aep","stillImageLocation":"4.333","categoryArray":[],"keywordArray":[]},{"id":"78","itemId":"24052","itemName":"Court
Smash","thumbName":"COURTSMASH","dateAdded":"2016-06-03
12:03:48","renderTime":"90","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/CourtSmash-Scott/CourtSmash.aep","stillImageLocation":"5.933","categoryArray":[],"keywordArray":[]},{"id":"81","itemId":"43553","itemName":"Tile
Flip","thumbName":"TILEFLIP","dateAdded":"2017-04-25
16:40:41","renderTime":"60","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/TileFlip-Chris/TileFlip_Final/TileFlip_Final.aep","stillImageLocation":"5","categoryArray":[],"keywordArray":[]},{"id":"88","itemId":"94677","itemName":"NEON
LIGHTS","thumbName":"NEONLIGHTS","dateAdded":"2017-04-28
10:06:23","renderTime":"45","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2017/NEONLIGHTS-Joe/NeonLights.aep","stillImageLocation":"2.53","categoryArray":[],"keywordArray":[]},{"id":"89","itemId":"64305","itemName":"Engine
(Loop)","thumbName":"ENGINE","dateAdded":"2017-05-15
11:37:07","renderTime":"60","tested":"1","projectPath":"O:/Projects/Generics/CreativeEngine/2017/Engine-Scott/Engine.aep","stillImageLocation":"4.67","categoryArray":[],"keywordArray":[]},{"id":"90","itemId":"11287","itemName":"Energy
Core","thumbName":"ENERGYCORE","dateAdded":"2017-05-22
13:08:40","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/EnergyCore-Scott/EnergyCore.aep","stillImageLocation":"6.73","categoryArray":[],"keywordArray":[]},{"id":"91","itemId":"48745","itemName":"Football
Helmet","thumbName":"FOOTBALLHELMET","dateAdded":"2017-07-03
16:09:42","renderTime":"120","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/FootballHelmet-Scott/FootballHelmet.aep","stillImageLocation":"7","categoryArray":[],"keywordArray":[]},{"id":"92","itemId":"85515","itemName":"Light
Shine","thumbName":"LIGHTSHINE","dateAdded":"2017-08-18
14:09:50","renderTime":"30","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/LightShine-Scott/LightShine.aep","stillImageLocation":"2","categoryArray":[],"keywordArray":[]},{"id":"93","itemId":"61876","itemName":"Baseball
Dirt","thumbName":"BASEBALLDIRT","dateAdded":"2017-08-31
10:31:22","renderTime":"40","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/BaseballDirt-Scott/BaseballDirt.aep","stillImageLocation":"7.27","categoryArray":[],"keywordArray":[]},{"id":"94","itemId":"48066","itemName":"Spooky","thumbName":"SPOOKY","dateAdded":"2017-09-01
13:58:36","renderTime":"15","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/Spooky-Jake/Spooky.aep","stillImageLocation":"2","categoryArray":["Sports"],"keywordArray":[]},{"id":"95","itemId":"33584","itemName":"Get
Loud","thumbName":"GETLOUD","dateAdded":"2017-09-07
11:58:02","renderTime":"45","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/GetLoud-Scott/GetLoud.aep","stillImageLocation":"1.77","categoryArray":[],"keywordArray":[]},{"id":"96","itemId":"21713","itemName":"STAR
BURST","thumbName":"STARBURST","dateAdded":"2017-10-19
18:20:29","renderTime":"15","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/StarBurst-Joe/StarBurst.aep","stillImageLocation":"0","categoryArray":[],"keywordArray":[]},{"id":"97","itemId":"76554","itemName":"Magic
Twirl","thumbName":"MAGICFINAL","dateAdded":"2017-10-26
11:19:52","renderTime":"20","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/Magic-Lillie/Magic.aep","stillImageLocation":"825","categoryArray":[],"keywordArray":[]},{"id":"98","itemId":"64452","itemName":"Sports
Car","thumbName":"SPORTSCAR","dateAdded":"2017-10-27
10:26:32","renderTime":"60","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/SportsCar-Scott/SportsCar.aep","stillImageLocation":"14.77","categoryArray":[],"keywordArray":[]},{"id":"99","itemId":"15074","itemName":"Ice
Logo","thumbName":"ICELOGO","dateAdded":"2017-11-01
11:53:48","renderTime":"45","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/IceLogo-Scott/IceLogo.aep","stillImageLocation":"9.33","categoryArray":[],"keywordArray":["LensFlare"]},{"id":"100","itemId":"95033","itemName":"Hot
Air Balloon","thumbName":"BALLOON","dateAdded":"2017-11-02
08:10:22","renderTime":"10","tested":"1","projectPath":"M:/Projects/Generics/CreativeEngine/2017/Balloon-Lillie/Balloon.aep","stillImageLocation":"567","categoryArray":[],"keywordArray":[]},{"id":"231","itemId":"bb39f253c6c237ecf5d86ced4e8bcdec","itemName":"test","thumbName":"TEST","dateAdded":"2018-09-28
18:35:08","renderTime":"4","tested":"0","projectPath":"M:/Projects/Generics/uploads/testLocation","stillImageLocation":"0.13","categoryArray":["Sports","Misc","Holiday"],"keywordArray":{"0":"LensFlare","2":"Snow","5":"Water"}}]
categories looks like this
["Holiday","Sports","Misc","Automotive","Retail","Financial","Church","Community","Food"]
keywords is the same as categories just different values
when a button is clicked selectedCategories begins to fill up with an array that looks like this :
0: "Holiday"
selectedKeywords like this (if its a keyword button instead of a category):
0: "lensFlare"
when a button gets pressed filteredTemplates looks like this in the vue inspector:
> filteredTemplateArray:Array[1] 0:Object categoryArray:Array[3]
> 0:"Sports" 1:"Misc" 2:"Holiday" dateAdded:"2018-09-28 18:35:08"
> id:"231" itemId:"bb39f253c6c237ecf5d86ced4e8bcdec" itemName:"test"
> keywordArray:Object
> projectPath:"M:/Projects/Generics/uploads/testLocation" renderTime:"4"
> stillImageLocation:"0.13" tested:"0" thumbName:"TEST"
I have the following method filtering the items when pressed but its not working how would ya'all change it so that all the items show up and items are filtered properly?
filter: function() {
var filteredCategoryArray = [];
var filteredKeywordArray = [];
if(this.selectedCategories.length != 0) {
for(var i = 0; i < this.templateArray.length; i++) {
for(var j = 0; j < this.selectedCategories.length; j++ ) {
for(var k = 0; k < this.templateArray[i].categoryArray.length; k++ ) {
if(this.templateArray[i].categoryArray[k] == this.selectedCategories[j]) {
var arrayDuplicate = false;
for(var l = 0; l < filteredKeywordArray.length; l++) {
if(filteredCategoryArray[l].id == this.templateArray[i].id) {
arrayDuplicate = true;
}
}
if(arrayDuplicate == false) {
filteredCategoryArray.push(this.templateArray[i]);
}
}
}
}
}
} else {
for(var i = 0; i < this.templateArray.length; i++){
filteredCategoryArray.push(this.templateArray[i]);
}
}
if(this.selectedKeywords.length != 0) {
for(var i = 0; i < filteredCategoryArray.length; i++) {
for(var j = 0; j < this.selectedKeywords.length; j++ ) {
for(var k = 0; k < filteredCategoryArray[i].keywordArray.length; k++ ) {
if(filteredCategoryArray[i].keywordArray[k] == this.selectedKeywords[j]) {
var arrayDuplicate = false;
for(var l = 0; l < filteredKeywordArray.length; l++) {
if(filteredKeywordArray[l].id == filteredCategoryArray[i].id) {
arrayDuplicate = true;
}
}
if(arrayDuplicate == false) {
filteredKeywordArray.push(filteredCategoryArray[i]);
}
}
}
}
}
} else {
for(var i = 0; i < filteredCategoryArray.length; i++){
filteredKeywordArray.push(filteredCategoryArray[i]);
}
}
if(this.sortBy == "az") {
filteredKeywordArray.sort(function(a,b) {
if(a.itemName > b.itemName) {
return 1;
}
if(a.itemName < b.itemName) {
return -1;
}
return 0;
});
}
if(this.sortBy == "dateAdded") {
filteredKeywordArray.sort(function(a,b) {
if(a.dateAdded < b.dateAdded) {
return 1;
}
if(a.dateAdded > b.dateAdded) {
return -1;
}
return 0;
});
}
if(this.sortBy == "renderTime") {
filteredKeywordArray.sort(function(a,b) {
return parseInt(a.renderTime) - parseInt(b.renderTime);
});
}
this.filteredTemplateArray = filteredKeywordArray;
$('html,body').scrollTop(0);
},
heres the front end loop to show the videos
<div class="row">
<div v-cloak v-bind:key="template.itemId + '_' + index" v-for="(template, index) in searchResults" class="col-md-4">
<div class="card">
<video muted :src="'mysource'" controls preload="none" controlsList="nodownload nofullscreen" :poster="mysource" loop="loop"></video>
<div class="card-body">
<p class="card-title">{{template.itemName}}</p>
<!--end card-title-->
<p v-show="displayCount==0" class="card-text">Please create a display to customize</p>
<!--end user has no display card-text-->
<p v-show="displayCount>0" class="card-text">Custom Text, Custom Colors, Upload Logo</p>
<!--end user has display card text-->
<p class="card-text">{{template.renderTime}} minutes</p>
Customize
<!--logged in and has display button-->
<a href="#" v-show="loggedIn==false" class="btn btn-primary btn-block" disabled>Customize</a>
<!--not logged in button-->
Create A Display
</div>
<!--end card-body-->
</div>
<!--end card-->
</div>
<!-- end col-md-4-->
</div>
<!--end row-->

fix cut tile javascript

i have code cut tile:
TITL1 - TITLE2 [XXX]
var Enumber1 = new Array();
$("#id").each(function(i){
var text = $(this).text();
if(text.indexOf('[') != -1 || text.indexOf(']') != -1){
var Ntext1 = text.split('[')[0];
Enumber1[i] = text.split('[')[1].split(']')[0];
$(this).text(Ntext1);
}
});
$("#id").each(function(i){
$(this).fadeIn("slow");
if(Enumber1[i] != undefined){
$(this).text(Enumber1[i]);
}else{
$(this).css('N/A');
}
});
TITLE1 -TITL2 >>> div class="title"
[XXX] >>> div class="cut"
DEMO: https://jsfiddle.net/bro69zvb/
Help me fix it
TILE1 in >>> in
2.TITLE >>> in
XXX >>> in
thanks!!!

Use this in your script area:
var Enumber1 = new Array();
var longOfArray=0;
$(".title").each(function(i){
var text = $(this).text();
var res = text.replace(" -","");
res = res.split(" ");
//res contains "title1,title2,[xxx]"
longOfArray = res.length;
//lenght of this array is 3
Enumber1 = res;
//stored into your array
$(".title").html("");
//emptied first title
});
$(".cut").each(function(i){
//iterate through array to fill .cut div
for(i=0;i<longOfArray; i++){
if(Enumber1[i].indexOf("[")!=-1){
//remove first lash [
var firstLash = Enumber1[i].indexOf("[");
Enumber1[i] = Enumber1[i].substring(firstLash+1);
}
if(Enumber1[i].indexOf("]")!=-1){
//remove last lash ]
var lastLash = Enumber1[i].indexOf("]");
Enumber1[i] = Enumber1[i].substring(0,lastLash);
}
$(".cut").append("<p>"+(i+1)+" "+Enumber1[i]+"</p>");
}
});
Being your html like this:
<div class="title">
Title1 - Title2 [XXX]
</div>
<div class="cut">
</div>

Restricting input to textbox: allowing only numbers and decimal point in Titanium

How can I restrict input to a text-box so that it accepts only numbers and the decimal point?

var textField = Ti.UI.createTextField({
top : 20,
left : 10,
right : 10,
height : 60,
keyboardType : Ti.UI.KEYBOARD_NUMBER_PAD
});
Window.add(textField);
With the help of property keyboardType : Ti.UI.KEYBOARD_NUMBER_PAD you can restrict input of a text-box so that it accepts only numbers and the decimal point

Here is a jsfiddle made by another user of this site, ShreejiShah: http://jsfiddle.net/4HHeQ/
Here is the original question: How to make HTML input tag only accept numbers?
It uses jQuery to detect keystrokes,
jQuery("#myId").keydown(function(event) {
// Allow: backspace, delete, tab, escape, enter and .
if ( jQuery.inArray(event.keyCode,[46,8,9,27,13,190]) !== -1 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
And if the key isn't a number, backspace, delete, tab, escape, enter or . it "prevents default" action, which would be to show the inputted character in the textbox.
Once again, this is not my code, but it is absolutely brilliant, so I use it hopefully without offending anyone.

you can use below function to validate numbers and digit.
function isDigit(number) {
var letters = /^[0-9. ]+$/;
var bl = false;
if (number.match(letters)) {
bl = true;
}
return bl;
}
Ti.API.info(isDigit("12ass40.12456"));
Ti.API.info(isDigit("12350.12456"));
this is just an example but you can call this function on change event of textField to validate.

Use this:
<html>
<head>
<script>
function removeNumbers(textbox) {
textbox.value = textbox.value.replace(/[^\0-9]/g, "");
}
</script>
</head>
<body>
<input onKeyPress="removeNumbers(this)">
</body>
</html>

Here we go! I did this in my code! Enjoy it
<html>
<head>
<script>
function replacePonto(){
var input = document.getElementById('qtd');
var ponto = input.value.split('.').length;
if (ponto > 2)
input.value=input.value.substr(0,(input.value.length)-1);
input.value=input.value.replace(/[^0-9.]/,'');
if (ponto ==2)
//this limit how much numbers after decimal point
input.value=input.value.substr(0,(input.value.indexOf('.')+3));
if(input.value == '.')
input.value = "";
}
</script>
</head>
<body>
<input type="text" id="qtd" maxlength="10" style="width:140px" onkeyup="return replacePonto()">
</body>
</html>

Here is perfect for me:
function validateNumberDouble(event) {
var n = event.key;
k = event.keyCode;
v = event.target.value;
if (k === 8 || k === 37 || k === 39 || k === 9 || k === 13) {
return true;
} else {
var dot = v.split('.').length;
if ((dot > 1 && n == '.') || (v.length == 0 && dot >= 1 && n == '.')) {
return false;
} else {
if (n.match(/[^0-9.]/)) {
return false;
}else{
if(v.indexOf('.')>0 && v.length - v.indexOf('.')>=3){
return false;
}
}
}
}
}
https://jsfiddle.net/renatoalexandro/rdeu4n1m

Getting data from another page using XMLHttpRequest

Good morning everyone. I tried creating a site that could get information from another page and feed the response into a div tag, but it didnt work. I checked with a very similar one i learnt from. Here is the HTML code.
<html>
<head>
<script>
function checkit(){
var samxml; var username;
if (window.XMLHttpRequest){
samxml = new XMLHttpRequest();}
else {
samxml = new ActiveXObject("Microsoft.XMLHTTP");
}
samxml.onreadystatechange = function() {
if (samxml.readyState == 4 && samxml.status == 200){
document.getElementById("check").innerHTML = samxml.responseText;}
}
username = document.getElementById("username").value;
samxml.open("POST", "check.php",true);
samxml.send( "username" );
}
}
</script>
</head>
<body>
<form>
<label for ="username">User ID:</label>
<input type = "text" name = "username" id = "username"/>
<div id = "check"></div>
<button type = "button" onclick = "checkit()">Check</button>
</form>
</body>
</html>
Here is the PHP page:
//php file
<?php
$user = $_POST["username"];
if ($user == "samuel") {
echo "Hmm. Chosen! Choose another one";}
else {
echo "Nice one";}
?>
Thanks so much.

Getting storageVolume to work in JavaScript

In his blog post, Christian Cantrell shows how to use STORAGE_VOLUME_MOUNT in ActionScript.
He has written a Flex app called FileTile.
I would like to see a JavaScript alert box that says “You have inserted “ + e.storageVolume.name, and “You have removed a storage volume”.

<html>
<head>
<title>New Adobe AIR Project</title>
<script type="text/javascript" src="lib/air/AIRAliases.js"></script>
<script type="text/javascript" src="lib/air/AIRIntrospector.js"></script>
<script type="text/javascript" src="lib/jQuery/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
var msg = '<h1>Please insert your SwatchDog (SD) card.</h1>';
function trace() {
var message = 'Hello Max';
air.Introspector.Console.log(message);
}
function readFile(v) {
var myFile = air.File.desktopDirectory.resolvePath("MyFile.txt");
var fileStream = new air.FileStream();
fileStream.open(myFile, air.FileMode.READ);
$('#app').append('<p>' + fileStream.readUTFBytes(fileStream.bytesAvailable) + '</p>');
fileStream.close();
}
function onVolumeMount(e) {
$('#app').html('<h1>Thank you</h1><p>I can see you have multiple devices:</p>');
var volumes = air.StorageVolumeInfo.storageVolumeInfo.getStorageVolumes();
for (var i = 0; i < volumes.length; i++) {
$('#app').append(volumes[i].rootDirectory.nativePath);
}
if (e.storageVolume.isRemovable) {
if (e.storageVolume.name == 'SWATCHDOG') {
$('#app').append('<p>And SwatchDog is drive: ' + e.storageVolume.rootDirectory.nativePath + '</p>');
readFile(e.storageVolume)
} else {
$('#app').append('<p>But the one you just plugged in is not SwatchDog.</p>');
}
}
}
function onVolumeUnmount(e) {
$('#app').html('<h1>Goodbye!</h1>' + msg);
}
jQuery(function($){
var PluggedIn = false;
var volumes = air.StorageVolumeInfo.storageVolumeInfo.getStorageVolumes();
for (var i = 0; i < volumes.length; i++) {
if (volumes[i].isRemovable) {
PluggedIn = true;
if (volumes[i].name == 'SWATCHDOG') {
$('#app').append('I see you already have SwatchDog plugged in!');
readFile(volumes[i])
} else {
$('#app').append('What you have plugged in is not SwatchDog.');
}
}
}
if (!PluggedIn){
$('#app').append(msg);
}
air.StorageVolumeInfo.storageVolumeInfo.addEventListener(air.StorageVolumeChangeEvent.STORAGE_VOLUME_MOUNT, onVolumeMount);
air.StorageVolumeInfo.storageVolumeInfo.addEventListener(air.StorageVolumeChangeEvent.STORAGE_VOLUME_UNMOUNT, onVolumeUnmount);
})
</script>
</head>
<body>
<div id="app">
</div>
<button onclick="trace();">Say Hello Max!</button>
</body>
</html>