getElementsByTagName and then a.textContent returns "↵" on Li 3 every time - getelementsbytagname

<script>
function SearchVideosFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("SearchVideosInput");
filter = input.value.toUpperCase();
ul = document.getElementById("SearchVideosUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; ++i) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
I have the above script that runs on Keyup that searches the <li> in an <ul> which works brilliantly however on <li> number 0,1,2 it works fine then on 3 it returns txtValue = "↵" then continues to work fine from there
Ive tried moving content of <li> but it does not matter what happens it always returns the "↵" on the <li> 3
What on earth is causing this????

Related

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

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.

How to break the line with vue-typer without breaking word

I'm working with vue-typer and it adjusts on screen according to the space. But, depending the size of the screen, the vue-typer breaks the word. I want to break just when we have backspace. The code is:
<vue-typer
class="text-h4 font-weight-bold"
text="Nós acreditamos que o futuro pode ser incrível. Quer criar
ele com a gente?" :repeat='0'
></vue-typer><br>
Here is the image of how is working now

I dont know if anyone is still dealing with this issue, I have written a quick fix to the issue. Its not perfect but does the job.
You will run the text through a Method that will auto add in the line breaks automatically.
<div
style="
font-size: 30pt;
margin: auto;
color: white;
max-width: 600px;
"
ref="theRef"
>
<vue-typer
v-if="startTypers"
:text="[
formatText(
'TextHere',
'theRef',
22
),
]"
:repeat="0"
:shuffle="false"
initial-action="typing"
:pre-type-delay="70"
:type-delay="70"
:pre-erase-delay="2000"
:erase-delay="100"
erase-style="backspace"
:erase-on-complete="false"
caret-animation="blink"
></vue-typer>
</div>
mounted() {
setTimeout(() => {
this.startTypers = true;
}, 150);
}
The reason for the startTypers is because they will run the formatText method before the div has been rendered. Meaning you won't be able to get the clientWidth of the parent div.
formatText(text, ref, textSize = 22) {
let maxChars = Math.floor(this.$refs[ref].clientWidth / textSize);
let words = text.split(" ");
let breaked = "";
let currentCount = 0;
words.forEach((word) => {
currentCount += word.length;
currentCount += 1;
if (currentCount >= maxChars) {
currentCount = word.length;
breaked = `${breaked}\n${word} `;
} else {
breaked = `${breaked}${word} `;
}
});
return breaked;
},
The Parameters for formatText are the Text that you want to have the line breaks added in, The name of the ref, and the size of the span(Chars) that is rendered (22 was the default for the font and font-size I used in my use case, yours will vary)
Hopefully this helps

In order to break the text into chunks, consider the following
data() {
text : 'Hello World! I`m clarification masterjam!',
},
computed : {
textComputed() {
let n = "\n"
let breaked = this.text.match(/.{1,25}/g);
breaked[0];
var pos = breaked[0].lastIndexOf(' ');
breaked[0] = breaked[0].substring(0,pos)+n+breaked[0].substring(pos+1);
return breaked.join('')
},
}

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-->

ngIf on div containing dynamically generated compoent

I have a dynamically generated component which generates on run time. following is the .ts file
`#ViewChild(TermsheetDirective) termHost: TermsheetDirective;
#Input() term;
#Input() title = '';
#Input() Qnumber = '';
#Output() result = new EventEmitter<any>();
section_title = '';
number = '';
component = [];
show = false;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
}
ngOnInit() {
this.number = this.Qnumber;
this.section_title = this.title;
}
ngAfterViewInit() {
}
ngAfterContentInit() {
}
loadcomponents() {
console.log(this.termHost);
for (let j = 0; j < this.term.components.length; j++) {
let termItem = this.term.components[j];
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(termItem.component);
let viewContainerRef = this.termHost.viewContainerRef;
let componentRef = viewContainerRef.createComponent(componentFactory);
(<TermComponent>componentRef.instance).data = termItem.data;
this.component[j] = componentRef;
}
}
getdata() {
let output = [];
for (let i = 0; i < this.component.length; i++) {
let temp = {
slug : this.section_title,
type : this.component[i].type,
value : this.component[i]._component.getdata()
};
output[i] = temp;
}
this.result.emit(output);
return output;
}
showcomp() {
console.log("In if");
this.show = true;
this.loadcomponents();
}
hidecomp() {
this.show = false;
}`
and following is my html
`<div class="main">
<div class="div_for_ques">
<div class="question">
<div class="number">
{{number}}
</div>
<div class="textbox">
{{section_title}}
</div>
<div class="arrow" *ngIf="!show">
<a (click)="showcomp()" class="glyphicon"></a>
</div>
<div class="arrow" *ngIf="show">
<a (click)="hidecomp()" class="glyphicon"></a>
</div>
</div>
<div class="sec_two" *ngIf="show">
<ng-template term-host></ng-template>
</div>
</div>
</div>`
I want the div that contains the dynamically generated component to appear only when a certain button is clicked. but i am having following response.
But when I try to show this div without ngIf it is working fine. But with ngIf termHost is undefined! Can someone please explain what is happening here!

Well, you are trying to reference to viewContainerRef before change detection cycle has completed, that is why you get that error.
There is more than one solution to this, you can use a setter for the ViewChild, that will be called once after the *ngIf becomes true
e.g
#ViewChild('') set content(x:x) {
this.x = x;
}
OR you can inject the change detector manually
constructor(private changeDetector : ChangeDetectorRef) {}
You can then call it after you click your button
this.changeDetector.detectChanges();
OR You can also use a QueryList to achieve the same effect because you can subscribe to changes
Please apply these techniques to your logic to solve your problem

How to change text of each DIV class indivdually?

I am loading multiple DIV from Database
That my Javascript for click
<script type="text/javascript">
$(document).ready( function() {
var role = 0;
$(".role").click(function(){
if(role == 0)
{
role = 1;
$(".role").text("Decision Approver");
}
else if(role == 1)
{
role = 2;
$(".role").text("Decision Maker");
}
else if(role == 2)
{
role = 3;
$(".role").text("Influencer");
}
else if(role == 3)
{
role = 4;
$(".role").text("Gate Keeper");
}
else if(role == 4)
{
role = 5;
$(".role").text("User");
}
else if(role == 5)
{
role = 6;
$(".role").text("Stake-holder");
}
else if(role == 6)
{
role = 0;
$(".role").text("");
}
});
});
</script>
my CSS for the DIV "role"
{
position: absolute;
width: 50px;
min-height:20px;
height:auto;
border:1px solid #000;
word-wrap: break-word;
float:left;
font-size:12px;
z-index: 30;
margin-top:50px;
margin-left:3px;
}
This is the HTML
$qry = "SELECT * from contact";
$result = mysql_query($qry);
while ($row = mysql_fetch_array($result))
{
<div class="role" align="center" ></div>
}
Multiple DIV has been generated, when I click on one DIV role, all the DIV role change their text. How can I change each DIV individually and update them to database by contactID?

Assuming you want to use jQuery to do this client-side (and on this assumption I've no idea what the SQL is doing in either the tags or the question) I'd suggest using an array to contain the new text:
var textValues = ['Decision maker', 'Decision approver', 'influencer']; // and so forth
$('.role').text(function(i){
return textValues[i];
});
JS Fiddle demo.
The above will iterate over each of the .role elements, the i represents the index of the current element (amongst those other elements in the collection), and will set the text to that contained at the i position within the textValues array.
References:
text().

I think when you are updating the role, all conditions are met one after the other, so you need to include return false; that is similar to break;