1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Selecting Dynamic Content By Class

Discussion in 'JavaScript' started by Jeremy Benson, Dec 15, 2022.

  1. #1
    I’m having issues figuring out my code. I have a point place screen for character development in my game. There are arrows for piping up a stat. I’d like to remove the arrows if character points are depleted. The first issue I’m facing is selecting class name .scorePipArrow to remove them, with dynamic content. There are too many nested elements with attributes to be bothered writing them in JavaScript and element at a time, and I don’t know if the hard work would pay off as the solution. The second issue is that I set character.characterPoints = 0 to test the code section and in my eventListener for clicking arrows it’s back up to 20. I’d just like to know why.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <meta http-equiv="Content-Security-Policy" content="">
        <link href="./styles.css" rel="stylesheet">
        <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
        <title>Hello World!</title>
      </head>
      <style>
        /*
    
          Controls the main style of the client.
    
        */
      html,body{
           
        background-color:black;
     
      }
    
      h4, label, p, span, ul, small{
    
        color:white;
    
      }
    
      textarea{
    
        width:100%;
    
      }
    
      input, select{
    
    
        margin-bottom:12px;
    
      }
    
      .right{
    
        float:right;
    
      }
     
      @media(min-width:768px){
     
        .flexContainer{
     
          display:flex;
          padding-top:1%;
         
        } 
      }
    
      .col1{
    
        flex:6;
        margin-left:12px;
        margin-right:12px;
    
      }
    
      .col2{
    
        flex:6;
        margin-right:12px;
    
      }
    
      .col3{
    
        flex:6;
    
      }
    
      .contentPanel{
    
        background-color:#363636;
        padding:12px;
    
      }
    
      #characterDevelopmentHeader{
    
        margin-left:12px;
        margin-top:12px;
        margin-bottom:0px;
    
        }
    
        #introSpan{
    
          margin-left:14px;
          display:block;
    
        }
    
        .block{
    
            display:block;
    
        }
    
        .pointsHolder{
    
            background-color:antiquewhite;
            border:3px sandybrown solid;
            padding:4px;
            margin-top:8px;
            cursor:pointer;
            cursor:hand;
        }
    
        .pointsHolder span{
    
            color:black !important;
    
        }
    
        .pointsWrapper{
    
            display:flex;
            flex-direction: row;
    
        }
    
      .scoreHolder{
    
        background-color:antiquewhite;
        border:3px sandybrown solid;
        padding:4px;
        margin-top:8px;
        cursor:pointer;
        cursor:hand;
    
    }
    
    .scoreHolder span{
    
      color:black;
    
    }
    
        .points1{
    
            flex:8;
    
        }
    
        .points2{
    
            flex:1.06;
    
        }
    
        #statHeaders{
    
        display:flex;
        margin-top:2%;
    
        }
    
        #statHeader1{
    
        flex:4;
    
        }
    
        #statHeader2{
    
        flex:4;
    
        }
    
        #statHeader3{
    
        flex:1.04;
    
        }
    
        .statPipWrapper{
    
          display:flex;
          align-items: center;
    
        }
    
        .pip1{
    
          flex:4;
    
        }
    
        .pip2{
    
        flex:4;
    
        }
    
        .pip3{
    
        flex:1.04;
    
        }
    
        .statButtonsHolder{
    
          display:flex;
          align-items:center;
    
        }
    
        .statButtons1{
    
          flex:0.46;
    
        }
    
        .statButtons2{
    
          flex:2;
          justify-self:center;
       
        }
    
        .scorePipArrow{
    
          margin-top:12px;
          margin-left:4px;
    
        }
        .skillPip1{
    
        flex:2;
    
        }
    
        .skillPip2{
    
        flex:3;
    
        }
    
        .skillPip3{
    
        flex:2;
    
        }
    
        .skillPip4{
    
          flex:2;
    
        }
    
        .skillPip2Content{
    
          display: flex;
        }
    
    
    .skillPipWrapper
    {
    
    display:flex;
    align-items: center;
    
    }
    
    #skillStatHeaders{
    
    display:flex;
    justify-content:flex-start;
    margin-top:2%;
    
    }
    
    #skillStatHeader1{
    
    flex:2;
    
    }
    
    #skillStatHeader2{
    
    flex:3;
    
    }
    
    #skillStatHeader3{
    
    flex:2;
    
    }
    
    #skillStatHeader4{
    
    flex:2;
    
    }
    
    .skillsHeader1{
    
      margin-top:11.7% !important;
    
    }
    
    .skillScoreHolder{
    
    background-color:antiquewhite;
      border:3px sandybrown solid;
      padding:4px;
      margin-top:8px;
      cursor:pointer;
      cursor:hand;
      width:32% !important;
    
    
    }
    
    .skillScoreHolder span{
    
    color:black;
    
    }
    
    .balanceContentPanel{
    
      background-color:#363636;
      padding:12px;
      margin-bottom:2%;
    
    }
    
    .balanceScoreHolder{
    
    background-color:antiquewhite;
      border:3px sandybrown solid;
      padding:4px;
      margin-top:8px;
      width:43%;
      cursor:pointer;
      cursor:hand;
    
    }
    
    .balanceScoreHolder span{
    
    color:black;
    
    }
    
    .balanceWrapper{
      display:flex;
    }
    
    .balanceWrapperRow{
    
      display:flex;
      align-items: center;
    
    }
    
    .balanceColumn1{
    
      flex:3;
    
    }
    
    .balanceColumn2{
      flex:5;
    }
    
    .balanceColumn3{
      flex:3;
    }
    
    
    .balanceHeadersWrapper{
    
      display:flex;
    
    }
    
    .cursor{
    
      cursor:pointer;
      cursor:hand;
    
    }
    
    .balanceHeader1{
    
      flex:3;
    
    }
    
    .balanceHeader2{
    
      flex:5;
    
    }
    
    .balanceHeader3{
     
      flex:3;
    
    }
    
    #nameClassSmall{
    
      display: block;
      margin-bottom:4px;
    
    }
    
    #mainHeaderContent{
    
      display:flex;
      flex:8;
    
    }
    
    #mainHeaderContent1{
    
    flex: 4;
    
    }
    
    #mainHeaderContent2{
    
    flex: 4;
    padding-top:8px;
    
    }
    
    #craftSkillsButton{
    
      margin-left:8px;
    
    }
    
    #exitMenuContent{
    
      display:flex;
    
    }
    
    #exitMenu1{
    
      flex:4
    
    }
    #exitMenu2{
    
    flex:3
    
    }
    #exitMenu3{
    
    flex:3
    
    }
    
    #raceClass{
    
      display:block !important;
      margin-bottom:4px;
    
    }
    
    .addButton{
    
      background-color:red;
      width:8px;
      height:8px;
    
    }
    
    .buttonsHolder{
    
      display:flex;
    
    }
    
    .buttons1{
    
      flex:1;
    
    }
    
    .buttons2{
    
      flex:2;
    
    }
    
    .scorePipArrow{
    
      cursor:pointer;
      cursor:hand;
      width:10%;
    
    }
    
      </style>
      <body>
        <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
        <script src="./JavaScript/classes/Validator.js"></script>
        <script src="./JavaScript/classes/CharacterClass.js"></script>
        <div class="flexContainer">
              <div id="mainHeaderContent">
                <div id="mainHeaderContent1">
                  <h4 id="characterDevelopmentHeader">Character Development</h4>
              </div>
              <div id="mainHeaderContent2">
                <button id="craftSkillsButton" type="button" class="btn btn-success right">Crafting Skills</button>
                <button type="button" class="btn btn-success right">Character</button>
              </div>
            </div>
        </div>
        <div id="pageWrapper">
         <!-- Page wrapper -->
        
          <!--End Page Wrapper-->
        </div>
        <!-- You can also require other files to run in this process -->
        <script src="./renderer.js"></script>
        <script>
          // Implement: Scroll is going to have to work with last ID based on weather or not there is input in the search field.
           window.$ = window.jQuery = require('jquery');
           const {ipcRenderer} = require('electron');
           var character = new CharacterClass();
    
           // page will switch to skills if they press the crafting skills button
           var page = 'stats';
          
            $( document ).ready(function() {
    
                ipcRenderer.invoke('get-character').then((result) => {
                   
                    // fetch character token and creation step
                    character.token = result.token;
                    character.creationStep = result.creationStep;
       
                    // set initial page html to set points screen 1
                    // The first page of stats and skills.
                    $.ajax({
                          url: 'http://localhost/OtherRealms/php/scripts/fetch_place_points_screen1.php',
                          dataType: 'json',
                          type: 'POST',
                          contentType: 'application/json; charset=utf-8',
                          success: function( data, textStatus, jQxhr ){
                               if(data.hasOwnProperty("message"))
                               {
    
                                  switch(data.message)
                                  {
    
                                    case "success":
                                        document.getElementById("pageWrapper").innerHTML = data.html
                                      // set the character based on the retrieved character token
                   
                                        dataSend = {token:character.token};
    
                                        $.ajax({
                                            url: 'http://localhost/OtherRealms/php/scripts/fetch_character.php',
                                            dataType: 'json',
                                            type: 'POST',
                                            contentType: 'application/json; charset=utf-8',
                                            data: dataSend,
                                            success: function( data, textStatus, jQxhr ){
                                               
                                                // set character stats
                                                character.stats.valour = data.valour;
                                                character.stats.soul = data.soul;
                                                character.stats.sleight = data.sleight;
                                                character.stats.beauty = data.beauty;
                                                character.stats.wisdom = data.wisdom;
    
                                                // loop through stats and updata the score in boxes
    
                                                for(stat in character.stats)
                                                {
                                                 
                                                    $("#"+ stat + "Score").append(character.stats[stat]);
    
                                                }
    
                                                // set character sensory stats
                                                character.sensoryStats.constitution = data.constitution;
                                                character.sensoryStats.aptitude = data.aptitude;
                                                character.sensoryStats.courage = data.courage;
                                                character.sensoryStats.perception = data.perception;
                                                character.sensoryStats.fortitude = data.fortitude;
                                                character.sensoryStats.reflexes = data.reflexes;
                                                character.sensoryStats.willpower = data.willpower;
    
                                                // set mods
                                               
                                                document.getElementById("constitutionMod").innerHTML = "";
                                                $("#constitutionMod").append("+" + character.mod("constitution"));
    
                                                document.getElementById("aptitudeMod").innerHTML = "";
                                                $("#aptitudeMod").append("+" + character.mod("aptitude"));
    
                                                document.getElementById("courageMod").innerHTML = "";
                                                $("#courageMod").append("+" + character.mod("courage"));
    
                                                document.getElementById("perceptionMod").innerHTML = "";
                                                $("#perceptionMod").append("+" + character.mod("perception"));
    
                                                document.getElementById("fortitudeMod").innerHTML = "";
                                                $("#fortitudeMod").append("+" + character.mod("fortitude"));
    
                                                document.getElementById("reflexesMod").innerHTML = "";
                                                $("#reflexesMod").append("+" + character.mod("reflexes"));
    
                                                document.getElementById("willpowerMod").innerHTML = "";
                                                $("#willpowerMod").append("+" + character.mod("willpower"));
                                                // loop through sensory stats and set values in boxes
    
                                                for(stat in character.sensoryStats)
                                                {
                                                 
                                                    $("#"+ stat + "Score").append(character.sensoryStats[stat]);
    
                                                }
    
                                                // sensory stat mods
    
                                                character.mods.constitutionMod = data.constitutionMod;
                                                character.mods.aptitudeMod = data.aptitudeMod;
                                                character.mods.courageMod = data.courageMod;
                                                character.mods.perceptionMod = data.perceptionMod;
                                                character.mods.fortitudeMod = data.fortitudeMod;
                                                character.mods.reflexesMod = data.reflexesMod;
                                                character.mods.willpowerMod = data.willpowerMod;
    
                                                // character points, skill points
    
                                                character.characterPoints = data.characterPoints;
                                                character.skillPoints = data.skillPoints;
    
                                                $("#characterPointCount").append(character.characterPoints);
                                                $("#skillPointCount").append(character.skillPoints);
    
                                                // skills
    
                                                for(skill in data.skills)
                                                {
    
                                                    // place skills in character
                                                    character.skills[skill] = {skill:data.skills[skill].skill[0], tier:data.skills[skill].tier[0]};
                                                                               
    
                                                    // remove buy button and set skill per aquired skills
                                                   
                                                    $("#" + data.skills[skill].skill[0] + "Buy").remove();
                                                    $("#" + data.skills[skill].skill[0] + "Tier").append("<span>" + data.skills[skill].tier[0] + "</span>");
    
                                                }
    
                                                // crafts
    
                                                for(craft in data.crafts)
                                                {
    
                                                    character.crafts[craft] = {craft:data.crafts[craft].craft, tier:data.crafts[craft].tier};
                                                                               
                                                }
                                               
                                            },
                                            error: function( jqXhr, textStatus, errorThrown ){
                                                console.log( errorThrown );
                                            }
                                            // end get character
                                        });
    
                                        // if character has no character points remove all the arrows
                                        character.characterPoints = 0;
                                        console.log(character.characterPoints);  
                                               
                                        if(character.characterPoints <= 0)
                                        {
    
                                          // find out how to remove dynamic elements by class name
                                          console.log(document.getElementsByClassName(".scorePipArrow"));
    
                                        }
                                        // click handler for stat pip button
    
                                        document.querySelector("body").addEventListener("click", event => {
                                                                           
                                                // If none is found, it returns null
                                              if (event.target.matches(".scorePipArrow") || event.target.closest(".scorePipArrow"))
                                              {
                                                    console.log(character.characterPoints);
    
                                                    if(character.characterPoints >= 1)
                                                    {
                                                   
                                                        var stat = event.target.getAttribute("data-stat");
                                                        var statType = event.target.getAttribute("data-stat-type");
                                                     
                                                        if(statType == "stat")
                                                        {
                                                            // pip a regular stat
    
                                                            character.stats[stat] = parseInt(character.stats[stat]) + 1;
                                                            character.characterPoints = parseInt(character.characterPoints) - 1;
                                                            document.getElementById("characterPointCount").innerHTML = character.characterPoints;
                                                            document.getElementById(stat+"Score").innerHTML = "";
                                                            document.getElementById(stat+"Score").innerHTML = character.stats[stat];
                                                       
                                                            // update field in character XML
                                                            // Implement: character.xml field modification script
    
                                                            // end pip regular stat
                                                        }else{
    
                                                            // pip a sensory sat
    
                                                        }
                                                   
                                                    }
    
                                              }
    
                                              // end body click for arrows
                                        });
    
                                        // end fetch html for screen
                                    break;
    
                                  }
    
                               }
                          },
                          error: function( jqXhr, textStatus, errorThrown ){
                              console.log( errorThrown );
                         }
    
                         // End get screen html
                      });
    
                     // end get character
                });
    
                // end document ready
            });
        </script>
      </body>
    </html>
    Code (markup):
    https://ibb.co/VSRbyhZ
    Here's a link to screen image so you can see what's going on. Everything under the header h tag at the top is dynamically added to div class="pageWrapper". The carets are .scorePipArrow.

    Thanks.
     
    Jeremy Benson, Dec 15, 2022 IP
  2. James Cavalcanti

    James Cavalcanti Peon

    Messages:
    14
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    3
    #2
    To remove the arrows when the character points are depleted, you can use a combination of JavaScript and the DOM (Document Object Model) to target the elements you want to remove. Here's one way you could approach this:
    1. Use the getElementsByClassName method to select all elements with the class name .scorePipArrow. This will return an array-like object containing all the elements you want to remove.


      const arrows = document.getElementsByClassName('.scorePipArrow');
      
      Code (markup):
    2. Use a loop to iterate through the array-like object and remove each element using the remove method.
      for (let i = 0; i < arrows.length; i++) {
        arrows[i].remove();
      }
      Code (markup):
    To address the issue with the character points being reset to 20, it's important to understand where this value is being set. Is it being set in the event listener for clicking the arrows, or somewhere else in the code? It's possible that the value is being reset elsewhere in the code, or that there is some other issue causing the character points to be reset. Without seeing the full code, it's difficult to provide a more specific solution. However, it might be helpful to use debugging techniques, such as adding console log statements or using a debugger, to understand what is happening at different points in the code and identify the source of the issue.
     
    James Cavalcanti, Dec 16, 2022 IP
  3. Jeremy Benson

    Jeremy Benson Well-Known Member

    Messages:
    364
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    123
    #3
    Hey, thank you for the reply. I've got the issues fixed now. I'm facing another strange occurrence. document.queryselector sometimes returns an element and innerHTML will not update the value. It seems to update a template version of the element that needs to be re-appended to the document. Is this normal? I find that sometimes I can just set the innerHTML property on the selection and it works fine.

    Ex
    document.queryselector("#fooDiv").innerHTML = "hello";
    Code (markup):
    This will sometimes set the element text to hello. Other times it will give me a brand new fooDiv it seems, and I have to re-add it somehow.
     
    Jeremy Benson, Dec 27, 2022 IP