mardi 27 janvier 2015

Array "sometimes" not defined


I am trying to implement a button that will delete events from a users selected set of events. For troubleshooting sakes right now I have 5 events hard coded in the page, but eventually they are called from localStorage. The delete button is supposed to delete elements from localStorage as well as the page. My problem is it throws an error when the Remove buttons are not clicked in order. Any and all help is appreciated. To see the errors please open console. Here's a fiddle: http://ift.tt/1CdzM1W


here's a shorter version of the code:



<div id="result">
<div class="10am target-stage stage-only saturday eventer" id="row0" rel="0">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">10:30 a.m.</td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children&rsquo;s Stage</b></span><br /><span class="ev-signings">Signing Area 1</span></p></span>
<span class="info-body"><b>Anna Dewdney, </b>Author of<em> NELLY GNU AND DADDY TOO</em></span>
<span class="info-btn"><p class="selctor" rel="0"><span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
<span class="mapit" ><a href="#"><b>map</b></a></span>
<span class="premove hidden" rel="0"><a href="#">Remove</a></span></p></span></td>
</tr>
</table>
</div>

<div class="11am target-stage stage-only saturday eventer" id="row1" rel="1">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:00 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children&rsquo;s Stage</b></span></p></span>
<span class="info-body"><b>Yuyi Morales, </b>Author of<em> NIÑO WRESTLES THE WORLD</em></span>
<span class="info-btn"><p class="selctor" rel="1"> <span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
<span class="mapit" > <a href="#"><b>map</b></a></span>
<span class="premove hidden" rel="1"><a href="#">Remove</a></span></p></span></td>
</tr>
</table>
</div>

<div class="11am target-stage stage-only saturday eventer" id="row2" rel="2">
<table border="0" cellspacing="0" cellpadding="0" style="border:none;">
<tr>
<td valign="top" align="left" class="ev-time" style="border:none;">11:30 a.m. </td>
<td valign="top" class="ev-desc">
<span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children&rsquo;s Stage</b></span><br /><span class="ev-signings">Signing Area 4</span></p></span>
<span class="info-body"><em>Scooby-Doo and the Carnival Creep,</em> presented by <b>Warner Bros. Consumer Products</b></span>
<span class="info-btn"><p class="selctor" rel="2"> <span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
<span class="mapit"><a href="#"><b>map</b></a></span>
<span class="premove hidden" rel="2"><a href="#">Remove</a></span></p></span></td>
</tr>
</table>
</div></div>
<script>
$(document).ready(function(){
var storaged = Object.keys(localStorage);
var storageLength = storaged.length;

for (var i=0; i<storageLength; i++)
{
var el = $(localStorage[storaged[i]]);
$("#result").append(el);
}

$("#buttn2").click(function(){
localStorage.clear();
$("#result").html('');
console.log("Storage is cleared");
});

$(".premove").click(function (event) {
event.preventDefault();
var a=$(this).attr("rel");
console.log(a);
var eventsArray = document.getElementsByClassName("eventer");
var eventSelctd=(eventsArray[a]).outerHTML;
localStorage.removeItem("schedule " + a, eventSelctd);
eventsArray[a].outerHTML="";
});
});
</script>




Aucun commentaire:

Enregistrer un commentaire