www.webdeveloper.com
Results 1 to 10 of 10

Thread: Splice Object from Array - undefined error

  1. #1
    Join Date
    Jan 2018
    Posts
    6

    Splice Object from Array - undefined error

    Hello everyone,

    Within the code below contains a very simple question game (work-in-progress). So far, I've been able to have a "Rules" message appear through the onLoad function, "qDisplayLoad()". Next, the onClick function "qDisplayClick" runs anytime someone clicks, thus randomly pulling from the array (qArray).

    My question:
    How do you remove (splice) the question chosen from the array once it has been shown? My goal is to not have the same question repeat twice. Within the code below, you will find my amateur attempt at "splice" (and it kind of works), but instead the array pushes out "undefined".

    See below for code:
    Code:
    var qLoad = 0;
    var qArray = [
        "Question 1",
        "Question 2",
        "Question 3",
        "Question 4",
        "Question 5"
    ];
    
    
    var randomElement;
    
    /* The text "Rules" appears when the page loads */
    function qDisplayLoad() {
    
        if (qLoad == 0) {
            randomElement = "Rules";
            qLoad = 1; /* Changes qLoad to "1" from "0" so the array begins within the "qDisplayClick" function */
        }
    
        document.getElementById("questions").innerHTML = randomElement;
    }
    
    /* A new question is pulled from the array everytime the mouse is clicked (up to a maximum of 5) */
    function qDisplayClick() {
        var randomNumber = Math.floor(Math.random() * qArray.length); /* Questions are randomly chosen and rounded down from the array */
    
        if (qLoad += 1 && !(qLoad == 7)) {
            qArray.splice(qArray,1);
            randomElement = qArray[randomNumber];
    
        } else if (qLoad == 0) {
            randomElement = "Rules";
        }
        if (qLoad == 7) { /* After the 5th question, text will appear for the pop up */
            randomElement = "WIP - POP UP PLACEHOLDER";
        }
    
        document.getElementById("questions").innerHTML = randomElement;
    }

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,760
    The only way you can do this reliably is to store the data server side and that means you need user accounts.

    Trying to use cookies is not going to help you as that is not a reliable way of determining if questions have been asked, especially when the browser automatically expires them.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Jan 2018
    Posts
    6
    Thank you for your quick response.

    I don't believe in this case it needs to be stored on the server since this is a very quick question game that is going to become an offline app through the assistance of PhoneGap. Therefore, there shouldn't be any caching problems as all files will be stored offline (but I'll have to look into this, thank you for your feedback).

  4. #4
    Join Date
    Jan 2018
    Posts
    6
    I found this useful tutorial, but for my code if stills says "undefined".
    https://www.w3schools.com/js/tryit.a...s_array_remove

  5. #5
    Join Date
    Dec 2012
    Posts
    1,608
    Please read the docu, e. g. here:
    https://developer.mozilla.org/en-US/...s/Array/splice
    This shoud do what you need:
    Code:
    randomElement = qArray[randomNumber];
    qArray.splice(randomNumber,1);

  6. #6
    Join Date
    Jan 2018
    Posts
    6
    Thank you so much, Sempervivum! I've looked and looked and never seen my syntax error. Thank you so much for taking a peek at this for me, it works perfectly now.

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,760
    I take it this is a homework question.

    If you chose an element randomly from an array, then your returned element is an ... Array.
    Code:
    question = array.splice( (~~(Math.random() * array.length) | 0 ), 1);
    So when you
    Code:
    q=1;
    question = ( array.splice( (~~(Math.random() * array.length) | 0 ), 1) );
    console.log("Q.%s is : \r\n%s", q++, question)
    
    question = ( array.splice( (~~(Math.random() * array.length) | 0 ), 1) ).toString();
    console.log("Q.%s is : \r\n%s", q++, question)
    the output is
    Code:
    Q.1 is : 
    Array[1]
    Q.2 is : 
    Question 2
    and you need to be inserting a method of tracking those questions because if they hit refresh, its back to square one.

    So the use of both cookies and localStorage objects, which ever is available will help you track the questions asked and if you use local storage, you could store the offline question data out of sight within the browsers data area where you can store data (unlike cookies) for as long as you need it.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  8. #8
    Join Date
    Jan 2018
    Posts
    6
    Very well explained \\.\

    Technically, this could be called a homework question. I am working on a VERY basic app to bring myself back up to speed on JavaScript (been a designer for a number of years - still am, so my JS is way outdated from college years).

    Caching should be fine for this particular project, but I may end up taking your route anyways for practice and good coding procedures.

    PS: If you happen to know of a good starter JS book off hand, please give me a shout either here or via PM.

    Thank you all so much, this has been a very rewarding and educational experience.

  9. #9
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,760
    You don't need a book when you can access W3Schools and the Mozilla Developer Network as a couple of reliable and well presented sites that have one aim... teaching you how to use the various methods, functions and they also give examples.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  10. #10
    Join Date
    Jan 2018
    Posts
    6
    Thank you again.

    Yes, I use W3Schools frequently - such an amazing resource. Same with Mozilla Developer Network, that really helped enlighten my mistake in error.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

"

"