Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Easy Alert Problem

    This don't seem to give me my alert message:

    Code:
    <input id="reserveer" type = "button" onclick = "storeIt(); alert('Bedankt voor de reservering!\n\nDit is uw reserveringscode:\n\n' + Math.floor(Math.random()*(10000- 1000 + 1))+'\n\nOnthoud deze code goed! \nU wordt nu doorgestuurd naar de homepagina.'); return false;" value = "Reserveren" >
    what could be wrong?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Does the function storeit() exist?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    The alert is fine so long as the
    "storeIt(); ....."
    is removed.

    I get undefined in the error console, but that was expected as you did not include it in your post.

    I would take a look at the actions of the "storeIt()" function to assure it is working as expected.
    Perhaps it is not returning to perform the alert after being called.

  • #4
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    here i got this in html:

    Code:
    <script type = "text/javascript" src = 'reservering.js'>
    </script>
    this my javascript storeit function:

    Code:
    function storeIt() {
      var allestoelen = document.getElementById('allseats').getElementsByTagName('div');
      //alert(allestoelen.length);
      var theArray = [];
      for(i=0; i<allestoelen.length; i++) {
        if(allestoelen[i].className == "zwart") {
          theArray.push(1);
        } else {
          theArray.push(0);
        }
      }
      var jsonArray = JSON.stringify(theArray);
      window.localStorage.seats = jsonArray;
      console.log(jsonArray);
      return false;
    }

  • #5
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Here is a part of the code of Html/Css/Js:

    HTML:

    Code:
    <!doctype html>
    <head>
    <title> Filmpje </title>
    <link rel="stylesheet" type="text/css" href="reserveer_groot.css" />
    <script type = "text/javascript" src = 'reservering.js'>
    </script>
    ...
    <div id="zaal3"style="position: relative; width: 450px; height: 300px; border: 1px solid black" id='allseats'/>
    <div class="geenstoel"></div>
    <div class="geenstoel"></div>
    <div class="geenstoel"></div>
    <div class="geenstoel"></div>
    <div id="blauw1" class = "blauw" onclick = "res(this.id)"></div>
    ...
    <input id="reserveer" type="button" onclick="storeIt(); alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')" value="Reserveer"></a>
    </div>
    part of CSS:

    Code:
    #zaal3
    {
    margin-left: 10%;
    }
    #reserveer
    {
    margin-left: 10%;
    }
    .geenstoel {
        background: white repeat scroll 0 0 ;
        border: 1px solid black;
        float: left;
        height: 13px;
        width: 13px;
    }
    .blauw {
        background: none repeat scroll 0 0 #4E81BD;
        border: 1px solid black;
        float: left;
        height: 13px;
        width: 13px;
    }
    .blauw:hover {
        background: none repeat scroll 0 0 rgb(153,217,234);
    }
    .oranje {
        background: none repeat scroll 0 0 #F79646;
        border: 1px solid black;
        float: left;
        height: 13px;
        width: 13px;
    }
    .oranje:hover {
        background: none repeat scroll 0 0 rgb(255,159,159);
    }
    .rood {
        background: none repeat scroll 0 0 #C00000;
        border: 1px solid black;
        float: left;
        height: 13px;
        width: 13px;
    }
    .rood:hover {
        background: none repeat scroll 0 0 rgb(255,159,159);
    }
    .zwart {
    background: none repeat scroll 0 0 rgb(17,89,38);
    border: 1px solid black;
    float: left;
    height: 13px;
    width: 13px;
    }
    .seats {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid black;
    float: left;
    height: 13px;
    width: 13px;
    }
    .legenda
    {
    margin-top: -12px;
    float: right;
    }
    .blocked {
    background: none repeat scroll 0 0 black;
    border: 1px solid black;
    float: left;
    height: 13px;
    width: 13px;
    }
    Part of JS:

    Code:
    window.onload = function() {
       if(window.localStorage && window.localStorage.seats) {
         var theArray = JSON.parse(window.localStorage.seats);
         var allestoelen = document.getElementById('allseats').getElementsByTagName('div');
         for(i=0; i<allestoelen.length; i++) {
           if(theArray[i]===1) allestoelen[i].className="blocked";
         }
       }
    };
    function res(gereserveerd)
    {
       if(document.getElementById(gereserveerd).className=="blauw") {
          document.getElementById(gereserveerd).className="zwart";
       } else {
          document.getElementById(gereserveerd).className="blauw";
       }
       calculate();
       calculater();
    }
    function storeIt() {
      var allestoelen = document.getElementById('allseats').getElementsByTagName('div');
      //alert(allestoelen.length);
      var theArray = [];
      for(i=0; i<allestoelen.length; i++) {
        if(allestoelen[i].className == "zwart") {
          theArray.push(1);
        } else {
          theArray.push(0);
        }
      }
      var jsonArray = JSON.stringify(theArray);
      window.localStorage.seats = jsonArray;
      console.log(jsonArray);
      return false;
    }

    So.. whats wrong?

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    I'm getting an error that the element 'allseats' is null.
    Perhaps you are calling a function that uses the element before it is defined in the HTML.
    I would check order of creation versus the time of action.

  • #7
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ok well here, this one works:

    http://jsbin.com/epafij/1/

    As you can see when you click and re-open browser seat gets stores.. thing is.
    this one dont work that i use for my actual site cuz i had to add a ton of stuff:

    http://jsbin.com/uhiloy/1


    As you can see in the second picture.. it gives the alert msg because i got this:

    Code:
    <input id="reserveer" type="button" onclick="alert('Bedankt voor uw reservering.\nUw reserveringscode is:\n\n ' + Math.floor(Math.random()*(10000000 - 100000 + 1))+'\n\nU wordt nu doorgestuurd naar de homepagina.')" value="Reserveer"></a>
    whenever I put the storeIt(); function the alert stops working. can you check that code for me?

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Both links display an alert message (but I cannot read it)
    What exactly was the problem again?
    I'm confused.

  • #9
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    when you re-open the browser the seat should turn black (saved) and not reset.
    in my first picture u see that when you re-open your browser the seats are saved. in the second they dont. (no idea why)

  • #10
    New Coder
    Join Date
    Oct 2012
    Location
    Basement
    Posts
    88
    Thanks
    9
    Thanked 0 Times in 0 Posts
    bumpbump


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •