CODEWITHSUNDEEP
javascriptjquery
Kamui
Kamui

Reputation: 799

Trying to create a click event within a click event but not getting desired result

I'm still relatively new to jquery so I will try to explain as best I can.

I'm creating a code based on a popular card game called Cardfight!! Vanguard. My objective is to eventually create a way to build and save a deck of cards that can be edited.

So far in my code, I get the user's input in a textbox, store it to an array when a button is clicked, and append the element to a div using jquery.

When the element appended to the div is clicked (i.e. this will be the card name that the user entered into the textbox), a search function will be called and return all information and statistics about that card. I've included my code below and comments to make it clear what each part of it does.

MY CURRENT PROBLEM IS.... whenever a user clicks ANYWHERE on the div with ID output... the search function is called over and over again.

Intended functionality:

-User enters card name -User clicks "search" -Card name is displayed in the div with ID output -User clicks on the card name that is displayed -Card information is displayed below it. Ex: Grade, Power, Shield, etc. -User enters another card name, and repeats steps above

What's currently happening: -User can click ANYWHERE on the div with ID output, and the card information will keep displaying over and over again as if the search function keeps being called. I want the card information to only be called once when the user clicks on the card name.

Ideally, I'd also like to make it so that if a user clicks on the card name a second time, it will disappear from the list, but I think I could figure this one out.

Another thing I would like to know though... which is a rather open ended question... is saving all of the user's inputs to an array a good idea? In the long run I would like to be able to create kind of like a checklist where once the proper information of the card is displayed... if the user chooses to... they can click on it and save it to a separate list where they can continue to edit their deck.

Here's my code:

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type = "text/javascript" src='script.js'>
    </script>
    <title></title>
</head>
<body>
 <form name="searchForm">
     <input type="text" id="search" placeholder="Enter Card Name" name="searchItem"/>
 </form>
 <div id="button">Search!</div>
<br/>
<div id="output"></div>
<div id="save"></div>


</body>
</html>

Javascript/Jquery:

// Vanguard object to obtain statistics of each card.
function Vanguard(name,grade,skill,power,shield,critical, type, nation, clan, race){
    this.name = name;
    this.grade = grade;
    this.skill = skill;
    this.power = power;
    this.shield = shield;
    this.critical = critical;
    this.type = type;
    this.nation = nation;
    this.clan = clan;
    this.race = race;
};

// This is where I can create and store new Vanguard objects easily
// I've only included 5 here for testing but there are hundreds 
// that I will include once I get the code working.
var database = {};
database['Asura Kaiser'] = new Vanguard("Asura Kaiser", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Star Gate", "Nova Grappler", "Battleroid");
database['King of Knights, Alfred'] = new Vanguard("King of Knights, Alfred", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human");
database['Dragonic Overlord'] = new Vanguard("Dragonic Overlord", 3, "Twin Drive!!", 11000, 0, 1, "Normal Unit", "Dragon Sanctuary", "Kagerou", "Dragon");
database['CEO Amaterasu'] = new Vanguard("CEO Amaterasu", 3, "Twin Drive", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Oracle Think Tank", "Human");
database['Alfred - Early'] = new Vanguard("Alfred - Early", 3, "Twin Drive!!", 10000, 0, 1, "Normal Unit", "United Sanctuary", "Royal Paladin", "Human");

// This is code to display all the card information to the user
// I am not sure why I need two parameters but 
// I couldn't get the code to work any other way.
function printVanguard(p, name){
    document.getElementById('output').innerHTML +=("<hr />");
    for (var p in database[name]){
       document.getElementById('output').innerHTML +=(p +': ' + database[name][p] + '<br />');
       }
       document.getElementById('output').innerHTML +=("<br />");
};

// This calls the printVanguard function for a specific card
var search = function(p, name){
    printVanguard(p, name);
};

// Jquery which is supposed to get the name of the card from the user.
// When the user clicks a button, it will store the name in an array.
// Then after it will append the input to a div for the user to see.
// If the user clicks on the input appended to the div,
// it will display all the statistics about that card.
$(document).ready(function() {
 var userInput = [];
 $('#button').click(function(){
  userInput.push($('input[name=searchItem]').val());
    for (i = 0; i < userInput.length; i++){
        if (i === userInput.length - 1){
            $('#output').append("<br />"  + userInput[i]); 
        }
    }
 $('#output, userInput').unbind("click").click(function(){
 for (i = 0; i < userInput.length; i++){
        if (i === userInput.length - 1){
            $('#save').append(search(userInput[i], userInput[i]));
        }
    }
 }); 
 });
});

And CSS if you need it... (Not very pretty but not my highest priority right now)

form {
    display: inline-block;
}

#button{
    display: inline-block;
    height: 20px;
    width: 70px;
    background-color:#FF8C00;
    font-family:cursive, arial;
    font-weight:bold;
    color: #8B0000;
    border-radius:5px;
    text-align:center;
    margin-top:2px;
}

.list {
    font-family:garamond;
    color:#006400;
}

#output {
    font-family:garamond;
    color:#006400;
}

Thanks for your help... I tried my best to make the code as concise as possible. If you have ways you think I could improve it, please let me know! :)

Upvotes: 0

Views: 61

Answers (1)

kinsho
kinsho

Reputation: 536

Within the div element, create span elements that'll contain the names of the card. Attach the onclick handler to all the span elements instead of the div element.

EDIT

For each card name you have in the div, you should have a separate span element that contains the name and the onclick function for that particular card. Let's assume that all your span elements also have a class called cardName. So your code should go something like....

$('span.cardName').on('click', function(e) {
    var cardName = e.currentTarget.innerHTML; // Assuming you have nothing else within the span besides the card name

    // Insert whatever code here
}

Upvotes: 2

Related Questions