I tried to fetch data from mysql, h2, derby databases but nothing worked. I tried exactly as it was given on w2schools website. But later I thought I would try with Array Function and check with Java JSP page in my AngularJS page calling it.
Below is the index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/pavanjsp/jsondata.jsp")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Here is my jsondata.jsp below:
<%# page contentType="text/html; charset=iso-8859-1" language="java" %>
<html>
<head>
<title>JSON Data</title>
<link rel="stylesheet" href="dist/css/bootstrap.css" />
</head>
<body>
<div class="container-fluid">
<%
String[] names = { "Alfreds Futterkiste", "B's Beverages", "Berglunds snabbköp", "Blondel père et fils", "Bólido Comidas preparadas", "Bon app'", "Comércio Mineiro" };
response.addHeader("Access-Control-Allow-Origin", "*");
%>
<%
out.print("{ \"records\":[ ");
for(int i = 0; i < names.length; i++)
{
if(i == (names.length - 1))
out.print("{\"Name\":\"" + names[i] + "\"}");
else
out.print("{\"Name\":\"" + names[i] + "\"}, ");
}
out.print(" ] }");
%>
</div>
</body>
</html>
I even tried putting the index.html as index.jsp and deploying in tomcat. But doesn't works. Even Php code I have tried but not working.
Please help me out.
Ok I got my own answer, and thanks cyan for the help. The issue was with the response, the updated code is as below:
jsaondata.jsp(hosted on tomcat)
<%# page contentType="application/json; charset=iso-8859-1" language="java" %>
<%
String[] names = { "Alfreds Futterkiste", "B's Beverages", "Berglunds snabbköp", "Blondel père et fils", "Bólido Comidas preparadas", "Bon app'", "Comércio Mineiro" };
response.addHeader("Access-Control-Allow-Origin", "*");
%>
<%
out.write("{ \"records\":[ ");
for(int i = 0; i < names.length; i++)
{
if(i == (names.length - 1))
out.write("{\"Name\":\"" + names[i] + "\"}");
else
out.write("{\"Name\":\"" + names[i] + "\"}, ");
}
out.write(" ] }");
%>
angulardata.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/pavanjsp/jsondata.jsp")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
Try changing code to:
$scope.names = JSON.parse(response.data).records;
If this doesn't work, debug if you receive proper json from server.
Open some firebug/developer tools ( usually f12) and see network.
Open page and see response. Copy it and paste to some json validation tool.
If JSON is proper, then something is wrong in angular app, but i see that everything is fine.
Also check in firebug this call, if there is properly CORS configured.
If you receive result 200 ok, then it's fine.
Also you can use $log service to debug your result:
app.controller('customersCtrl', function($scope, $http,$log)
.then(function (response) {$log.debug('response',response);
I hope it helps.
Related
I have developed a web app, connected to an Arduino UNO sensor and relay switch.
On the webpage, when I touch a button, a relay switch turns on/off.
My plan was to convert this web app into smartphone app, using phonegap.
I searched on google and found out that
I need to seperate the 'java' resource from my jsp file, as the phonegap only perceive html, css, javascript.
Then, How can I separate these elements out of my coding? Just like the following:
<!-- Main page that shows a simple on/off control and
DHT11 sensor value -->
<%# page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%# page import="com.Test.domain.Relay" %>
<%
Relay relay = new Relay();
pageContext.setAttribute("relay", relay);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fan Control</title>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<style>
#footer{
height: 86px;
text-indent: -9999px;
background-image: url(Logo.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 0 0 0;
position: absolute;
bottom: 0;
}
#header{
height: 86px;
text-indent: -9999px;
background-image: url(headerImage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 0 0 0;
}
#FanOn:onClick{
background: green;
}
</style>
<script>
$(document).ready(function(){
var timer = setInterval(function(){
$.get("http://192.168.0.54", function(data){
$("#temperatureValue").val(data);
});
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
}, 1000);
$("#FanOn").click(function(){
$("#fanState").val("1");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#FanOff").click(function(){
$("#fanState").val("0");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#LampOn").click(function(){
$("#lampState").val("1");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#LampOff").click(function(){
$("#lampState").val("0");
$("#form1").attr("action","Processing.jsp");
$("#form1").submit();
});
$("#footer").click(function(){
window.location.replace("http://www.samwooinc.net");
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header" id="header">
<h1>FAN Control Example</h1>
</div>
<div data-role="content">
<form method="GET" id="form1" action="" target="haha">
<div class="ui-field-contain">
<label for="temperatureValue">Current Temperature</label>
<input type="text" id="temperatureValue" name="temperatureValue" value="0" data-inline="true">
</div>
<label for="FanSwitch">FAN Control</label>
<div data-role="navbar" id="FanSwitch">
<ul>
<li>FanOn</li>
<li>FanOff</li>
</ul>
</div>
<label for="LampSwitch">LAMP Control</label>
<div data-role="navbar" id="LampSwitch">
<ul>
<li>LampOn</li>
<li>LampOff</li>
</ul>
</div>
<input type="hidden" id="fanState" name="fanState" value="998">
<input type="hidden" id="lampState" name="lampState" value="234">
</form>
</div>
<div data-role="footer" id="footer">
<h2>footer</h2>
</div>
</div>
<iframe name="haha">
</iframe>
</body>
</html>
So, for example, How can I separate the coding like this, out of the jsp file?:
<%# page import="com.Test.domain.Relay" %>
<%
Relay relay = new Relay();
pageContext.setAttribute("relay", relay);
%>
I am building a web page which will show the users lat/langs sent from the android app. I have managed to receive those lat/lngs and also inserted them in the DB as well using DAO and servlet classes. Now having little knowledge of the java script in a jsp. How can i pass those paramters into this jsp so that it can show them on the map?
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
</script>
<style>
<% int i= 0;%>
<c:forEach var="usinf" items="${LatLang}">
#map-canvas_<%=i%> {
height: 150px;
width: 250px;
margin: 0px;
padding: 0px
}
<% i= i+1;%>
</c:forEach>
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script>
function initialize() {
<% i= 0;%>
<c:forEach var="usinf" items="${LatLang}">
var geocoder<%=i%>;
var mapsss<%=i%>;
var infowindow<%=i%> = new google.maps.InfoWindow();
var marker<%=i%>;
geocoder<%=i%> = new google.maps.Geocoder();
var latlng<%=i%> = new google.maps.LatLng(${usinf.pickuplat},${usinf.pickuplng});
geocoder<%=i%>.geocode({'latLng': latlng<%=i%>}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
mapsss<%=i%>.setZoom(11);
marker<%=i%> = new google.maps.Marker({
position: latlng<%=i%>,
map: mapsss<%=i%>
});
infowindow<%=i%>.setContent(results[1].formatted_address);
infowindow<%=i%>.open(mapsss<%=i%>, marker_<%=i%>);
}else {
alert('No results found');
}
}else {
alert('Geocoder failed due to: ' + status);
}
});
var mapOptions<%=i%> = {
zoom: 8,
center: latlng<%=i%>,
mapTypeId: 'roadmap'
}
mapsss<%=i%> = new google.maps.Map(document.getElementById('map-canvas_<%=i%>'), mapOptions<%=i%>);
<% i= i+1;%>
</c:forEach>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<title>Insert title here</title>
</head>
<body>
<body onload="initialize()">
<div id="map-canvas_" style="width:100%; height:100%"></div>
</body>
</body>
</html>
My servlet do post method.
protected void Process(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Authenticate authplots = new Authenticate();
List<UserInfo> getTheLatlangs = authplots.GetAllLangs();
request.setAttribute("LatLang", getTheLatlangs);
RequestDispatcher view = request.getRequestDispatcher("Testmaps.html");
view.forward(request, response);
}
Using JSTL, I did it this way. Maybe it will help.
<script type="text/javascript">
var markers = [
<c:forEach var="row" items="${result.rows}">
['<c:out value="${row.aciklama}" />',
<c:out value="${row.KONUME}" />,
<c:out value="${row.KONUMB}" />,
<c:out value="${row.EVID}" />,
'<c:out value="${row.aptadi}" />',
'<c:out value="${row.mahalle}" />',
'<c:out value="${row.sokak}" />',
'<c:out value="${row.durumu}" />',
'<c:out value="${row.metrekare}" />',
'<c:out value="${row.fiyat}" />',
'<c:out value="${row.odasayisi}" />'],
</c:forEach> ];
</script>
You can look in github.
JSP Google MAPS
From what I can see when the checkbox page passes of parameters to the Proto page, which puts it in the portfolio object which is then used to check the value of the data and display the portfolio name ,and when the proto page refreshes the parameters arent passed again from the checkbox page and the portfolio object has a null value stored in it which gives a null pointer exception.
so if I store the parameter values once they're already passed from the checkbox page would that solve the problem ? And if so how can I go about it ?
Here is the code for proto page
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.io.*"%>
<%# page import="java.sql.*"%>
<%# page import="java.util.*"%>
<%# page import="oracle.jdbc.pool.OracleDataSource"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<head>
<title>Live Data Tracking</title>
<style type='text/css'>
.wrapper {
margin: 0px auto;
width: 1379px;
background-color: #cccccc
}
.header {
float: left;
width: 100%;
background-color: #356aa0
}
.left1 {
float: left;
margin-right: 10px;
width: 338px;
background-color: #ffffff
}
.left2 {
float: left;
margin-right: 10px;
width: 337px;
background-color: #ffffff
}
.left3 {
float: left;
margin-right: 10px;
width: 337px;
background-color: #ffffff
}
.right {
float: right;
width: 337px;
background-color: #ffffff
}
.footer {
float: left;
width: 100%;
background-color: #00457b
}
body {
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #e7e7de
}
</style>
</head>
<script type="text/javascript">
<%
ArrayList<ArrayList<String>> testList = new ArrayList();
portfolio = request.getParameterValues("portfolio");
try{
OracleDataSource ds= new OracleDataSource();
//javax.sql.DataSource ds = new javax.sql.DataSource();
ds.setDriverType("thin");
ds.setServerName("localhost");
ds.setPortNumber(1521);
ds.setDatabaseName("orcl");
ds.setUser("system");
ds.setPassword("amex1234");
Connection connection = ds.getConnection();
System.out.println("Connected Successfully");
Statement statement = connection.createStatement() ;
if (portfolio!=null)
{
for(int i=0;i<portfolio.length;i++)
testList.add(new ArrayList());
//System.out.println(testList);
for(int i=0; i<portfolio.length;i++)
{ String temp="";
ResultSet resultset = statement.executeQuery("select num FROM "+portfolio[i]+"_Test") ; //Put in SQl command and Table name here
while(resultset.next()){
temp = resultset.getString(1);
testList.get(i).add(temp);
}
//System.out.println(testList);
}
}
} catch(SQLException e) {
e.printStackTrace();
}
%>
</script>
<body>
<%! String[] portfolio; %>
<div class="wrapper">
<div class="header">
<center>
<h4>Live Tracker</h4>
</center>
</div>
<div class="left1">
<h3>Portfolio</h3>
<%
if (portfolio != null)
{
for (int i = 0; i < portfolio.length; i++) //i=portfolio length proxy
{
out.println ("<b>"+portfolio[i]+"<b>"); %>
<br>
<% }
}
else out.println ("<b>none<b>");
%>
</div>
<div class="left2">
<h3>Pre-Stage</h3>
for (int j = 0; j < portfolio.length; j++)
{
response.setIntHeader("Refresh", 2);
//System.out.println(testList.get(j).size());
if (testList.get(j).size()!=0){ %>
Data is there <br>
<% } else { %>
No data <br>
<% }
}%>
</div>
<div class="left3">
<h3>Stage</h3>
</div>
<div class="right">
<h3>Mirror</h3>
</div>
<div class="footer">Something Funny and Witty Here</div>
</div>
</body>
</HTML>
This is the code for the checkbox page. Run via this page
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<body>
<FORM method="POST" ACTION="Proto_1.jsp">
<center>
Select your portfolio(s): <br><br>
<table>
<tr>
<td>
<input TYPE=checkbox name=portfolio VALUE=X>
</td>
<td>
X
</td>
</tr>
<tr>
<td>
<input TYPE=checkbox name=portfolio VALUE=Y>
</td>
<td>
Y
</td>
</tr>
<tr>
<td>
<input TYPE=checkbox name=portfolio VALUE=W>
</td>
<td>
W
</td>
</tr>
<tr>
<td>
<input TYPE=checkbox name=portfolio VALUE=V>
</td>
<td>
V
</td>
</tr>
<tr>
<td>
<input TYPE=checkbox name=portfolio VALUE=S>
</td>
<td>
S
</td>
</tr>
</table>
<br> <INPUT TYPE=submit name=submit Value="Submit">
</center>
</FORM>
</BODY>
</HTML>
There are several options to resolve.
Option 1: Set the params into session. Instead of:
portfolio = request.getParameterValues("portfolio");
Try this:
String[] portfolio = null;
if(null == request.getParameter("submit")) { //page reload, true
portfolio = (String[])session.getAttribute("portfolio");
} else {
portfolio = request.getParameterValues("portfolio");
session.setAttribute("portfolio", portfolio);
}
Option 2: Separate the view and business logic i.e. split your page into two. First jsp to get the portfolio from request and make frequent call to get the updated records from the second jsp. This approach requires JavaScript.
View.jsp: Make call to the Records.jsp frequently using setInterval()
<script>
var getRecords = function() {
// to do here
};
setInterval(getRecords, 2 * 1000); (in miliseconds)[every 2 sec]
</script>
Records.jsp: Generate dynamic html along with records
You can save the checkbox data to the session via session.setAttribute("portfolio", portfolio).
You can retrieve this and set the value back to the page via document.getElementById(id).value or via value={$sessionVariable} in jsp
I wish to create a simple script to store information dynamically without refreshing or redirecting to another page. I've sourced high and low for answers before coming here, and I followed this.
However, I'm still unable to get it to store data because I don't know where I've goen wrong. Also, I wish to ask the purpose of success: function(msg)
Thanks a lot!
Update 1: Got it to work after following Anoop's solutions. However, such a popup appears when the data is submitted
StaffReg.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Staff Registration</title>
</head>
<body>
<%-- HTTP header --%>
<%response.addHeader("Cache-Control","no-cache");
response.addHeader("Pragma","no-cache");
response.addHeader("Expires","0");
%>
<%-- Javascript --%>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#Register').click(function(e) {
e.preventDefault();
$.ajax({
url: "StaffRegAuth.jsp",
type: "post",
data: {
username: $('#username').val(),
password: $('#password').val(),
userGroup: $('#userGroup').val()
},
success: function(msg) {
alert(msg);
}
});
});
});
</script>
<%-- Main body --%>
<h1 align="center"> Account Registration: </h1>
<div align="center">
<table style="width = 30%" >
<tr>
<td> User Name: </td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td> Password: </td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<tr>
<td> User Group: </td>
<td><select name = "userGroup" id="userGroup">
<option value="1">Administrator
</optin>
<option value="2">Clerk
</optin>
<option value="3">Operations
</optin>
<option value="4">Sales
</optin>
</select></td>
</tr>
<tr>
</table>
<input type="submit" value="Register" id="Register">
</div>
</body>
</html>
StaffRegAuth.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<%-- Imports --%>
<%# page import="java.sql.*"%>
<%# page import="java.util.*"%>
<%#page import="javax.servlet.*" %>
<%#page import="javax.servlet.http.*" %>
<%-- HTTP header --%>
<%response.addHeader("Cache-Control","no-cache");
response.addHeader("Pragma","no-cache");
response.addHeader("Expires","0");
%>
<%-- Variables that will be written --%>
<% String sUsername = request.getParameter("username");
String sPassword = request.getParameter("password");
int sUserGroup = Integer.parseInt(request.getParameter("userGroup"));
%>
<%-- Creating new staff account - writing --%>
<%
try{
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String conURL= "jdbc:odbc:HOD_DATA";
Connection con = DriverManager.getConnection(conURL);
Statement st = con.createStatement();
int status = st.executeUpdate("insert into Staff(username, password, user_group) values('"+sUsername+"','"+sPassword+"',"+sUserGroup+")");
if(status>0){
//out.println("Update sucessful");
}
else{
//out.println("Update unsuccessful");
}
st.close();
con.close();
}
catch(Exception e){
out.println(e);
}
%>
</body>
</html>
Remove the submit button and use a normal html button with Id as Register.
Modify your html input types and replace the name attribute with id attribute. Ex: use id="username" instead of name="username"
Debugging:
Use firebug to check what value is passed to server. Ensure the correct ajax request is submitted.
Hope it helps.
This is my jsp page
<%#page import="java.util.List"%>
<%#page import="org.hibernate.cfg.Configuration"%>
<%#page import="org.hibernate.Session"%>
<%#page import="org.hibernate.SessionFactory"%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script>
function page_hide_show()
{
for(var i=8;i<22;i++)
{alert(i)
document.getElementsByClassName(i).style.display='none';
}
}
</script>
</head>
<body onload="page_hide_show()">
<%
SessionFactory sessionfactory=null;
Session Listsession=null ;
sessionfactory=new Configuration().configure().buildSessionFactory();
Listsession = sessionfactory.openSession();
String name="";
String age="";
String address="";
String phone_no="";
try
{
int c=0;
if(request.getAttribute("c")!=null)
{
c=Integer.parseInt(request.getAttribute("c").toString());
}
org.hibernate.Query query=Listsession.createQuery("select name,age,address,phone_number from paging order by auto_inc");
query.setFirstResult(c);
query.setMaxResults(10);
List check1 =query.list();
java.util.Iterator on=check1.iterator();
while(on.hasNext())
{
Object oo[]=(Object[])on.next();
name=(String)oo[0].toString().trim();
age=(String)oo[1].toString().trim();
address=(String)oo[2].toString().trim();
phone_no=(String)oo[3].toString().trim();
%>
<div align="center" style="border-bottom:1px solid #ccc "> Name <input type="text" name="text" value="<%=name %> " disabled="disabled">
<br><br>
</div>
<% }
}
catch(Exception ee){
out.print(ee.getMessage());
}
%>
<center> <img src="fgfdg.png"> </center>
<table align="center">
<tr>
<!-- <td>First Page</td> -->
<%
int value_counter=0;
int pagecount=0;
long counters=0;
try{
org.hibernate.Query query=Listsession.createQuery("select count(*) from paging order by auto_inc");
List check1 =query.list();
java.util.Iterator on=check1.iterator();
while(on.hasNext())
{
Object oo=on.next();
counters=((Number)oo).longValue();
}}
catch(Exception e)
{
out.println(e);
}
int count=(int)counters/10;
int Counter_in_int=count*10;
double xyz=Counter_in_int-counters;
if(xyz>=0)
{
for(int i=0;i<count;i++)
{
pagecount++;
%>
<td class="<%=pagecount%>"><%= pagecount%></td>
<% value_counter=value_counter+10;} }
else
{
%>
<%
for(int i=0;i<=count;i++)
{
pagecount++;
%>
<td class="<%=pagecount%>"><a href="Pagecount?c=<%=value_counter %>" ><%= pagecount%></a></td>
<% value_counter=value_counter+10;} }
%>
<!-- <td>Last Page</td> -->
</tr>
</table>
</body>
</html>
So My question is
in the above code I am trying to hide td tags with classname from 8 to 21 but I am unable to do so.I think my javascript function is right.Also when I am giving id to as
< td id="<%=pagecount%>">
I am unable to do so.
kindly tell me how to hide the td's with classname from 8 to 21 in this code.Is my javascript function wrong.
Your problem is that document.getElementsByClassName(something) returns an Array (the plural in elements). That means that you have to have something like this :
var list = document.getElementsByClassName(class_name);
for (i = 0; i < list.length; i++) alert(list[i]);
However, I see you only have one of each class name. In this case, you should just do something like this : document.getElementsByClassName(i)[0].style.display = 'none'.
Hope this was useful :)