CODEWITHSUNDEEP
javascript
mba1592
mba1592

Reputation: 5

Linking an object to a jquery function

I am trying to link together an object in JS to a function of a button in Jquery. I've linked Jquery to my HTML so it is technically working, however, it's a specific project that is requiring the buttons to display the info. in the object. I've tried editing it on my own and I keep getting stuck and I'm not sure how to link the two. The instructions are included as well. 

 // create a JavaScript object here with the following fields: firstName, lastName, jobTitle, homeOffice
    function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.jobTitle = jobTitle;
        this.homeOffice = homeOffice;
        this.tellMeMore = tellMeMore;
    };
    var about01 = new About("Megan", "Adams", "Customer Serice Rep", "Penn Field", "I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");

    // using jQuery and the object above, display the information as the appropriate button is clicked


    var button = document.querySelectorAll ('button');

    $(document).ready(function() {
        $(".button").click(function() {
            $(".name").fadeToggle(1000);
        });
    });

     $(document).ready(function() {
        $(".button1").click(function() {
            $(".job").fadeToggle(1000);
        });
    });

    $(document).ready(function() {
        $(".button2").click(function() {
            $(".office").fadeToggle(1000);
        });
    });

    $(document).ready(function() {
        $(".button3").click(function() {
            $(".more").fadeToggle(1000);
        });
    });



<!DOCTYPE html>
<html>
  <head>
     <title role="title">CEP Engineering Application</title>
     <link rel="stylesheet" type="text/css" href="styles.css" />
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  </head>
  <body>
        <article>
            <header role=banner>
         <h1>About Me</h1>
      </header>
                <img src="img/IMG_1989.jpg" alt="Megan Adams Picture" style="width:250px;height:460px; "class="img">
        <section>
         <button type="button" class="button">Name</button>
           <p class="name">Megan Adams</p>
        </section>
        <section>
           <button type="button" class="button1">Job Title</button>
           <p class="job">Customer Service Reo</p>
     </section>
     <section>
          <button type="button" class="button2">Home Office</button>
          <p class="office">Penn Field</p>
     </section>
     <section>
          <button type="button" class="button3">Tell Me More</button>
          <p class="more">I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art. </p>
      </section>
      <script src="init.js"></script>
          </article>
  </body>
</html>

Upvotes: 0

Views: 166

Answers (4)

Aniket G
Aniket G

Reputation: 3512

Do you want something like below using jQuery $(selector).html(value);

// create a JavaScript object here with the following fields: firstName, lastName, jobTitle, homeOffice
function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.jobTitle = jobTitle;
  this.homeOffice = homeOffice;
  this.tellMeMore = tellMeMore;
};
var about01 = new About("Megan", "Adams", "Resolutions Specialist", "Penn Field", "I have been working at HomeAway in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");
$(".name").html(`${about01.firstName} ${about01.lastName}`);
$(".job").html(about01.jobTitle);
$(".office").html(about01.homeOffice);
$(".more").html(about01.tellMeMore);

// using jQuery and the object above, display the information as the appropriate button is clicked


var button = document.querySelectorAll('button');

$(document).ready(function() {
  $(".button").click(function() {
    $(".name").fadeToggle(1000);
  });
});

$(document).ready(function() {
  $(".button1").click(function() {
    $(".job").fadeToggle(1000);
  });
});

$(document).ready(function() {
  $(".button2").click(function() {
    $(".office").fadeToggle(1000);
  });
});

$(document).ready(function() {
  $(".button3").click(function() {
    $(".more").fadeToggle(1000);
  });
});
button {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <title role="title">CEP Engineering Application</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
  <article>
    <header role=banner>
      <h1>About Me</h1>
    </header>
    <img src="img/IMG_1989.jpg" alt="Megan Adams Picture" style="width:250px;height:460px; " class="img">
    <section>
      <button type="button" class="button">Name</button>
      <p class="name">Megan Adams</p>
    </section>
    <section>
      <button type="button" class="button1">Job Title</button>
      <p class="job">Customer Service Reo</p>
    </section>
    <section>
      <button type="button" class="button2">Home Office</button>
      <p class="office">Penn Field</p>
    </section>
    <section>
      <button type="button" class="button3">Tell Me More</button>
      <p class="more">I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art. </p>
    </section>
    <script src="init.js"></script>
  </article>
</body>

</html>

Upvotes: 0

Nick Parsons
Nick Parsons

Reputation: 50974

You only need to use one document.ready method in your JS.

What you can do to achieve this is add a click event listener to all your buttons. Then when a button is clicked you can refer to the button clicked using $(this). The element which you want to append text to is the paragraph next to the button clicked. You can get the paragraph element by using $(this).next('p'). Using the class name of the paragraph you can then work out which object property to display.

Below, I have used an object called classToProp which maps your class names to strings retrieved from your About object. Using this you can display the specific information you want to the adjoining p tag.

See working example below:

function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.jobTitle = jobTitle;
  this.homeOffice = homeOffice;
  this.tellMeMore = tellMeMore;
};

