0

I have done a randomly generated quote generator using math.random shown and I want to be able to have a like button that is able to collect all of the liked quotes into another array so it can be able to be displayed inside of another popup box. So this is what I have so far with a checkbox button inside of my array an object named like

var quotes = [
{verses: "This is my first quote", chapter: "Psalm 139:7-10", data: "Never be Lost", id: "like1", like: '<input type="checkbox" name="like" id="like1"><label for="like1"><img src="not_liked.svg" alt="Wanna Like It? " width="16"></label>'},
{verses: "This is my second quote", chapter: "Matthew 27:32-44", data: "The Crucifixion of Jesus", id: "like2", like: '<input type="checkbox" name="like" id="like2"><label for="like1"><img src="not_liked.svg" alt="Wanna Like It? " width="16"></label>'},]$(document).ready(function () {
console.log(likedVerses);
function showQuote () {
    var init = Object.keys(quotes);
    var rng = init[Math.floor(Math.random()*init.length)];
    $('.quote').html(quotes[rng].verses);
    $('.name').html(quotes[rng].chapter);
    $('.meaning').html(quotes[rng].data);
    $('.like').html(quotes[rng].like);
}});

Then I added a for loop looping through the array inside of my document.ready function

    $("input[type='checkbox']").click(function () {
    for (var i = 0; i < quotes.length; i++){
        if(quotes[i].id === this.id){
            if ($(this).is(":not(:checked)")){
                
            }
            else {
                likedVerses.push(quotes[i])
            }
            break;
        }
    }

Basically I would like to have a checkbox that is assigned to each randomly generated quote and when it's checked, it'll store the objects into an array. I would really appreciate the help.

Jacob Brockwell
  • 1
  • 1
  • When asking a language-specific question, the first tag you add should be for the language in which you're coding. Please [edit] your post and replace one of the tags with the tag for that language. – Ken White Jul 14 '20 at 02:43
  • Get rid of `var init = Object.keys(quotes);` and change `var rng = init[Math.floor(Math.random()*init.length)];` to `var rng = quotes[Math.floor(Math.random()*quotes.length)];`. – StackSlave Jul 16 '20 at 01:44
  • Note that you don't need to use a for loop these days, just use `find`; see answers to [Find object by id in an array of JavaScript objects](https://stackoverflow.com/q/7364150/215552). – Heretic Monkey Jul 16 '20 at 02:01
  • @HereticMonkey Would you know on how I can get a function working for a checkbox with having a checkbox being inside of the array/object – Jacob Brockwell Jul 21 '20 at 02:39

1 Answers1

0

I have done a .find method and was able to loop through the array so I can be able to display it in my HTML

    $('#like1').on('click', function () {
    var versesFind = $(".quote");
    var nameFind = $(".name");
    var meaningFind = $(".meaning")
    $("div").find(versesFind, nameFind, meaningFind).each(function () {
        likedVerses[likedVerses.length]={'verses':$(versesFind).html(), 'name':$(nameFind).html(), 'meaning':$(meaningFind).html()}
    });
    $('.likedVersesHtml').html("");
    for (var j = 0; j < likedVerses.length; j++){
        $('.likedVersesHtml').append('<div>' + likedVerses[j].verses + '</div>' + '<div>' + likedVerses[j].name + '</div>' + '<div>' + likedVerses[j].meaning + '</div>');
    }
});
Jacob Brockwell
  • 1
  • 1