I am new to JavaScript and HTML. I may ask a simple question but this also true that I am confused to find to find the solution.
I have alert box. at onload(),it asks for the number of rows to be appear as a list. Once
the number is entered, then the rows are populated as per demand of user in alertbox.
My question is: How to set the id here inside innerHTML, so that I can check out which item have been selected here.
It will also be useful, if any tutorial related to this is given.
Here is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="scrollbar.css">
<script type="application/javascript" src="iscroll.js?v4"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<!-- html,body {
height: 50%
}
#left {
float: left;
width: 25%;
height: 90%
}
#lst {
width: 75%;
height: 90%
} -->
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
<script type = "text/javascript">
function listClicked(id)
{
var listid = id;
//alert("click called "+ listid);
if(listid == 'l1')
{
//alert("inside l1");
window.document.location.href = 'l1.html';
}
else if(listid == 'l2')
{
window.document.location.href = 'l2.html';
}
else if(listid =='l3')
{
alert("Current date is: "+new Date());
}
else if(listid == 'l4')
{
window.document.location.href = 'login.html';
}
else if(listid == 'l5')
{
window.document.location.href = 'customList.html'
}
}
function callAlert()
{
listRows = prompt("how many list row you want??");
var ids = 0;
var listText = "List Number";
for(var i = 0;i < listRows; i++)
{
if(i%2==0)
{
ids++;
listText = listText + "<p style ='background-color:#EEEEEE'>";
}
else
{
ids++;
listText = listText + "<p>";
}
listText = listText + i;
document.getElementById("lst").innerHTML = listText+i;
}
//document.getElementById("lst").innerHTML = listText+i;
}
/* if you name your html files lise so:
htmlfile1.html
htmlfile2.html
htmlfile3.html
then you can create a script that creates the filepath according to the value of the variable.
<script type=text/javascript>
var yourvar='???';
window.location="htmlfile"+yourvar+".html"; */
//-->
</script>
<body onload = callAlert();loaded()>
<ul style="list-style: none; margin-top:100px;">
<li id = "l1" onclick = listClicked(id);>list item 1</li>
<li id = "l2" onclick = listClicked(id);>list item 2</li>
<li id = "l3" onclick = listClicked(id);>Show current date alert</li>
<li id = "l4" onclick = listClicked(id);>Login</li>
<li id = "l5" onclick = listClicked(id);>list item 5</li>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<div id = "lst" ></div>
</ul>
</div>
</div>
</ul>
</body>
</head>
</html>
Please help me find out the solution.
I think you want something like:
so that each paragraph has a unique id. I prefer to use single quotes for script strings and double quotes for HTML attribute values.