var about01 = new About("Megan", "Adams", "Customer Serice Rep", "Penn Field", "I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");

var classToProp = {
  name: about01.firstName + " " + about01.lastName,
  job: about01.jobTitle,
  office: about01.homeOffice,
  more: about01.tellMeMore
}

$(document).ready(function() {
  $("button").click(function() {
    var nextP = $(this).next('p');
    var className = nextP.attr("class");
    var txt = nextP.text(); // get the text from the paragraph
    nextP.text(txt ? "" : classToProp[className]); // if the text is empty, display the associated property from your object, otherwise, if it already has text make it empty - this allows for a toggle effect
  });
})
<!DOCTYPE html>
<html>

<head>
  <title role="title">CEP Engineering Application</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

<body>
  <article>
    <header role=banner>
      <h1>About Me</h1>
    </header>
    <img src="img/IMG_1989.jpg" alt="" style="width:250px;height:460px; " class="img">
    <section>
      <button type="button" class="button">Name</button>
      <p class="name"></p>
    </section>
    <section>
      <button type="button" class="button1">Job Title</button>
      <p class="job"></p>
    </section>
    <section>
      <button type="button" class="button2">Home Office</button>
      <p class="office"></p>
    </section>
    <section>
      <button type="button" class="button3">Tell Me More</button>
      <p class="more"></p>
    </section>
    <script src="init.js"></script>
  </article>
</body>

</html>

Upvotes: 0

guest271314
guest271314

Reputation: 1

Only a single jQuery() is necessary. You can use get the property names of the object using Array.prototype.keys() convert the className of current element .toLowerCase() within .html(), .filter() the property names where .indexOf() className of the current element is greater than -1, .map() and .join() the result

$(function() {
  function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.jobTitle = jobTitle;
    this.homeOffice = homeOffice;
    this.tellMeMore = tellMeMore;
  };

  const about01 = new About("Megan", "Adams", "Customer Serice Rep", "Penn Field", "I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");
  
  const keys = Object.keys(about01);
  
  $(".name, .job, .office, .more").html(function() {
      const el = this;
      return keys.filter(function(value) { 
                 return value.toLowerCase()
                        .indexOf(el.className) > -1
               })
               .map(function(value) {
                 return about01[value]
               }).join(" ")
             
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<body>
<div class="name"></div>
<div class="job"></div>
<div class="office"></div>
<div class="more"></div>
</body>

Upvotes: 0

Alen.Toma
Alen.Toma

Reputation: 4870

I have edited both the code and html and made them much smaller.

now have a look at attribute data and read the comment to understand, how this work.

 // create a JavaScript object here with the following fields: firstName, lastName, jobTitle, homeOffice
    function About(firstName, lastName, jobTitle, homeOffice, tellMeMore) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.jobTitle = jobTitle;
        this.homeOffice = homeOffice;
        this.tellMeMore = tellMeMore;
    };
    var about01 = new About("Megan", "Adams", "Customer Serice Rep", "Penn Field", "I have been working at in customer service since December 2018 and transferred over to the Resolutions Department in fall of 2018. In my spare time I love watching scary movies, listening to true crime podcasts and music, and making art.");

    // using jQuery and the object above, display the information as the appropriate button is clicked
    

    var button = document.querySelectorAll ('button');

    $(document).ready(function() {
    // present the values, 
    $("section > p").each(function(){
    // more dynamic approch
     var field = $(this).attr("data");
     var value ="";
     if (field){
     field.split(" ").forEach((x)=> {
       if (value== "")
         value = about01[x];
         else value += " " + about01[x] // firstName and lastName
     });
      $(this).html(value)
    }
  });
    
     // now you only need one method click to display toggle p 
        $(".button").click(function() {
           // you know that p exist under button
           // so go back to parent of the current object and then find the p and toggle it.
            $(this).parent().find("p").fadeToggle(1000);
        });
    });
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<article>
            <header role=banner>
         <h1>About Me</h1>
      </header>
     <img src="img/IMG_1989.jpg" alt="Megan Adams Picture" style="width:250px;height:460px; "class="img">
        <section>
         <button type="button" class="button">Name</button>
           <p data="firstName lastName" ></p>
        </section>
        <section>
           <button type="button" class="button">jobTitle</button>
           <p data="jobTitle"></p>
     </section>
     <section>
          <button type="button" class="button">homeOffice</button>
          <p data="homeOffice"></p>
     </section>
     <section>
          <button type="button" class="button">Tell Me More</button>
          <p data="tellMeMore"> </p>
      </section>
      <script src="init.js"></script>
          </article>

Upvotes: 1

Related Questions