Develop Reference

Javascript to enter data into name cards

I have a name card under a class and id named "column" . I have used the clone function with a for loop in JavaScript to increase the number of name cards so that i don't have to retype the code every time I create a new card. How do i access each name card and Enter/Edit the data inside each name card using JavaScript? Where ever i need to Enter data i have entered "DATA HERE" in the code below. At the moment I have 8 name cards using the clone property. As i am new to this, i don't know if this is the best way to do this. If there is a better way please let me know. Thanks a lot.
MAIN GOAL: i want to show different data in different name cards, but i don't want to rewrite the HTML code for each name card as the HTML code becomes very long. For example Name card 1 will have different data to name card 2.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
e.clone[i].attr('id', 'clone' + i++);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header"> <h3>"DATA HERE" </h3> </div>
<div class="location">
<h1><ion-icon class ="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post" > <p>
<button type="button" class="button3"> LIGHTS</button></a>
<button class="button">ON</button> </p>
</form>
<form method="post" > <p>
<button type="button" class="button2">OFF</button> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>

OK now, you can use querySelectorAll to find the .column class, then you can set your code to each selector with it's index, starting from 0 to the 1st and ends with 7 in your case ..
here is an example for what i mean
try the snippet
EDIT: changed the snippet with all required areas.
here is an example of all content control on the 1st container, you can use what you need
Try the snippet.
$(document).ready(function() {
var e = $('.column');
for (var i = 0; i < 7; i++) {
e.clone().insertAfter(e);
}
//selecting the first Container with variables
const allcls = document.querySelectorAll('.column');
const chld = allcls[0].querySelector('.header > h3');
const chld2 = allcls[0].querySelector('.location > h1');
const chld3 = allcls[0].querySelectorAll('form');
const frmchld = chld3[0].querySelector('p :nth-child(2)');
const frmchld2 = chld3[1].querySelector('p :nth-child(1)');
const chld4 = allcls[0].querySelectorAll('.icon-bar .active');
const chld5 = allcls[0].querySelectorAll('.icon-bar2 .active');
/* set data for each element */
//.header text with new style
chld.innerText = "New Text for Header";
chld.style.color = 'gray';
chld.style.textAlign = 'center';
chld.style.margin = 'auto';
chld.style.padding = '1rem';
chld.style.background = 'darkblue';
chld.style.width = 'max-content';
chld.style.border = '1px solid darkgray';
//.location text with new color
chld2.innerText = 'Location text';
chld2.style.color = 'darkblue';
//ON button link + name
frmchld.setAttribute('onClick', '#NEWLINK_FOR_ON');
frmchld.innerText = "ON Button";
//off button link + name
frmchld2.setAttribute('onClick', '#NEWLINK2_FOR_ON');
frmchld2.innerText = "OFF Button";
//icon-bar links ( names + href )
chld4[0].innerText = "Iconbar Link1";
chld4[1].innerText = 'Iconbar link2';
chld4[2].innerText = 'Iconbar link3';
chld4[3].innerText = 'Iconbar link4';
chld4[0].setAttribute('href', '#Link_1');
chld4[1].setAttribute('href', '#Link_2');
chld4[2].setAttribute('href', '#Link_3');
chld4[3].setAttribute('href', '#Link_4');
//icon-bar2 links ( names + href )
chld5[0].innerText = "Iconbar2 Link1";
chld5[1].innerText = 'Iconbar2 link2';
chld5[2].innerText = 'Iconbar2 link3';
chld5[0].setAttribute('href', '#Link_1');
chld5[1].setAttribute('href', '#Link_2');
chld5[2].setAttribute('href', '#Link_3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" id="column">
<div class="container">
<div class="header">
<h3>"DATA HERE" </h3>
</div>
<div class="location">
<h1>
<ion-icon class="icon1" name="location-outline" class="nav__icon"></ion-icon> "DATA HERE" </h1>
</div>
<form method="post">
<p>
<button type="button" class="button3"> LIGHTS</button>
<button class="button" onClick="#">ON</button> </p>
</form>
<form method="post">
<p>
<button type="button" class="button2" onClick="#">OFF</button> </p>
</form>
<div class="icon-bar">
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
<div class="icon-bar2">
<a class="active" href="#"> "DATA HERE" </a>
<a class="active" href="#">"DATA HERE"</a>
<a class="active" href="#">"DATA HERE"</a>
</div>
</div>
</div>

i dont know the final porpose of your problem, but i'm assuming you are trying to do that:
$(document).ready(function() {
var e = document.getElementById("column");
for (var i = 0; i < 7; i++) {
var newe=e.cloneNode(true);
document.body.insertAdjacentElement('beforeend', newe);
newe.id="column"+i;
}
hope it helps, probably you are learning but if the data comes from a database this workaround you are trying doing is usless (you will print trough a function this HTML.
Keep Growing, Plus Ultra!!!

Clone LI div so it is placed after the original LI instead of end

I want to be able to click on an item and clone it immediately after that item, At moment it always Clones to the END, id adds it after the last LI in list.
I created a jsFiddle here jsfiddle test
JS
const curId = 20;
function cloneIt(){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),
newId
));
$("#ulContainer").append(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt();
alert('item cloned');
e.preventDefault();
});
HTML
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>

You can try using .after() by passing the event to the function:
Insert content, specified by the parameter, after each element in the set of matched elements.
Change
$("#ulContainer").append(newCloned);
To
$(e.target.closest('li')).after(newCloned);
const curId = 20;
function cloneIt(e){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),newId));
$(e.target.closest('li')).after(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt(e);
alert('item cloned');
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>

how can i show the hidden content in jquery?

I want to hide all the content and show some content as the user click.
In anchor tag I used 'scr' before its id example: scrhome_screen.
But in div tag that I want to show has id home_screen.
Please explain why it is not working?
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
----------edit-------------------
my html code
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if(id.substring(0, 3)=="scr"){
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll(){
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide(); //this is working
// document.getElementById("home_screen").style.display = "none";
// document.getElementById("sec_screen").style.display = "none";
// document.getElementById("third_screen").style.display = "none";
}
function showTab(divName){
console.log(divName);
$('#'+divName).show(); // it think this line is not working
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<!-- MENU STARTS HERE -->
<ul id="menu">
<li><a href="#" id='scrhome_screen'>Home</a></li>
<li>
New/Open Project
<ul class="hidden">
<li><a href="#" id='scrsec_screen'>New Project</a></li>
<li><a href="#" id='scrthird_screen'>Open Project</a></li>
</ul>
</li>
<li>
Region
<!-- <ul class="hidden">
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul> -->
</li>
<li>Insurance Indices</li>
<li>Insurance Scheme</li>
<li>Help</li>
</ul>
<!-- HOME STARTS HERE -->
<div id="home_screen">
<div id="description">
<fieldset>
<p class="descriptionHead">Crop-loss Assessment Monitor Toolbox (CAM)</p>
<p id="descritionText">CAM toolbox is specifically designed to estimate prevented sowing, sowing failure and yield loss occurring in a geographical area. The tool has been also embedded with financial viability analytics which determines farmers’ premium, maximum claim,
claim ratio etc. The CAM tool can also be used to test the important indicators to assess the feasibility of an insurance scheme. Moreover, loss assessment from multiple methods also enables a comparison of risk coverage under different technologies
and their subsequent effect on the economics of the insurance scheme.</p>
</fieldset>
</div>
<hr id="ver_line" width="1" size="200">
<div id="login_signup">
<fieldset>
<p class="descriptionHead">LOGIN</p>
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
</fieldset>
</div>
</div>
<!-- 2nd FIELDSETS -->
<div id="sec_screen">
<p>another content is here</p>
</div>
<!-- 3rd FIELDSETS -->
<div id="third_screen">
<p>third content is here</p>
</div>

In your code this <li><a href="#" id='scrhome_screen')>Home</a></li> paranthesis is unwanted, it may be the reason. And then again <li><a href="#" id='scrthird_screen')>Open Project</a></li>
Here is another mistake
<form>
<p id="loginBody">
<input type="text" class="loginForm" placeholder="Login Id"><br>
<input type="password" class="loginForm" placeholder="Password"><br>
<input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>
Tags are closed in the wrong order
Your js works, I did not change anything.
By the way in .substr you can just do id.substring(3) instead of id.substring(3,id.length)
hideAll();
showTab("home_screen");
$(document).ready(function() {
$("a").click(function() {
var id = $(this).attr('id');
if (id.substring(0, 3) == "scr") {
hideAll();
showTab(id.substring(3,id.length));
}
});
});
function hideAll() {
$('#home_screen').hide();
$('#sec_screen').hide();
$('#third_screen').hide();
}
function showTab(divName) {
$('#' + divName).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home_screen">home_screen</div>
<div id="sec_screen">sec_screen</div>
<div id="third_screen">third_screen</div>
home_screen
sec_screen
third_screen

how to filter elements by name

I have 3 movies, (Annihilation, Bomb x City and The Commuter), i don't know hot to put javascript code so when i start to search like for "ann" that only annihilation movie box appear and other not displayed...like filtering...please help i am not so good at this stuff and i want to learn.Thanks in advance.
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>

Probably the best way to do this is to use js libraries as angular or react.
but here is an simple example for vanila js using oninput event:
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search..." oninput="filterMovies(this.value)">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="movies_boxes_container" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
<script>
function filterMovies(val){
val = val.toUpperCase();
let moviesBoxes = document.getElementsByClassName('moviebox');
Array.prototype.forEach.call(moviesBoxes, child => {
let id = child.id.toUpperCase()
if(!id.includes(val))
child.style.display = "none";
else{
child.style.display = "block";
}
});
}
</script>

This alternative uses the functions querySelector and querySelectorAll
to find the elements and make the necessary comparison.
This approach uses the function indexOf to find the matches.
This approach uses a class called hide to hide the elements who don't match the entered value.
This approach is case-sensitive.
Use the event input to capture any changes from your input text field.
document.getElementById('filterInput').addEventListener('input', function() {
var value = this.value;
var container = document.getElementById('boxes');
Array.prototype.forEach.call(container.querySelectorAll('.moviebox'), function(e) {
e.classList.add('hide');
Array.prototype.forEach.call(e.querySelectorAll('.namemovie'), function(m) {
if (value.trim() === '' || m.textContent.indexOf(value) !== -1) e.classList.remove('hide');
});
})
})
.hide {
display: none
}
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="namemovie">Annihilation</h3>
<p class="genremovie">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>

You have to implement a Filter/Search List.
There are countless ways to solve this problem but I will put here a complete example coming from w3schools.com
Here's the relevant example, all the code (css / javascript) is embedded in a single html page for the sake of simplicity.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>
This implementation is using a for cycle to loop all the items in the list in search of the position of the characters we are searching: .indexOf(filter) and showing / hiding the current item accordingly.
A few basic concepts that combined together can achieve such a user friendly and powerful use.
As first thing I'd suggest you to separate those functional units in different files writing the parts completely and answering to any question or doubt or unclear information you read.
Write the code in the new files by hand, letter by letter.
Read it, no copy and paste.
I've preferred to put a suggestion instead of a solution because your main request seems to be that you want to learn.
Once you can disassemble / reassemble this code it will also be easy to implement it in your current page.
Take time, answer your own questions, start a course, get books, never give up.
Have fun!

Some html:
<input id='search' type='text'>
<div id='hold_movies'>
<a class='movie'>Annihilation</a><br>
<a class='movie'>Bomb x City</a><br>
<a class='movie'>The Commuter</a>
</div>
Some jQuery:
$("#search").keyup(function() {
val = $.trim(this.value);
if (val === "") {
$('.movie').show();
} else {
$('.movie').hide();
$(".movie:contains(" + val + ")").show();
}
});
Result:
To ensure the search is case-insensitive you can extend jQuery as follows:
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});

Here is what I came up with. this is a good little project to learn some JS! you should try doing something next where you automate the creation of the html given an array of movies. It might be a bit heavy for what you're doing, but React is a neat JS library that's worth looking into and learning about.also be careful about classnames with a . in them. You usually dont want to do that. (looking at your container class)
// grab all the movies
let movies = document.getElementsByClassName('moviebox');
//this returns an object we want an array
//with all the names in it. so lets call OBject.keys() which will
//return an array with all the keys of this object
movies = Object.keys(movies)
.map(key => movies[key].id);
// what we did was loop through the keys, (0,1,2) and index into the object with them (movies[key]). then since hte id is the name of the movie it seems, we just grab the id (movies[key].id) we then save this update array into the already defined movies array.
console.log(movies);
//^ check it out, there are the list of movies, dynamically grabbed!
//lets define a function that will hide a movie given its name.
//this is a super basic function but it does one thing well.
function hideMovie(name) {
document.getElementById(name).style.display = 'none';
console.log("hide "+name)
}
//if we can hide a movie we want to be abble to show one too.
function showMovie(name) {
document.getElementById(name).style.display = 'block';
}
//now lets target the input box
const searchBox = document.getElementById('filterInput');
//we want to add an event listener so everytime the user inputs something
//we look through the movies and hide the ones that dont contain the string
//entered, we also want to make sure we show the right movies too
searchBox.addEventListener('input', () => {
const value = searchBox.value;
const visibleMovies = [];
console.log(value)
//lets filter the movies to only include the ones we want to hide
const hiddenMovies = movies.filter(movie => {
const hidden = movie.indexOf(value) < 0;
//if we're not going to hide it lets show it.
if(!hidden){
visibleMovies.push(movie)
}
return hidden;
});
console.log(hiddenMovies)
//loop through and hide the movies.
for(let i = 0; i< hiddenMovies.length; i++){
hideMovie(hiddenMovies[i]);
}
//loop through and show the movies
for(let i = 0; i< visibleMovies.length; i++){
showMovie(visibleMovies[i]);
}
})
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>

I would add the attribute onkeyup to your input element and set it equal to a function that looks at the input text, and then loops through your moviebox div elements and hides them if the h3 element text does not contain the input value.
Example:
<input type="text" id="filterInput" placeholder="Search..." onkeyup="filterTable(this)" />
function filterTable(input) {
var search = input.value;
var movieDivs = document.querySelectorAll('div.moviebox');
for (var i = 0; i < movieDivs.length; i++;) {
var h3 = movieDivs[i].querySelector('h3');
if (h3.innerText.indexOf(search) >= 0)
movieDivs[i].style.display = '';
else
movieDivs[i].style.display = 'none';
}
}

iterating a multidimensional Json with AngularJS(Ng-Repeat)

I have problem to show all elements of subcategory with Ng-Repeat. Actually i can show all events from selected category with this code, but i don't know how to show all activities from specific event.
i have this code....
HTML
<div class = "categorias_eventos">
<ul>
<li value = "0" class = "active">
<img src="images1" ng-click="categorySelected = {categoryName: '1'}">
</li>
<li value = "1" class = "active">
<img src="images2" ng-click="categorySelected = {categoryName: '2'}">
</li>
<li value = "2">
<img src="images3" ng-click="categorySelected = {categoryName: '3'}">
</li>
<li value = "3" >
<img src="images4" ng-click="categorySelected = {categoryName: '4'}">
</li>
<li value = "4">
<img src="images5" ng-click="categorySelected = {categoryName: '5'}">
</li>
</ul>
</div>
<div ng-controller="Test">
<div ng-repeat="evento in eventos | filter:categorySelected" ng-click = "eventSelected = {id: '{{evento.id}}'}">
<div class="infoEvento">
<div class="name_event">
{{evento.eventName}}
</div>
</div>
</div>
</div>
<!-- Activitys -->
<div ng-controller="Test">
<div ng-repeat="activity in evento.activitys | filter:eventSelected">
<div class="infoEvento">
<div class="name_event">
{{activitys.description}}
</div>
</div>
</div>
</div>
JAVASCRIPT
function Test($scope) {
$scope.eventos = [
{
"id":"1",
"dateStart":"01-12-2014",
"dateEnd":"12-12-2014",
"eventName":"partyDeluxe",
"categoryName":"Category 1",
"activitys":
[
{
"pic_id":"1500",
"description":"Picture of a computer",
"localion":"img.cloudimages.us/2012/06/02/computer.jpg",
"type":"jpg"
},
{
"pic_id":"100",
"description":"Picture of a computer",
"localion":"img.cloudimages.us/2012/06/02/computer.jpg",
"type":"jpg"
},
{
"pic_id":"15",
"description":"Picture of a computer",
"localion":"img.cloudimages.us/2012/06/02/computer.jpg",
"type":"jpg"
}
]
},
];;
}

The problem you have is that your inner ng-repeat is sitting outside your outer, which means the activity context is unknown. To fix this, you simply need to rethink your div layout to include one ng-repeat inside the other. For example:
<div ng-controller="Test">
<div ng-repeat="evento in eventos | filter:categorySelected">
<div ng-click = "eventSelected = {id: '{{evento.id}}'}">
<div class="infoEvento">
<div class="name_event">
{{evento.eventName}}
</div>
</div>
</div>
<!-- Activitys -->
<div ng-controller="Test">
<div ng-repeat="activity in evento.activitys | filter:eventSelected">
<div class="infoEvento">
<div class="name_event">
{{activitys.description}}
</div>
</div>
</div>
</div>
</div>
</div>